issue with $ajax async false - ajax

I have this code:
for(var i in dataJson){
direcc=dataJson[i].dir ;
id=dataJson[i].id ;
$.ajax({
url: 'http://dev.virtualearth.net/REST/v1/Locations?query=' + direcc + '&key=mykey&jsonp=?',
dataType: 'json',
async: false,
success: function(result) {
loc = result.resourceSets[0].resources[0].point.coordinates;
direcc=result.resourceSets[0].resources[0].address.formattedAddress;
lat=loc[0];
long=loc[1];
$("#bing").append('latitudeBing:' + lat + '<p>longitudeBing:' + long+'$$$$$$'+id);
}
});
The problem is that I want to write latitude+longitude+ id, but when it writes the id is the last for all of them ( id goes from 1-200, and in all coordinates appears 200).
The original function was $getjson and i changed it to make the $ajax call async:false, but that doesn't fix my problem.
Could anybody help me please? Thank you very much!!

Edited with the correct answer now.
Fiddle to show the concept
for(var i in dataJson){
var direcc = dataJson[i].dir;
var id = dataJson[i].id;
makeAjaxCall(direcc, id);
}
function makeAjaxCall(direcc, id) {
$.ajax({
url: 'http://dev.virtualearth.net/REST/v1/Locations?query=' + direcc + '&key=mykey&jsonp=?',
dataType: 'json',
async: false,
success: function(result) {
loc = result.resourceSets[0].resources[0].point.coordinates;
direcc=result.resourceSets[0].resources[0].address.formattedAddress;
lat=loc[0];
long=loc[1];
$("#bing").append('latitudeBing:' + lat + '<p>longitudeBing:' + long+'$$$$$$'+id);
}
});
}
This puts the "current" direcc and id in the scope of the makeAjaxCall function. The Fiddle I added is just showing how.
Also, no need to keep the async: false, around, so feel free to remove that if you want.

Related

How to animate AJAX post?

sorry for this request but I'm an AJAX beginner.
I have the following script and I'm trying to animate it (something like "fade").
jQuery(document).ready(function($){
$(document).on("click",".ratingemo", function(){
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id="+id+"&rating="+rating;
$.ajax({
type: "POST",
url: "/ldplug/rate.php",
data: data,
success: function(e){
$("#r"+id).html(e);
}
})
});
});
How can I do that?
Many thanks!
First of all live is deprecated, check out on instead. But that being said, why not:
success: function(e){
$("#r"+id).hide();
$("#r"+id).html(e).fadeIn("slow");
}
It would be better to just have $("#r"+id) hidden to start, I just hid it to illustrate the point.
Without seeing your HTML, I have to assume that something like this will work for you. Hide the element, populate it, then fade it in.
jQuery(document).ready(function ($) {
$(".ratings").live("click", function () {
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id=" + id + "&rating=" + rating;
$("#r" + id).hide();
$.ajax({
type: "POST",
url: "/ratings/rate.php",
data: data,
success: function (e) {
$("#r" + id).html(e);
$("#r" + id).fadeIn();
}
})
});
});

Display Json from two nodes with Ajax

I am having difficulty to display data from json. Title shows fine but item.volumeInfo.industryIdentifiers.type returns undefined.
$.ajax({
url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
dataType: 'json',
success: function (data) {
$.each(data.items, function (index, item) {
$(".tab1").append("<div>" + item.volumeInfo.title + "</div><div>" + item.volumeInfo.industryIdentifiers.type + "</div>");
});
}
});
Fiddle is here: http://jsfiddle.net/HFs8U/1/
Really appreciate your help.
You need to put [0] before .type as a volumeInfo can have two industryIdentifiers. Naturally this will only show the first one so you may need to find a more appropriate way of showing both if more than one exist.
$.ajax({
url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
dataType: 'json',
success: function (data) {
$.each(data.items, function (index, item) {
$(".tab1").append("<div>" + item.volumeInfo.title + "</div><div>" + item.volumeInfo.industryIdentifiers[0].type + "</div>");
});
}
});
The solutions wasn't very difficult. david99world suggested to do another $.each an loop through each item and pointed to a fiddle. I have slightly amended it and came up with:
$.ajax({
url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
dataType: 'json',
success: function (data) {
$.each(data.items, function (i, item) {
$(".tab1").append("<div>" + item.volumeInfo.title + "</div>");
$.each(item.volumeInfo.industryIdentifiers, function (i2, type) {
$(".tab1").append("<div>" + type.type + "</div>");
});
});
}
});
http://jsfiddle.net/8SnaL/
Hopefully it may be useful for some body else.

display values returned by json

I have simple question to display data on html page. Following code displays array of json data on screen. but, I want to display it by each element such as "url", "img_url" and so on.
could you please let me know who to do it ?
ajax code
var dataString = 'url=' + pathname + '&img_name=' + img_name + "&tag=" + tag;
$.ajax({
type: "POST",
url: "image_finder.php",
data: dataString,
dataType: 'json',
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
//handleError();
alert("error");
} else {
var data = xhr.responseText;
$('#tt').html("<div id='message'></div>");
$('#message').html(data);
}
}
});
json return
{"cid":"14","url":"http:\/\/localhost\/","img_url":"http:\/\/static.naver.net\/www\/up\/2013\/0305\/mat_173330634c.jpg","img_name":"mat_173317134c.jpg","html":"<div id=\"hotspot-19\" class=\"hs-wrap hs-loading\">\r\n<img src=\"http:\/\/static.naver.net\/www\/up\/2013\/0305\/mat_173330634c.jpg\">\r\n<div class=\"hs-spot-object\" data-type=\"spot\" data-x=\"95\" data-y=\"64\" data-width=\"30\" data-height=\"30\" data-popup-position=\"left\" data-visible=\"visible\" data-tooltip-width=\"200\" data-tooltip-auto-width=\"true\">\r\nasdf\r\n<\/div>\r\n<div class=\"hs-spot-object\" data-type=\"spot\" data-x=\"168\" data-y=\"53\" data-width=\"30\" data-height=\"30\" data-popup-position=\"left\" data-visible=\"visible\" data-tooltip-width=\"200\" data-tooltip-auto-width=\"true\">\r\nrere\r\n<\/div>\r\n<\/div>\r\n","jscript":""}
$.ajax({
type: "POST",
url: "image_finder.php",
data: dataString,
dataType: 'json',
success: function (data) {
for(var item in data){
console.info(item);//print key
console.info(data[item]);//print value
}
}
});
I hope this is what you need.

