2
\$\begingroup\$

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?

\$\endgroup\$
1
  • \$\begingroup\$ What you did here, is not placing an Ajax request on the completion of the first one. Inside the "complete" function, you've bound the 'click' event for the .icon element. Only after that binding, once a user clicks the .icon element, your second Ajax call will be triggered \$\endgroup\$ – Ronen Cypis Mar 30 '16 at 7:41
2
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ I have updated question, please check again :D \$\endgroup\$ – user35 Mar 30 '16 at 8:21
  • \$\begingroup\$ i have updated my answer please chek \$\endgroup\$ – Vishal Patel Mar 30 '16 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.