Calling ajax inside ajax - php

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

Answer 3

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.