CFWheels Pagination using AJAX

I've searched the entire Internet, all of it, and cannot find an answer to this.
I'm using the ColdFusion CFWheels Framework to query a database. The query is done via AJAX like this:
var id = $("#ship-id").val();
$.ajax({
type: "POST",
url: "/my-controller/my-method?format=json",
data: {shipId: id},
dataType: "json",
success: function(response) {
var resultHtml = '';
$.each(response, function(i, value) {
resultHtml += '<tr><td>' + value.FIRSTNAME + ' ' + value.LASTNAME + '</td></tr>';
});
$("#my-table").html(resultHtml);
}
});
I need to paginate that result set. In CFWheels you normally do that by setting the handle, page, perPage and order values in the query like this:
var order = model("order").findAll(
select="id, firstname, lastname, email",
where="orderid IN (#ValueList(orders.id)#)",
handle="ordersQuery",
page=params.page,
perPage=5,
order="lastname"
);
Then you just put this line in your view:
<cfoutput>#paginationLinks(handle="ordersQuery")#</cfoutput>
But... how in the heck can you get pagination to work with an AJAX call?
I think that something along these lines might be your answer (notice I removed the url and added those params to data ...
$.ajax({
type: "POST",
data: {
shipId: id,
controller: myController,
action: myAction,
page: params.page,
},
dataType: "json",
success: function(response) {
var resultHtml = '';
$.each(response, function(i, value) {
resultHtml += '<tr><td>' + value.FIRSTNAME + ' ' + value.LASTNAME + '</td></tr>';
});
$("#my-table").html(resultHtml);
}
});

synonym api Ajax call return

Have struggled with this call for a while now but i can't get it to work. dataToReturn still returns Error and not the called data. What am i doing wrong?
function get_translation(search) {
search = search.replace(/(<([^>]+)>)/ig, "").toLowerCase();
original = search;
google.language.translate( original , 'en', 'sv',
function(result) {
translated = result.translation;
$("#results").html('<li class="ui-li-has-icon ui-li ui-li-static ui-btn-up-c" role="option" tabindex="0">'+ translated + '</li>')
});
};
function get_synonyms(items) {
var dataToReturn = "Error";
$.ajax({
url: 'http://words.bighugelabs.com/api/1/xxx/' + items+ '/json',
type: 'GET',
dataType: 'jsonp',
async: false,
cache: false,
success: function(data) {
dataToReturn = data;
}
});
return dataToReturn;
}
$('#results').delegate("li", "tap", function(){
myDate = new Date();
displayDate = myDate.getDate() + "/" + myDate.getMonth()+1 + "/" + myDate.getFullYear();
id = myDate.getTime();
var wordObject = {'id' : id, 'date': displayDate, 'translated': translated, 'original': original, 'nmbr': "0", 'syn': get_synonyms('hello')};
save_terms(wordObject);
loopItems() ;
$("#results").html("");
$("#addField").val("");
// location.reload(true);
});
It's because the return dataToReturn line is being executed before the AJAX call is complete. When you call $.ajax, the browser says, "Okay, I'll just move on to the next thing while I'm waiting for that to get back to me."
The simplest way to fix this would be to change the success function to actually do whatever it is you're trying to do with dataToReturn. But if that's not really feasible, then more context would help come up with a better answer.

Resources