CODEWITHSUNDEEP
phpajaxjquerysymfony
Wearybands
Wearybands

Reputation: 2455

Calling ajax inside ajax

This is my first day and first question here, hope you will forgive me if my question is very trivial for this platform.

I am trying to call ajax inside ajax, One ajax call is going to call one cotroller action in which it will insert a record in the database, The action for the 1st ajax call is 

public function createAction(Request $request){
    if ($request->isXmlHttpRequest()) {
        $name = $request->get("gname");
        $description = $request->get("desc");
                    $portfolio_id = $request->get("PID");
                    $portfolio = $this->getDoctrine()
                        ->getRepository('MunichInnovationGroupPatentBundle:PmPortfolios')
                        ->find($portfolio_id);
        $portfolio_group = new PmPatentgroups();
        $portfolio_group->setName($name);
        $portfolio_group->setDescription($description);
        $portfolio_group->setPortfolio($portfolio);
        $portfolio_group->setOrder(1000000);
        $portfolio_group->setIs_deleted(0);
        $em = $this->getDoctrine()->getEntityManager();
        $em->persist($portfolio_group);
        $em->flush();
        $msg = 'true';
    }
    echo $msg;
    return new Response();
}

The 2nd ajax call is going to get the updated data that is inserted by the first ajax call, The action for this call is

public function getgroupsAction(Request $request){
    if ($request->isXmlHttpRequest()) {

        $id = $request->get("PID");
        $em = $this->getDoctrine()->getEntityManager();
        $portfolio_groups = $em->getRepository('MunichInnovationGroupPatentBundle:PmPatentgroups')
        ->getpatentgroups($id);
        echo json_encode($portfolio_groups);
        return new Response();
    }
}

My JQuery is as follows

 $.ajax({
         type: 'POST',
         url: url,
         data: data,
         success: function(data) {
         if(data == "true") {
                 $("#new-group").fadeOut("fast", function(){
                 $(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
                 setTimeout("$.fancybox.close()", 3000);
                 });
                  $.ajax({
                          type: 'POST',
                          url: getgroups,
                          data: data,
                          success: function(data) 
                          { 
                            var myArray = JSON.parse(data); 
                            var options = $("#portfolio-groups"); 
                            for(var i = 0; i < myArray.length; i++)
                            { 
                              options.append($("<option />").val(myArray[i].id).text(myArray[i].name)); 
                             } 
                       } 
                });
            }
         }
     });

I am calling the 2nd ajax inside the success of the 1st one to ensure that the first ajax is successfully completed, but the 2nd ajax call is not getting the updated data.

How can I ensure that the 2nd ajax will be called after the completion of the first one and I get the recently inserted data as well

Thanks

MY SOLUTION Just using one ajax call

in the create action where an insertion is made , just after the insertion take all the groups for the portfolio, and return json_encode($portfolio_groups);

Inside the JQuery

 $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function(data) {
              $("#new-group").fadeOut("fast", function(){
              $(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
              setTimeout("$.fancybox.close()", 3000);
              });
              var myArray = JSON.parse(data); 
              var options = $("#portfolio-groups"); 
              for(var i = 0; i < myArray.length; i++)
              { 
                 options.append($("<option />").val(myArray[i].id).text(myArray[i].name)); 
               } 
            }
       });

Upvotes: 3

Views: 4618

Answers (3)

Wearybands
Wearybands

Reputation: 2455

Just using one ajax call

in the create action where an insertion is made , just after the insertion take all the groups for the portfolio, and return json_encode($portfolio_groups);

Inside the JQuery

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: function(data) {
          $("#new-group").fadeOut("fast", function(){
          $(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
          setTimeout("$.fancybox.close()", 3000);
          });
          var myArray = JSON.parse(data); 
          var options = $("#portfolio-groups"); 
          for(var i = 0; i < myArray.length; i++)
          { 
             options.append($("<option />").val(myArray[i].id).text(myArray[i].name)); 
           } 
        }
   });

Upvotes: 1

user1134422
user1134422

Reputation: 1251

Ajax in side the success method of the first Ajax, as you did, should ensure you the second Ajax is called after the first one. The success method is triggered ONLY after results have returned.
For a test add console.log() inside the first Ajax req just before you call the second one. and another console.log() inside the second Ajax success method.

try to put a console.log on the first success->data variable and see what you get. If you have an error I will cause the second request to fail.

Upvotes: 0

Tetaxa
Tetaxa

Reputation: 4403

I think the problem may be that you've got lots of variables names ´data´. In the second ajax call, the data sent will always be "true", but I suspect you would like to send something else. I would give them unique names to make things clearer and see what happens.

Upvotes: 4

Related Questions