I am new to javascript and jquery, in my code I'm initiating a AJAX call and I get the following response.
I'm trying to implement an autocomplete functionality. I am using below code to do AJAX call.
$( "#city" ).autocomplete({
source: function( request, response ) {
jQuery.ajax({
url: "the url",
data: {SearchTerm: request.term}
success: function (data) {
console.log("the data is" +data);
response(data);
}
}).fail(function (jqXHR, textStatus, error) {
console.log("failure1" + textStatus);
console.log("failure2" + jqXHR.status);
});
},
minLength: 3,
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
Even though I see 200 response from the server and the response in JSON format, success method doesn't get called and fail get called. Since I'm getting JSON response with 200 status, doesn't success method should get called?
Try this, may be this will help you :
Option 1 :
May be you accidently turning On Magic Quotes in PHP
But this function is already deprecated in PHP 5.3.0.
And REMOVED as of PHP 5.4.0. as mentioned in here
Go to your php.ini file
Search this keyword : magic_quotes_gpc
Set it to OFF : magic_quotes_gpc = Off
Option 2 :
Do it on your code like this :
if (get_magic_quotes_gpc()) {
$returnedValue = stripslashes($yourReturnedValue);
}
Related
I have a set of REST URIs that i can access after authenticating on the server. This service takes a JSON input with the login information and retrieve a JSON output with the session ID.
When using a Rest client, like a chrome extension, everything works.
Now I want to implement it using JS but despite of the failure return, I can not see any details of what is wrong (error messages are blank) and neither could found what I am missing in my code.
$.ajax({
// the URL for the request
url: "https://host002:50000/b1s/v1/Login",
// the data to send (will be converted to a query string)
data: {
UserName: "manager",
Password: "1234",
CompanyDB: "CUS_001"
},
// whether this is a POST or GET request
type: "POST",
// the type of data we expect back
dataType : "json",
// code to run if the request succeeds;
// the response is passed to the function
success: function( json ) {
$( "<h1/>" ).text( json.title ).appendTo( "body" );
$( "<div class=\"content\"/>").html( json.html ).appendTo( "body" );
},
// code to run if the request fails; the raw request and
// status codes are passed to the function
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem! " + xhr.responseText);
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
// code to run regardless of success or failure
complete: function( xhr, status ) {
alert( "The request is complete!" );
}
});
xhr.responseText is always blank. Status is always error. errorThrown is always blank as well.
I tried also the $post method but got the same behavior.
Your JSON is incorrect. Try using this
data: JSON.stringify({UserName: "manager", Password: "1234", CompanyDB: "CUS_001"});
While navigating from one url to other there is a cross-domain error thing which pops up.
Try doing this.
Call to a function on your same url using ajax and from there use CURL request to your web service url.
I have the following autocomplete that pulls from my ajax data source:
$("#id_q").autocomplete({
source: function (request, response) {
$.ajax({
url: "/search/autocomplete/",
dataType: "jsonp",
data: {
q: request.term
},
success: function (data) {
alert(data);
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
Server side I can see that results are being returned correctly and look like:
{"results": ["BEEF", "BEEFARONI", "BEEFARONI", "BEEF", "BEET"]}
The success method never fires the alert.
Also should I rename request.term?
What am I doing wrong and where can I print the data I am returning to figure out what is going on?
Do you pass data to source method?
Is your url correct? I think yours is wrong, try writing the whole URL or use a REST client to check it.
Thanks for the hint #Andrew Whitaker . I removed the entire dataType line and it worked.
This is making me crazy:
I can successfully pass arguments into this function, and display them in an alert. I can also populate the div by id, if I define the values in the function.
function getStuff( req, elementid ) {
//var req = 'slider';
//var elementid = '#slider';
//var req = 'thumbnails';
//var elementid = '#thumbnails';
$.ajax({
async: false,
url: '/update',
contentType: 'text/html',
data: { putski: req },
type: 'GET',
dataType: "html",
success: function(stuff) {
$( elementid ).html(stuff);
alert(req+elementid)
},
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
complete: function( xhr, status ) {
return false;
}
});
};
$(document).ready( getStuff( 'thumbnails', '#thumbnails' ) ); // alert shows thumbnails#thumbnails but div does not populate.
The following variation is populating and should rule out issues other than the one I've described.
function getStuff( req, elementid ) {
var req = 'slider'; //uncomment these definitions and the div populates
var elementid = '#slider';
//var req = 'thumbnails';
//var elementid = '#thumbnails';
$.ajax({
async: false,
url: '/update',
contentType: 'text/html',
data: { putski: req },
type: 'GET',
dataType: "html",
success: function(stuff) {
$( elementid ).html(stuff);
alert(req+elementid)
},
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
complete: function( xhr, status ) {
return false;
}
});
};
$(document).ready( getStuff ); // populated using the values defined at the top.
You are comparing apples to oranges
In the second version, you can try the following:
var req = 'thumbnails';
var elementid = '#thumbnails';
If this doesn't work then you know that either the server code is not dealing with the "thumbnails" parameter correctly, or the element id "#thumbnails" is not defined. I doubt that the problem is with passing the parameters vs. setting them in the function.
Okay, I fixed it but I have to admit, I don't really understand the behavior. I commented out "async: false," and it started working with the thumbnails. I added that line in the first place because the slider doesn't work without it. :p Maybe someone could shed some light on this?
I'm using the JqueryUI autocomplete. Sometimes the fetching of results isn't immediate so I'd like to notify the user the autocomplete is fetching options that match his query.
My Code:
$( "#searchid" ).autocomplete({
source: "/autocomplete_url.php",
minLength:3,
select: function(event, ui) {
event.preventDefault();
$("#searchid").val(ui.item.value);
$("#formid").submit();
}
});
How can I make the autocomplete to open a 'fetching results status bar' when sending a request to the web-service that is working on finding the results?
This approach assumes you're using an Ajax call to retrieve your dataset, but I've used something similar and it worked ok.
Set up a div on the page where you want the message.
HTML:
<div id="AutocompleteStatus" style="display:none">Loading data...please wait</div>
You then want to catch the key up event on your autocomplete:
jQuery:
$( "#searchid" ).keyup(function() {
$('#AutocompleteStatus').show();
});
Then your autocomplete could look something like this:
$( "#searchid" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/autocomplete_url.php",
dataType: "json",
data: {
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
$("#AutocompleteStatus").hide(); // <== HIDE IT HERE
response( $.map( data.returndata, function( item ) {
return {
label: item.name,
value: item.value
}
}));
}
});
}, minLength:3,
select: function(event, ui) {
event.preventDefault();
$("#searchid").val(ui.item.value);
$("#formid").submit();
}
});
So the short version: Key up on your search box shows the div, on the return from your Ajax call (I'm using sample parameter names, your example didn't give any actual names), just hide the div again.
When I look the response from Chrome Developer Tools I see this:
[{
"summary": "foo",
"key": "myKey"
}]
My javascript(UPDATED):
jquery183(function() {
jquery183( "#city" ).autocomplete({
source: function( request, response ) {
jquery183.ajax({
url: '/servlet/ajax/',
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( jquery183.map( data, function( issue ) {
return {
label: issue.summary + ", " + issue.key,
value: issue.summary
}
}));
}
});
},
minLength: 2,
open: function() {
jquery183( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
jquery183( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
HTML:
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
Powered by geonames.org
</div>
I thought this should work, but it does not suggest any autocomplete items. Any suggestions?
If more code needed, feel free to ask.
As seen on: http://jqueryui.com/autocomplete/#remote-jsonp
You forgot to copy/paste the ajax call to retrieve your data.
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
}
});
I am not sure but is there a problem with <input id="city" />. It should probably be <input id="city" type="text"/>
Found answer from here:
Ajax success event not working
The result is probably not in JSON format, so when jQuery tries to parse it as such, it fails. You can catch the error with error: callback function.
You don't seem to need JSON in that function anyways, so you can also
take out the dataType: 'json' row.