woocommerce AJAX auto-complete/suggestion to input text from an array - php

i am trying to add an AJAX autocomplete or autosuggestion based on php array stored. Like the Upsells and Cross-sells.
array(1001) {
[""]=>
string(17) "Select Listing..."
[551]=>
string(36) "” O Beilhote “ (ID: 551)"
[4157]=>
string(38) "“A Fogueirinha” (ID: 4157)"
[2580]=>
string(33) "“O BRONCO” (ID: 2580)"
[2858]=>
string(121) "“Restaurante O Buraquinho Dos Amigos” “Café Eclipse” – Lopes & Alves, Lda. (ID: 2858)"
[643]=>
string(98) "“Restaurante Torres” “Hotel Contriz” – Irmãos Torres, Lda (ID: 643)"
[3477]=>
string(108) "“Talho Da Barranha” “Café Asturias” – João Antonio Dias De Araujo (ID: 3477)"
[1149]=>
string(64) "“VOLTARIA” – Petisqueira Portuguesa (ID: 1149)"
[7001]=>
string(38) "[P] Estacionamento Público (ID: 7001)"
[1091]=>
string(24) "#Joni’s (ID: 1091)"
[3276]=>
string(18) "+gelato (ID: 3276)"
[1854]=>
string(20) "100 Culpa (ID: 1854)"
[5069]=>
string(19) "100 Fome (ID: 5069)"
[5054]=>
string(25) "100 Montaditos (ID: 5054)"
[4023]=>
string(25) "100 Montaditos (ID: 4023)"
[929]=>
string(24) "100 Montaditos (ID: 929)"
[7204]=>
string(25) "100 Montaditos (ID: 7204)"
What i am trying to achieve is when i search in the listing input, i need it to be autocompleted from the above array.
Image for More explaination
i have tried to use pre exits enhanced woocommerce AJAX Product search, but i couldn't figure out how to do it.
// Ajax product search box
$( ':input.wc-product-search' ).filter( ':not(.enhanced)' ).each( function() {
var select2_args = {
allowClear: $( this ).data( 'allow_clear' ) ? true : false,
placeholder: $( this ).data( 'placeholder' ),
minimumInputLength: $( this ).data( 'minimum_input_length' ) ? $( this ).data( 'minimum_input_length' ) : '3',
escapeMarkup: function( m ) {
return m;
},
ajax: {
url: wc_enhanced_select_params.ajax_url,
dataType: 'json',
delay: 250,
data: function( params ) {
return {
term : params.term,
action : $( this ).data( 'action' ) || 'woocommerce_json_search_products_and_variations',
security : wc_enhanced_select_params.search_products_nonce,
exclude : $( this ).data( 'exclude' ),
exclude_type : $( this ).data( 'exclude_type' ),
include : $( this ).data( 'include' ),
limit : $( this ).data( 'limit' ),
display_stock: $( this ).data( 'display_stock' )
};
},
processResults: function( data ) {
var terms = [];
if ( data ) {
$.each( data, function( id, text ) {
terms.push( { id: id, text: text } );
});
}
return {
results: terms
};
},
cache: true
}
};
display_result( this, select2_args );
});

Related

Datatable shows some warning when data is fetching from database using ajax

I am trying to listing data (between two dates) from database in to data tables via ajax. But data tables shows some warning message.
I am using laravel and jquery.
Data Tables warning: table id=callListDatatable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4`
My console preview shows
[{
"call_from": "4915739463158",
"call_to": "4994156959988",
"direction": "in",
"answered_by": "voicemail_msg2",
"called_at": "2016-11-17 18:04:55",
"answered_at": null,
"hungup_at": null,
"duration_ring": "00:00:00",
"duration_call": "00:00:00"
}, {
"call_from": "49718280230",
"call_to": "4994156959988",
"direction": "in",
"answered_by": "voicemail_msg1",
"called_at": "2016-11-17 08:09:26",
"answered_at": null,
"hungup_at": null,
"duration_ring": "00:00:00",
"duration_call": "00:00:00"
}, {
"call_from": "491743078107",
"call_to": "4994156959982",
"direction": "in",
"answered_by": "Andreas Hauzenberger",
"called_at": "2016-11-17 09:16:14",
"answered_at": "2016-11-17 09:16:37",
"hungup_at": "2016-11-09 09:17:53",
"duration_ring": "00:00:23",
"duration_call": "00:01:16"
}]
I don't know what happen. Please help me to solve this issue.
Here is my jquery code
//Data table
$('#callListDatatable').DataTable({
"scrollX": true,
"lengthMenu": [[100, 250, 500, 1000, -1], [100, 250, 500, 1000, "All"]],
"order": [[ 4, "desc" ]],
"language": {
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
}
}
}).columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
/*Data Tables functionality End*/
/* Date range functionality begin */
$('#reportrange').daterangepicker({
/*autoUpdateInput: false,*/
ranges: {
'Last 7 Days': [moment().subtract(7, 'days'), moment()],
'Last 30 Days': [moment().subtract(30, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'DD.MM.YYYY'
}
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD.MM.YYYY') + '-' + picker.endDate.format('DD.MM.YYYY'));
var data = $(".reportrange").val();
var daterange = data.replace(/\s/g, '');
/*$.getJSON('/call/list/daterange', {date: daterange }, function ( json ) {
$('#callListDatatable').dataTable().fnClearTable();
$('#callListDatatable').dataTable().fnAddData( json );
});*/
$.ajax({
type: "POST",
dataType: "json",
url: '/call/list/daterange',
data: {date: daterange },
success : function(data){
console.log(data);
$(data).each(function(key, value){
$('#callListDatatable').dataTable().fnClearTable();
$('#callListDatatable').dataTable().fnAddData( value )
});
}
});
});
Here is my controller code
public function show(Request $request)
{
/*dd($request->all());*/
$dateExplode = explode("-", $request->date);
$dateBegin = date('Y-m-d 00:00:00', strtotime($dateExplode[0]));
$dateEnd = date('Y-m-d 23:59:00', strtotime($dateExplode[1]));
$calls = Call::select('call_from', 'call_to', 'direction', 'answered_by', 'called_at', 'answered_at', 'hungup_at', 'duration_ring', 'duration_call')
->whereBetween('called_at', [$dateBegin, $dateEnd])
->get();
return json_encode($calls);
}
Problem with selector, use ID instead class.
var data = $(".reportrange").val();
change this to
var data = $("#reportrange").val();

Hight Chart Dynamic Json Value is not loading in Series Data Section but Static Value is Loading Finely

Hi I have one issue i was creating one HighChart in this Static values to the series data section is working finely. but The same type value from a dynamic section is not showing.
function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){
//alert(json);
//alert($.parseJSON(data));
//alert(obj);
var finaldata = '[';
var tmp = '';
var chart;
$.each(data, function( index, value ) {
finaldata += '{';
$.each(value, function( index, value ) {
//alert(index);
if(index === 'name')
{
tmp = " " + index + " : '" + value + "', ";
}
else
{
tmp = " " + index + " : " + value + ", ";
}
finaldata += tmp;
//alert("finaldata: " + finaldata);
});
finaldata+='},';
});
finaldata +=']';
//alert(finaldata);
chart = new Highcharts.Chart({
chart: {
/* backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(0, 0, 0)'],
[1, 'rgb(0, 0, 0)']
]
},*/
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
type: 'category'
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
//sdata: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
//data : finaldata,
}],
});
///chart.series[2].data.push(finaldata);
});
}
i am getting final data like this only
[{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
but i cant load that in this graph but when paste same value in static mode its showing correctly.
now its showinng a blank section only.
I am new to HighCharts Please help. Thanks in advance.
Your code is creating finaldata as a string, when you want to produce an array. You should have better luck with something like this:
// Create a new array
var finaldata = []
var chart;
// Perform your operations
$.each(data, function( index, value ) {
// Create a new hash
var currentItem = {}
// Create the proper values in your hash
$.each(value, function( index, value ) {
currentItem[index] = value;
});
// Push the new hash to the array
finaldata += currentItem;
});
If all of your data is being passed in a way that your old code successfully created the string you shared, then this should build the object for which you are looking.
To test this you may first want to try leaving your code exactly how it is, and parsing the string to JSON:
// Use this instead of 'data : finaldata'
data: JSON.parse( finaldata ),
This will try to turn your string into the objects on which you are trying to operate. That said, it would be in poor form to practice building an array via string manipulation. I would very strongly encourage you to follow the first approach I detailed.
Hi i Found this as For My Query.
var finaldata = [];
$.getJSON('config/alumniusermodes.php',function(data){
// Create a new array
var finaldata = [];
var chart;
var categories = [];
var tools = [];
$.each(data, function( index, value ) {
var currentItem = {}
finaldata.push({
name: value.name,
y: parseFloat(value.y)
});
});
var chart = new Highcharts.Chart({
chart: {
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
categories: categories
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
data : finaldata,
}],
});
});
This is my right coding which solved my issue

tablesorter create table from ajax

I try to retrieve data to create a table with tablesorter like here :
http://mottie.github.io/tablesorter/docs/example-widget-build-table.html ( sections : "Setup - Object (javascript variable)" )
The HTML code ( a simple DIV ) :
<div id="list_user"></div>
Here is the JS script :
jQuery(document).ready(function() {
function get_users_list(){
return $.post(
"/mysql/function_users.php",
{
'type_request' : 'list_users'
},
"json"
);
};
get_users_list().done(function(data){
return data;
});
$(document).ajaxComplete(function( event,request, settings ) {
if (settings.url == "/mysql/function_users.php") {
var dataOject = request.responseText;
alert(dataOject);
$('#list_user').tablesorter({
debug:true,
theme : 'blue',
sortList: [[0,0]],
widthFixed: false,
widgets: ['zebra','filter'],
data : dataOject,
widgetOptions : {
build_objectRowKey : 'rows',
build_objectHeaderKey : 'headers',
filter_hideEmpty : false
}
});
};
});
});
When I check what is return from the php script "function_users.php", I get the following structure :
{
"headers":[
[
"Name",
"Surname",
"email",
"region",
"date creation",
"last modification",
{"text":"","class":"not_sort filter-false toclean"},
{"text":"","class":"not_sort filter-false toclean"},
{"text":"","class":"not_sort filter-false toclean"}
]
],
"rows":[
["toto","toto","toto#toto.com","latam","1410142447","1410142537"],
["tata","tata","tata#tata.com","emea","1410142447","1410142537"],
["titi","titi","titi#titi.com","asia","1410142447","1410142537"],
["tutu","tutu","tutu#tuttu.com","latam","1410142447","1410142537"]
]
}
If you have any lead please. Thank you
I was intrigued by your question, and I am eager to make use of this tablesorter tool in the future. I have created a couple of possible approaches to the problem.
See http://jsfiddle.net/terrywbrady/4my61h6d/9/
The first approach (commented out) requests the data from a GIST.
var gisturl = "https://gist.githubusercontent.com/terrywbrady/eb75d9097e633682539e/raw/798bd947404dbcc388fc8954d5d557dec13d0ef7/result.json";
function get_users_list(){
$('#list_user').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
build_type : 'json',
build_source : {
url: gisturl,
dataType: 'json'
}
}
});
};
The second approach uses the jsfiddle echo service to return the result.
var DATA = {
"headers":[
[
"Name",
"Surname",
"email",
"region",
"date creation",
"last modification",
{"text":"","class":"not_sort filter-false toclean"},
{"text":"","class":"not_sort filter-false toclean"},
{"text":"","class":"not_sort filter-false toclean"}
]
],
"rows":[
["toto","toto","toto#toto.com","latam","1410142447","1410142537"],
["tata","tata","tata#tata.com","emea","1410142447","1410142537"],
["titi","titi","titi#titi.com","asia","1410142447","1410142537"],
["tutu","tutu","tutu#tuttu.com","latam","1410142447","1410142537"]
]
};
var JDATA = {
json : JSON.stringify(DATA)
}
function get_users_list2(){
$('#list_user').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
build_type : 'json',
build_source : {
url: "/echo/json/",
data: JDATA,
contentType: "application/json",
type: "POST",
dataType: 'json'
}
}
});
};
For simplicity, I removed a few of your display options from the table configuration.

Displaying image within x editable when input type is select2

I got problem with displaying in x-editable html img generated in the formatSelection of the select2.
Select2 dropdown displays correctly images, but x-editable doesn't.
I have:
<a href="#" class="editable-select" data-pk="10" data-url="/my_url/1" data-name="my_data_id" data-value="1" data-type="select2"/></a>
<script>
function format(state) {
var result = "";
if(state.id){
result = '<img src="/path_to_img/et'+state.id+'.png"/>';
}
return result;
}
$('.editable-select').editable({
source: [
{id: '1', text: 'option_1'},
{id: '2', text: 'option_2'},
{id: '3', text: 'option_3'},
],
select2: {
formatResult: format,
formatSelection: format,
escapeMarkup: function (m) {return m; }
}
});
</script>
As a result I have editable which displays
<img src="/path_to_img/et1.png"/>
as pure text instead of displaying image et1.png.
The reason for this is x-editable which assigns whatever text (pure or formatted) it gets from select2 formatSelection to editable component as text through $(element).text(text).
If formatted text were assigned through $(element).html(text) image would have been displayed instead of text.
What would be the best way around this to make x-editable assign correctly html formatted content to element text?
An example with Awesome icons font (can be easily formated to <img> tag instead of <i>)
var icons = [];
$.each({
"compass" : "icon-compass",
"eur" : "icon-eur",
"dollar" : "icon-dollar",
"yen" : "icon-yen",
"won" : "icon-won",
"file-text" : "icon-file-text",
"sort-by-attributes-alt" : "icon-sort-by-attributes-alt",
}, function (k, v) {
icons.push({
id: k,
style: v
});
});
function format(icon) {
if (!icon.id) return icon.style;
return "<i class='icon-" + icon.id + "'></i> " + icon.style;
}
$('#awsome_icons_select').editable({
inputclass: 'form-control input-medium select2',
select2: {
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function (m) {
return m;
}
},
source: icons,
display: function (value) {
if (!value) {
$(this).empty();
return;
}
var html = "<i class='icon-" + value + "'></i> ";
$(this).html(html);
}
});
This should do the trick for image:
var countries= [];
$.each({
"US" : "USA",
"RU" : "Russia",
"DK" : "Denmark",
"FR" : "France",
"PL" : "Poland",
"DE" : "Germany",
"GB" : "Great Britain",
}, function (k, v) {
countries.push({
id: k,
state: v
});
});
function format(country) {
if (!country.id) return country.state;
return "<img src='path_to_images/" + country.id + ".png' /> " + country.state;
}
$('#countries_select').editable({
inputclass: 'form-control input-medium select2',
select2: {
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function (m) {
return m;
}
},
source: countries,
display: function (value) {
if (!value) {
$(this).empty();
return;
}
var html = "<img src='path_to_images/" + value + ".png' /> ";
$(this).html(html);
}
});

POST extjs 4 fields to PHP on store.load

I'm migrating from extjs 2.2 to extjs 4.0. My code filters my grid data trough an php (the proxy url) that POST the some ext fields.
etx store:
var store = Ext.create('Ext.data.Store', {
model: 'Company',
remoteSort: true,
remoteFilter: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
url: "logica_de_aplicacao/usuario/grid_usuarios_dados.php",
reader: {
root: 'results',
totalProperty: 'total'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'nome',
direction: 'ASC'
}]
});
ext fields (two exemples, there are too many fields):
var txtLogin = new Ext.form.TextField({
fieldLabel: "Login",
width: 200
});
var txtAtivo = new Ext.form.ComboBox({
fieldLabel: 'Ativo',
width: 200,
name: 'ativo',
editable: false,
disableKeyFilter: true,
forceSelection: true,
triggerAction: 'all',
mode: 'local',
store: new Ext.data.SimpleStore({
id: 0,
fields: ['value', 'text'],
data : [['S', 'Sim'], ['N', 'Não']]
}),
valueField: 'value',
displayField: 'text',
hiddenName: 'ativo'
});
Filtering:
tbar: [{
text: "Adicionar Filtro", //add filter
tooltip: "Filtre os resultados",
iconCls:"icone_filtro",
handler: function() {
iniciaPesquisa();
}
}, {
text: "Remover Filtro", //remove filter
tooltip: "Cancelar o filtro",
iconCls:"icone_cancel_filtro",
handler: function() {
store.baseParams = {
login: "",
nome: "",
privilegio: "",
ativo: "",
municipio: ""
};
store.removeAll();
store.load();
}
}],
PHP:
...
$login = $_POST["login"];
...
$ativo = $_POST["ativo"];
In ext 2.2 that would normally post the fields content on the store.load() action, but nothing happens now. How could I post those fields in ext 4?
(apologizes for the bad english)
It's actually simpler now, just use store.clearFilter()
store.clearFilter();
store.removeAll();
store.load();
var store = Ext.create('Ext.data.Store', {
model: 'Company',
remoteSort: true,
remoteFilter: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
url: "logica_de_aplicacao/usuario/grid_usuarios_dados.php",
baseParams: { //here you can define params you want to be sent on each request from this store
login: "",
nome: "",
privilegio: "",
ativo: "",
municipio: ""
},
reader: {
root: 'results',
totalProperty: 'total'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'nome',
direction: 'ASC'
}]
});
tbar: [{
text: "Adicionar Filtro", //add filter
tooltip: "Filtre os resultados",
iconCls:"icone_filtro",
handler: function() {
iniciaPesquisa();
}
}, {
text: "Remover Filtro", //remove filter
tooltip: "Cancelar o filtro",
iconCls:"icone_cancel_filtro",
id : 'BtnRemoveFilter', // added this
handler: function() {
store.baseParams = {
login: "",
nome: "",
privilegio: "",
ativo: "",
municipio: ""
};
store.removeAll();
store.load();
}
}],
var Btn = Ext.getCmp('BtnRemoveFilter');
Btn.on('click', function(){
store.load({
params: { //here you can define params on 'per request' basis
login: "the value u want to pass",
nome: "the value u want to pass",
privilegio: "the value u want to pass",
ativo: "the value u want to pass",
municipio: "the value u want to pass"
}
})
});
try this code is working or not.i think this is what u want

Categories