jQuery - Save Function Result Into a Variable

Question

I have this function, which loads a select from a database.

function Competition() {
    $(document).ready(function() {
        $.ajax({
         url: "load-comp.php",
         cache: false,
         success : function(html) {
             // something here
         }
     });
        EditRow();
    });
}

I need to put that select inside confirmEdit (in the second td).

EditRow() {
    var confirmEdit = '<tr class="editable" id=" '+ id +' ">
                         <td><input type="text" value="' + name + '" /></td>
                         <td> ' + /* function result goes here */ + ' </td>
                         <td><input type="text" value="' + data + '" /></td>
                         <td>' + saveCancel + '</td>
                       </tr>';
}

So how do I save the result produced by the Competition() function inside a variable so I can use it in the EditRow() function?

Answer 1

Your data comes back from load-comp.php in the variable name of "html". So you could modify the EditRow function and pass it that "html" variable (you might need those other variables too)

function EditRow(html, id, name, data, saveCancel) {
var confirmEdit = '<tr class="editable" id=" '+ id +' ">
                         <td><input type="text" value="' + name + '" /></td>
                         <td> ' + html + ' </td>
                         <td><input type="text" value="' + data + '" /></td>
                         <td>' + saveCancel + '</td>
                       </tr>';

}

Answer 2

function Competition() {
    $(document).ready(function() {
        $.ajax({
                url: "load-comp.php",
                cache: false,
                success : function(html) {
                    EditRow(html);
                }
            });
    });
}

Ryan's comment is correct. In your original EditRow may be called before the load-comp.php is retrieved.

Answer 3

Ajax is, by definition, asynchronous. EditRow might be called before your Ajax call completes. Why not put the call to EditRow in the success function of the Ajax call? That's the only way you can guarantee the function only gets called after completion of your Ajax. Once you do that, then you can just pass the result in as a parameter to the EditRow function.

Change EditRow to:

function EditRow(html) {
  var confirmEdit = '<tr class="editable" id=" '+ id +' ">'+
    '<td><input type="text" value="' + name + '" /></td>'+
    '<td> ' + html + ' </td>'+
    '<td><input type="text" value="' + data + '" /></td>'+
    '<td>' + saveCancel + '</td>'+
    '</tr>';
}

and then change your ready function to:

function Competition() {
  $(document).ready(function() {
    $.ajax({
      url: "load-comp.php",
      cache: false,
      success : function(html) {
        EditRow(html);
      }
    });
  });
}