Help passing variables between functions in ajax callbacks

Question

OK I am building something that makes an ajax request to one server where it determines the url it needs to then make a new ajax request to another place. Everything is progressing thanks to all the help at SO =) .. however I am stuck again. I am struggling with getting the variables to return to the different functions as I need. The second (jsonp) request returns a json function which looks like :

jsonResponse(
{"it.exists":"1"},"");

and my code...

var img = "null";
var z = "null";

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "connect.php",
    dataType: "xml",
    success:   function  parseXml(data)
        {
          $(data).find("ITEM").each(function()
            {
            query = $("SKU", this).text();
            query = 'http://domain.com/' + query + '?req=exists,json';
            img = $("SKU", this).text();
            img = '<img src="http://domain.com/' + img + '">';  
            var date =$("LAST_SCAN" , this).text();
                $.ajax({
                    url: query,
                    dataType: 'jsonp'       
                    });
                $("table").append('<tr>'+'<td>' + (date) + '</td>' + '<td>' + (z) + '</td>');
            });
        }
    });
});

// function required to interpret jsonp

function jsonResponse(response){
  var x = response["it.exists"];
  // console.log(x); 
  if (x == 0) {
    console.log("NO"); 
    var z = "NO IMG";
    }
  if (x == 1) {
   console.log(img); 
    //this only returns the first image path from the loop of the parseXml function over and over
    var z = (img);  
  }
    return z;
}

So I guess my problem is a two parter.. one how do I get the img variable to loop into that if statement and then once that works how can I return that z variable to be used in the first xml parser?

Your code is poorly indented, is missing some closing braces (}), and has extra semi-colons (;). This makes it very difficult to make sense of your code and what you are trying to do. — gilly3
– gilly3, Commented May 27, 2011 at 22:43
Must the JSONP callback be named "jsonResponse"? Or are you able to specify the callback name in your request? Usually, you would specify the callback name in a JSONP request, but I don't see you doing that here. — gilly3
– gilly3, Commented May 27, 2011 at 23:59
yes, i have no control over the json that is returned.. it is wrapped in the function jsonResponse as I show at the top of my question.. oops it got edited out.. i will add it back in. I have the response working.. so it goes through each request using the url defined from the first parseXML and returns either a 1 or 0. I can then define the variables and see them in console.. I just dont know how to return them back out to the original function — Zac
– Zac, Commented May 28, 2011 at 0:05
I'm asking about the name of the function that wraps the json returned by the server. A typical jsonp request url looks like http://foo.org/request?sku=12345&callback=jsonResponse. Are you telling me that you don't pass the function name "jsonResponse" to the server in the url? If not, it will be much trickier for you. You will have to make your requests synchronous by implementing a queue that you process one at a time, waiting for each request to complete before moving to the next one. — gilly3
– gilly3, Commented May 28, 2011 at 0:29

gilly3 · Accepted Answer · 2011-05-28 00:55:39Z

Try this synchronous approach:

var itemQueue = [];

$(document).ready(function ()
{
    $.ajax({
        type: "GET",
        url: "connect.php",
        dataType: "xml",
        success: function parseXml(data)
        {
            itemQueue= $(data).find("ITEM").map(function ()
            {
                return {
                    sku: $("SKU", this).text(),
                    date: $("LAST_SCAN", this).text()
                };
            }).get();
            getNextItem();
        }
    });
});

function getNextItem()
{
    var item = itemQueue[0];
    var query = "http://domain.com/" + item.sku + "?req=exists,json";
    $.ajax({
        url: query,
        dataType: 'jsonp'
    });
}

function jsonResponse(response)
{
    var item = itemQueue.shift();
    if (itemQueue.length)
    {
        getNextItem();
    }
    var x = response["it.exists"];
    var z = x == "0" ? "NO IMG" : "<img src=\"http://domain.com/" + item.sku + "\">";
    $("table").append("<tr><td>" + item.date + "</td><td>" + z + "</td>");
}

Zach · Accepted Answer · 2011-05-28 00:31:42Z

0

Store 'date' in a global variable, and move the logic to append HTML elements into the jsonResponse function. You cannot return control flow from jsonResponse because it's called asynchronously, but you can continue doing anything you'd like from that function.

answered May 28, 2011 at 0:31

Zach

7,9503 gold badges23 silver badges26 bronze badges

Collectives™ on Stack Overflow

Help passing variables between functions in ajax callbacks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related