Call same function between function with ajax calls

Question

I'm kind of lost here! The following piece of code shows what I'm intending to do, basically I have this function insertChilds() that inserts child elements in the DOM in cascade look like (or that's supposed to do...).

The thing here is that I call $.ajax to get the first element childs and in between the function I have to make other ajax call to get the childs of the childs, these could be "n"-childs.

I having trouble because when I make the second ajax call (calling again the same function inside itself) the ajax calls get left behind and the items are shown disordered.

I thank you for some guidance, I dont quite good on programming yk

Code:

function insertChilds(id, after){
     var subtar="";
     var level = "";

  $.ajax({
     url: "get_tasktypes.php",
     type: "POST",
     data: {
           id: id
           },
     dataType: "json",
     success: function(json){

      // console.log(json);

       if(json.length>0){

         if(after!= 0){
          var levelParts = after.split("-");
          level = levelParts.length;
          if(level!=0){
            var marginLeft = (level*50)+'px;';
          }else{
            var marginLeft = '50px';
          }
         }else{
          level = 0;
          var marginLeft = '50px';
         }
         subTar = subTar+'<ul class="t-tar-cont" style="margin-left:'+marginLeft+';" >';
         for(var i=0; i<json.length; i++){
           var tipoTar = "";
           var position = after+"-"+i;

           for(var h=0; h<json.length; h++){
             if(h == i){
               var childs = json[h][4];
               tipoTar = tipoTar+'<option selected value="'+json[h][0]+'">'+json[h][1]+'</option>';
               if(childs == '1'){
                  //HERE I CALL THE FUNCTION AGAIN, TELL IF THIS IS WRONG...
                   insertChilds(json[i][0], position);
               }
             }else{
               tipoTar = tipoTar+'<option value="'+json[h][0]+'">'+json[h][1]+'</option>';
             }
           }

         subTar = subTar+'<li class="gdw-tarea-sub-line-cont" id="gdw-tarea-sub-id'+position+'" style="display:none;">';
         subTar = subTar+'<div class="gdw-tarea-sub-line" style="width:100%;"><select style="width:90%;" id="gdw-selected-sub'+i+'" name="act'+i+'">'+tipoTar+'</select></div>';
         subTar = subTar+'</li>';

        }
        subTar = subTar+'</ul>';

        var afterDivID = '#gdw-tarea-sub-id'+(after);
        $(afterDivID).after(subTar);

        $('#gdw-tarea-sub-cont').css("height","auto");
         var subs = $('li[class="gdw-tarea-sub-line-cont"]');
         subs.first().show("fast", "linear", function showNext() {
             $(this).next(subs).show("fast", "linear" , showNext);
         });
       }
     }
  });
 }

Thanks in advance, any correction will be of value to me.

score 0 · Answer 1 · answered Feb 19 '15 at 13:14

0

Why are you using this approach, ajax call within an already running call. Instead, collect your all child first by sending a single ajax call and place it then. Still you wanna go with this approach send a synchronous ajax calls in loop rather than nesting of call. To make an ajax call synchronous set

async : false

answered Feb 19 '15 at 13:14

CY_Techie

86
7

Do you mean getting them all on the server side? – Migerusantte Feb 19 '15 at 13:16
No, in your ajax response i.e. success. – CY_Techie Feb 19 '15 at 13:18
If you look at the code, I'm making the next ajax call on the sucess, but there could be several sucessive calls, "n" ones. – Migerusantte Feb 19 '15 at 13:30
Oh, Seems your next call is dependent on the response of previous call. Well - this approach is still not recommended. Because, as per your code your call is asynchronous, and you are using it within a loop. Means it doesn't wait the response of previous call and send a next call that's why your childs are lacking sequence while placing. The solution is - save your input of your next call in a variable and use that variable once your previous call complete then, send next call, update your html and update variable and send next call and so on. Make sure all the call are sync – CY_Techie Feb 19 '15 at 13:51
Well - i am not happy to give you previous solution. try update your logic and get all child by sending single call. Instead of single parameter you can send a list too. So get your all parameters first and send them once in a single call. that would be in sync and will work fast. All the best – CY_Techie Feb 19 '15 at 13:54

score 0 · Answer 2 · edited May 23 '17 at 12:20

If your AJAX call is asynchronous, which I am assuming it is, then you will face two problems with your code.

The first is that the HTTP 1.1 RFC says that clients (in your case this is the web browser running your script) should limit the number of persistent connections to 2. More reading here. This means that only two of your ajax calls will run concurrently and the rest will be queued. Many browsers these days do not conform to that number but there is still always a limit Take a look at the answers to this question.

The second problem is that there isn't necessarily any guarantee on the order in which the responses from the ajax calls will return to your program and this is probably what is responsible for your responses returning in the wrong order.

What I would recommend is to use only one ajax call whereby you compile the tree into a single data structure on the server side and transmit the entire thing all at once using ajax and json. That way you can recurse through the structure on the client side instead of making a call to the server for every level of recursion.

Thanks, I was thinking about ending up doing that, I'm trying at this moment to make that server return me all the stuff and then only show it with jquery at client side. — Migerusantte, Feb 19 '15 at 13:35

Call same function between function with ajax calls

2 Answers2