Place Ajax request on completion of Ajax Request

Question

I have an Ajax request which in turn on completion make another Ajax request:

$.ajax({
          url: '<?php echo BASE_URL.'Dashboard/GetMyTrackList' ?>',
          type: 'GET',
          success: function (response) {

              var list = JSON.parse(response);
              $.each(list, function (k, v) {
                  MarkLocation(parseFloat(v["Longitude"]),parseFloat(v["Latitude"]), v["UserId"]);
              });
          },
          complete: function(){
              $(".icon").click(function(evt){
                  debugger;
                  $(container).css("display","block");
                  var value = $(this).attr("alt");
                  $.ajax({
                      url:'<?php echo BASE_URL.'Dashboard/GetProfile' ?>',
                      data:'id='+value,
                      type:'GET',
                      success:function(response){
                          var user = JSON.parse(response);
                          $(container).find("#content").find("#username").text(user["Username"]);
                          $(container).find("#content").find("#email").text(user["Email"]);

                          map.addOverlay(new ol.Overlay({
                              position: ol.proj.transform(
                                  [parseFloat(user["Longitude"]),parseFloat(user["Latitude"])],
                                  'EPSG:4326',
                                  'EPSG:3857'
                              ),
                              element: container
                          }));

                      }
                  });

              });
          }
      });

Element with an icon class is created in the MarkLocation function:

 function MarkLocation(lon, lat, alt) {
          $userid = '<?php echo $_SESSION["UserID"];?>';
          if(alt==$userid)
              var marker = $('<img class="icon" src="<?php echo BASE_URL.'includes/images/location/mylocation.png'  ?>">');
          else
              var marker = $('<img class="icon" src="<?php echo BASE_URL.'includes/images/location/marker.png'  ?>">');
          map.addOverlay(new ol.Overlay({
              position: ol.proj.transform(
                  [lon, lat],
                  'EPSG:4326',
                  'EPSG:3857'
              ),
              element: marker
          }));
          $(marker).attr("alt", alt);
      }

Previously, I had an icon click event placed outside (i.e. not in the complete function of ajax). In that case, an element with an icon class was not clickable, maybe because of a binding issue. Then I placed the click event in the complete function and it works. Is this a good way? Or what approach would you suggest?

Answer 1

From your code it seems like that you are binding a click event on $(".icon") when the ajax completes.

However, you are not making another call after completion of first, but instead making a call on $(".icon").

if you dont want to put ajax call here then you can bind icon with on function with parent selector like below:

$( "#parentDiv " ).on( "click", ".icon", function() { //make ajax call });

more info on this here

you can get help for this from You should improve your code's clarity to reflect its purpose.