How to work with Google Suggest queries using jQuery - javascript

I am trying to work with the Google API for suggest queries. But I am getting an error.
Here is my code:
$.ajax({
url:'http://suggestqueries.google.com/complete/search?client=chrome&q=sheikh+hasina',
type:"GET",
dataType: 'jsonp',
jsonp:function (data) {
console.log('yes');
},
async:'true',
success:function (data) {
console.log('yes');
},
error: function(jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});

Assuming that you're trying to get JSONP data from a URL, try this instead.
$.ajax({
url: 'http://suggestqueries.google.com/complete/search?client=chrome&q=sheikh+hasina',
type: 'GET',
dataType: 'jsonp',
success: function (data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});

Related

calling ajax request inside ajax request

I want to call the jquery ajax inside another ajax success response.'request-status' response return correctly and '.table-responsive' div reloaded what I excepted.But in success response when I tried to call 'welcome-mail' I caught Uncaught SyntaxError: Unexpected token ) .I tried as as
$.ajax({
url: 'request-status',
type: 'GET',
data: {'id':user_id,'status':status,'comment':comment},
dataType: 'JSON',
success: function(data, textStatus, jqXHR){
//alert(data);
$(".table-responsive").load(location.href + " .table-responsive");
$.ajax({
type: "GET",
url: "welcome-mail",
data: {'id':user_id},
dataType: 'JSON',
success: function(data, textStatus, jqXHR){
alert(data);
}
});
},
error: function(jqXHR, textStatus, errorThrown){
// alert('errror');
},
});
Route
Route::get('welcome-mail','travelerHome#welcomeMail');
controller
public function welcomeMail(Request $request)
{
$request_data = $request->all();
$id = $request_data['id'];
return response()->json();
}
You are missing a bracket after success, but have an extra }); that doesn't belong there - it should be:
success: function(data, textStatus, jqXHR){
alert(data);
}
});

Ajax Response throwing JavaScript Syntax Error

function fnValidatePCRHours(pcr, hoursEntered)
{
$.ajax({
type: "GET",
url : "/TMS/validatePCRHours.html?pcr="+pcr+"&hoursEntered="+hoursEntered,
cache: false,
success: function(data, textStatus, jqXHR)
{
alert(data);
return true;
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
return false;
}
});
return false;
}
As soon as i get response (IN) from server, i get script error. Can any one help me on this?

do something at unsuccessful jquery ajax request

My ajax request is hitting an api with rate limits.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
I would like to know when I hit the rate limit.
But for the requests showing this in the console :
Failed to load resource: the server responded with a status of 429 (OK)
I don't see 'success' or 'error'.
It's like success and error are not executed.
Is there a way to popup and alert e.g. ?
I tried complete but it does not work either.
Thank you
I could not find documentation for dataObj but removing it seemed to make the query run properly.
If you get rid of it the error callback gets executed and you will be able to see error in the console.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
edit:
turns out what you actually want to change is the datatype. Unless you are explicitly also passing a callback you should tell jQuery that you are getting json and not jsonp back.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "json",
dataObj: index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
Try using the jQuery statusCode object in the settings, like this:
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
},
statusCode: {
429: function() {
alert( "Exceeded request limit." );
}
}
});

JQuery append() doesn't update container upon ajax success

I have this ajax call:
$.ajax({
url: "AddStandardleistungenSelected",
data: { services: services1 },
dataType: "html",
traditional: true,
success: function (data) {
$('#standartleistungen_list_selected').empty().append(data);
$.ajax({
url: "GetStandardleistungenNotSelected",
data: { services: services1 },
dataType: "html",
traditional: true,
success: function (data2) {
$('#standartleistungen_list_NotSelected').empty().append(data2);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("something went wrong");
console.log(textStatus, errorThrown);
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("something went wrong");
console.log(textStatus, errorThrown);
}
});
That is supposed to update 2 containers upon receiving 2 responses from the mvc controller actionMethods, I receive the responses, and even succeed in updating the other way around:
$.ajax({
url: "AddStandardleistungenNotSelected",
data: { services: services },
dataType: "html",
traditional: true,
success: function (data) {
$('#standartleistungen_list_NotSelected').empty().append(data);
$.ajax({
url: "GetStandardleistungenSelected",
data: { services: services },
dataType: "html",
traditional: true,
success: function (data2) {
$('#standardleistungen_list_selected').empty().append(data2);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("something went wrong");
console.log(textStatus, errorThrown);
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("something went wrong");
console.log(textStatus, errorThrown);
}
});
I have checked every damn possible thing that I could think of and this thing still doesn't want to update !!!
Please help me out!!! :(

If string is something then value is null

In javascript how can I write a function that if string is 'Select client' then address and contact number fields should be null or blank. I have already this function that if client name is selected then address and contact number fields are entered automatically using the populator gem of rails.
$('#client_id').change(function(){
$.ajax({
url: "/fetch_client",
type: "POST",
data: "id="+$(this).attr('value'),
dataType: "json",
success: function(data, textStatus, xhr){
$('#client_address').attr('value',data.client_address);
$('#client_contact_number').attr('value',data.client_contact_number);
},
error: function(xhr, textStatus, errorThrown){
}
});
});
Can some one please help me as I am new to javascript?
$('#client_id').change(function(){
if ($(this).val() == "Select client") {
$('#client_address').attr('value', "");
$('#client_contact_number').attr('value', "");
} else {
$.ajax({
url: "/fetch_client",
type: "POST",
data: "id="+$(this).attr('value'),
dataType: "json",
success: function(data, textStatus, xhr){
$('#client_address').attr('value',data.client_address);
$('#client_contact_number').attr('value',data.client_contact_number);
},
error: function(xhr, textStatus, errorThrown){
}
});
}
});

Categories