I'm trying to use Autocomplete Widget for my autocomplete function,I receive a response with this form:
[
{"_id":{"mes":"measure1","name":"hold2"},"number":1},
{"_id":{"mes":"measure2","name":"hold3"},"number":1}
]
I'm trying to find a way to display the suggestion when typing in an input using this javascript:jquery code :
$('#q').autocomplete({
source : function(requete, reponse){
$.ajax({
url : '/app/test/testsearch/',
dataType : 'json',
data : {
queryvar : $('#q').val()
},
success : function(donnee){
//alert('success');
reponse($.map(donnee._id, function(objet){
return objet.mes + ', ' + objet.name;
}));
}
});
}
});
With this code I'm getting when I'm typing some suggestions in the input field(with id q)a success Ajax response but I cant display it,any suggestions?
Thanks a lot!!!
Related
I am trying to reload data tables that have been inserted into tabs.
Please refer to question: AJAX Update DataTable after On Success
A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -> and the content of it table two. I am changing the status now using AJAX as this:
$(".changeStatus").click(function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var status = "In Production";
var id = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {status : status , id : id},
success : function(data){
$('tr#'+id+'').css('background-color', '#ccc');
$('tr#'+id+'').fadeOut('slow');
}
});
}
else{
return false;
}
});
In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.
The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.
$(document).on('click','#ChangeNext',function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var statusid = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {statusid : statusid},
success : function(data)
{
$('#exampleone').DataTable().ajax.reload();
}
});
}
else{
return false;
}
});
the best way for putting data in a DataTables with ajax requests, is DataTables ajax api that you can see it in following link:
DataTables Ajax sourced data
jQuery sample:
jQuery('.changeStatus').click(function(event){
$('#example').DataTable({ ajax: 'data.json' });
});
JSON Sample:
{
"data": [
[
"Roshan Zaid",
"Stackoverflow user",
"New member"
],
[
"AmirAli Esteki",
"Stackoverflow and AskUbuntu user",
"New member"
]
]
}
the response of your ajax requests should be json by default
So currently I'm searching for 10 new posts and the Ajax searches in the same page from the page and I use $_GET['limits'] in my PHP query to scan the server for all requested data.
So what I'd like to do is if there is no new data to show the 'No More Posts' Div. I tried using t.length===0 with no luck, now I don't know if its because t isn't an array or whether I put it in the wrong place in my success.
var streams_stream_count=10;
function streams_stream_load(targetID){
$('#loadmorestreamoneajaxloadertarget').show();
$.ajax({
method: 'get',
url : 'stream2.php?limits='+streams_stream_count+'&targetID='+targetID,
dataType : 'text',
success: function (t) {
$('#streams_stream_container').fadeIn('slow').html(t);
$(document).scroll(function(){
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
streams_stream_count+=10;streams_stream_load(targetID);
}
});
},
complete: function(){
$('#loadmorestreamoneajaxloadertarget').hide();
}
});
}
And my hidden div to show if no new data.
<div id='nomoreposts' style='display:none;'>No more Posts</div>
UPDATE
I use $sqlLimit=mysqli_real_escape_string($mysqli,$_GET['limit'])
$call="SELECT * FROM streamdata ORDER BY streamitem_timestamp DESC LIMIT $sqlLimit";
You can also do like this :- Write code in backend (PHP function) and return html if no data found "No more Posts", also send one parameter true/false. On the bases of the parameter show html in your fronted.
Here is what I need to do:
submit post form with some hidden fields
on the 'action' page xlm is generated
get the xml generated there using php
and then I will parce xml in order to get some info.
I tried to do it using $.post function but I cannot get the xml somewhy.
$.post(
'https://..',
{
method : 'result',
payee_id : \"{$obj->payee_id}\",
login : \"{$obj->login}\",
password : \"{$obj->password}\",
shop_order_number : \"{$obj->shopOrderNumber}\",
status : 'PAYED',
},
function (data) {
alert(data);
}
);
and this code doesn't work.
you can use:
$("#myForm").ajaxSubmit({url: 'my_script.php', type: 'post'})
OR
$("#myForm").ajaxForm({url: 'my_script.php', type: 'post'})
To submit AJAX forms using jQuery.
Hope this would solve the form POSTing problem you got.
Here's the most basic code of it (i'm using this)
$("form").relatedSelects({
onChangeLoad: 'datasupplier.php',
selects: ['stateID', 'countyID', 'townID', 'villageID']
});
i need to pass several more parameter for some reason. my usual ajax code is something like this
$.post("ajax/template.php", {myparams: $("#myparams").val(), action: "SEARCH_MEMBER_DETAILS" },
function (data){
var returnCode = data.returnCode;
if (returnCode == "1"){
$("#data").val(data.name);
}
},"json");
question is, how do I send the params like myparams and action to the jQuery Related Selects code?
i tried something like
$("form").relatedSelects({
onChangeLoad: 'datasupplier.php',
data: {action: "SEARCH_MEMBER_DETAILS"},
selects: ['stateID', 'countyID', 'townID', 'villageID']
});
but it seems the additional params are not sent
The relatedScripts plugin does not provide any facility to manipulate the ajax request.
But it is possible to alter it slightly to achieve the requirement.
If you are ready to make a change in the plugin do the following steps
In the populate($caller,$select,o) method of the plugin make the following change
beforeSend: function(){
return o.onLoadingStart.apply($select, Array.prototype.slice.call(arguments,0));
},
It is now beforeSend: function(){ o.onLoadingStart.call($select); },
Then change your script like
$("#example-2").relatedSelects({
onChangeLoad : 'datasupplier.php',
loadingMessage : 'Please wait',
selects : ['stateID', 'countyID', 'townID', 'villageID'],
onLoadingStart : function(jqxhr, settings) {
console.log('st', arguments, settings.url);
settings.url += '&t=tttt'
}
});
Demo: Fiddle
I've went through the documentation of the plugin and seems that there's not a way to achieve what you need.
If you don't want to extend the plugin and implement the functionality by yourself, you can try by creating the parameter inside the onChangeLoad and pass them as GET parameter like this:
$("form").relatedSelects({
onChangeLoad: 'datasupplier.php?myparams='+$("myparams").val()+'&action=SEARCH_MEMBER_DETAILS',
selects: ['stateID', 'countyID', 'townID', 'villageID']
});
Doing an ajax call to a page to grab 5 pieces of data. 3 images as filenames, 2 statuses as numbers 1/0. End game is to use this data to instruct jquery to change out 3 divs with the images as a result of the ajax call. So am trying to get a grip on these items to hand them off to a function that will swap out these divs. Issue thus far is grabbing the data pieces into a format whereby I can manipulate them. Values to vars....
Return data seems fine. Formatted correctly. Actual return example:
[
{"optiontext" : "spin1", "optionvalue" : "brown_anna.jpg"},
{"optiontext" : "spin2", "optionvalue" : "crada_amberly.jpg"},
{"optiontext" : "spin3", "optionvalue" : "ginda_marlins.jpg"},
{"optiontext" : "SID", "optionvalue" : "1"},
{"optiontext" : "HOT", "optionvalue" : "1"}
]
Called by - and just outputting them as a list - How does one obtain this data in distinct pieces as vars for a future query image swap?
dataType:"json",
success: function (data) {
var winns="<ul>";
$.each(data, function(i,n){
winns+="<li>"+n["optionvalue"]+"</li>";
});
winns+="</ul>";
$('#message').append(winns);
}
Any help greatly appreciated - its been days...... Does not have to be JSON data either. At this point will try anything to get this charity project done.
Do you mean something like:
dataType:"json",
success: function (data) {
$("#div1").append($("<img/>").attr("src", data[0].optionvalue));
$("#div2").append($("<img/>").attr("src", data[1].optionvalue));
$("#div3").append($("<img/>").attr("src", data[2].optionvalue));
}