Calling Function inside of AJAX success

[programmer12]

Hi,

I am confused on why my function is not being executed. I have setup the AJAX to insert data into the database and on success to grab information from the database and print it out on the site, but I also added a function to be called or executed on ajax Success.

Function update_div():

function update_div()
{
    $.ajax({
        type: "GET",
        url: "new_info.php",
        success: function (html) {
            if(html)
            {
               var newDiv = $('<div>').html(html);   
               $('#new-news').after(newDiv).fadeIn('slow');             
            }
        }  
    });
}

Please take a look at the snippet below:

function status_post() {
    var element = $('#my-div');
    var id = element.attr("title");
    var status = $('textarea#status').val();
    var dataString = 'user_id='+ id + '&status=' + status;
    //alert (dataString);return false;
    $.ajax({
        type: "POST",
        url: "post_comment.php",
        data: dataString,
        //On Success: clear textarea and send another AJAX to update Div with new comment
        success: function() {
           //Clears textarea
            $('textarea#status').val('');
            ///On Success: update a div
              $.ajax({  
                type: "GET",                               
                url: "update.php",                 
                success: function(status_upd) {        
                    var newStatus = $('<div>').html(status_upd);   
                     $('.new-status').after(newStatus).fadeIn('slow');  
                    return false;  
                    }
                }); 
                return false; 
                }
            });

     //Function will not execute, "What am I doing wrong?"
    update_div(); 
}

Thanks for any advise.
-Programmer12

[nauticalmac]

I suggest doing some investigation as to where your code is failing. Put an alert(x) in each of your success functions where x is the ajax returned data and see whether the functions are running and receiving the correct data from your php files.
It looks like update_div() is being called before your ajax return from post_comment.php. Remember ajax calls are asynchronous.

[programmer12]

Ah okay, I will do another test to see.

All the codes work, I think the only thing not being executed is probably the update_div(). As you mentioned, I believe it is being executed before the data is being processed, which means that the data needed, is not there yet.

Question: Can a function be called inside an AJAX success? If so, how to code that part? May I have an example; using my codes above?

Thanks a million.

[diafol]

just tag on the update_div(); before the return false in the success section.

[nauticalmac]

Hi,
1. I think you didn't have the right bracket balance at the end of status_post(), missing a close curly.
2. calling a function inside the ajax return success function, no problem. I moved your update_div inside the success function.

function update_div()   {
    $.ajax({
        type: "GET",
        url: "new_info.php",
    success: function (html) {
        if(html)    {
        var newDiv = $('<div>').html(html);   
        $('#new-news').after(newDiv).fadeIn('slow');             
      }
    }  
  });
}



function status_post() {
    var element = $('#my-div');
  var id = element.attr("title");
  var status = $('textarea#status').val();
  var dataString = 'user_id='+ id + '&status=' + status;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "post_comment.php",
    data: dataString,
    //On Success: clear textarea and send another AJAX to update Div with new comment
    success: function() {
        //Clears textarea
      $('textarea#status').val('');
      ///On Success: update a div
      $.ajax({  
        type: "GET",                               
        url: "update.php",                 
        success: function(status_upd) {        
            var newStatus = $('<div>').html(status_upd);   
          $('.new-status').after(newStatus).fadeIn('slow'); 
          update_div(); 
          return false;  
        }
      }); 
      return false;
    }             }
    });
}

1. It seems you are making three ajax calls when one should do.
   post_comment.php doesn't return anything
   then you call update.php then new_info.php
   Why not combine all three php files into one and simplify it. Then return the data necessary for the update to your page using a JSON datatype. You have a three-level nested ajax situation which is hard to figure out.

[programmer12]

Ah, cool. That would be a good way to do it!

I will lookup more on JSON. Thanks so much on the assistants!