JQuery: passing data returned from ajax function to a variable

Question

I'm not sure if I worded the question correctly. I am dynamically building a display of database records in a grid (row, cols). Some of the cells use form objects and I am using AJAX to help build them (the options in the select are stored in a db table). So my code looks like this (the return from the AJAX call is the complete ...set up:

...

//write cell html if (d == 1) { userdata += "" + thisitemarray[1] + "

"; } else if (d==2) {

                    //make ajax call to get departments
                    $.ajax({
                       type: "POST",
                       url: "lib/getDropDowns.php",
                       data: "thistable=departments&selecteditem=" + thisitemarray[1] + "&classnames=userdept userdatainput",
                       success: function(data){
                         userdata += "<p class=\"datacell department\">" + data + "</p>";
                       }
                  });

                 } else if (d == 3) {
                    userdata += "<p class=\"datacell bucket\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userbucket userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 4) {
                    userdata += "<p class=\"datacell pubcode\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userpubcode userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 5) {
                    userdata += "<p class=\"datacell area\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userarea userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 6) {
                    userdata += "<p class=\"datacell hours\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userhours userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 7) {
                    userdata += "<p class=\"datacell description\"><textarea class=\"userdesc\" dbid=\"" + dbid + "\">" + thisitemarray[1] + "</textarea></p>";
                 }//end d check 2

The problem is that this line of code:

success: function(data){
                         userdata += "<p class=\"datacell department\">" + data + "</p>";
                       }

does not show up on my page. I am assuming because userdata is being seen as a local variable within the function. How can I pull the data being passed from AJAX out into my script so I can use it?

create a function and pass your data to that function in the success handler. — kobe
– kobe, Commented Dec 3, 2010 at 18:11
data is fine in alert. I just can't get it out of the jq ajax function and into my var. See my more detailed explanation to mpapis below. — PruitIgoe
– PruitIgoe, Commented Dec 3, 2010 at 18:25

mpapis · Accepted Answer · 2010-12-03 18:55:18Z

1

before the loop add an counter:

var counter = 0;

Later use it as ID generator:

if (d === 1) { 
  userdata += "" + thisitemarray[1];
} else if (d === 2) { 
  var id = 'datacell_department_' + counter;
  counter++;
  userdata += "<p class=\"datacell department\" id=\""+id+"\"></p>";
  //make ajax call to get departments
  $.ajax({
    type: "POST",
    url: "lib/getDropDowns.php",
    data: "thistable=departments&selecteditem=" + thisitemarray[1] + "&classnames=userdept userdatainput",
    success: function(data){
      $('#'+id).html(data);
    }
  });
} else if (d === 3) {
  userdata += "...";
}

edited Dec 3, 2010 at 18:55

answered Dec 3, 2010 at 18:01

mpapis

53.2k15 gold badges124 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PruitIgoe Over a year ago

for d=3, 4 and 5 I have to do a similar task. And userdata has code added above and below this section. This is for users to edit existing data - process is user makes edit, clicks edit button, jq pulls the edits from form objects, ajax for db update (with jq) then reload db data. Part of the reload is building <selects> using a PHP function - jq passes data via ajax to this function (which select, selected option, class names) and then PHP returns a completed <select>, which I then need to dump into the middle of userdata var.

PruitIgoe Over a year ago

So if I put that process into another js function aren't I looking at the same problem - getting the returned data out of the jq ajax function and into userdata?

PruitIgoe Over a year ago

This is my fault, I haven't explained it clearly, sorry - the if(d=#) conditional is wrapped within a loop (d=0; d<var.length; d++) { if (d==1) do this, if (d==2) do this and so on...userdata grows with each iteration, so it is if d==1 userdata is userdata + this, if (d==2) userdata adds more code, think of the d==1, etc as columns in my grid. At some point d will equal all #'s and userdata will include everything in the conditional. I hope that made sense.

PruitIgoe Over a year ago

The examples you provided (thanks btw) seem to overwrite userdata, but I want to continuously add to it.

mpapis Over a year ago

wouldnt it be easier to write: l=var.length; if(1<l)...; if(2<l) ...; and so on ? then no loop would be needed

|

Sergey Gerasimov · Accepted Answer · 2010-12-03 17:58:42Z

0

Use async: false parameter in query settings

answered Dec 3, 2010 at 17:58

Sergey Gerasimov

2,0852 gold badges14 silver badges12 bronze badges

3 Comments

mpapis Over a year ago

this way you may block you sites on connection problems

Sergey Gerasimov Over a year ago

jQuery documentation told us: "By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false." In synchronous mode we can access variables, initialized in success block.

Sergey Gerasimov Over a year ago

ok, but this is only way to access this variable. If you know another solution, please write it here.

PruitIgoe · Accepted Answer · 2010-12-03 18:06:11Z

0

@Sergey G - -thanks, that took care of it. Here's an example for others to snippet:

function getWhatever()

{ var strUrl = ""; //whatever URL you need to call var strReturn = "";

jQuery.ajax({ url:strUrl, success:function(html){strReturn = html;}, async:false });

return strReturn; }

answered Dec 3, 2010 at 18:06

PruitIgoe

6,39617 gold badges80 silver badges146 bronze badges

Collectives™ on Stack Overflow

JQuery: passing data returned from ajax function to a variable

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related