Calling ajax inside ajax

Question

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)); 
               } 
            }
       });   

Answer 1

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.

Answer 2

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)); 
           } 
        }
   });