Why multiple ajax requests in each other do not execute?

Question

I have multiple ajax functions inside each other, but only the first ajax request is executed and I do not know why! I have added some alert fields to see how far it gets. I am using django environment for this. So for example when the bidnow-BTN is clicked this jquery should execute, but for some reason the after the first ajax request the page actually refreshes and adds something like /?bidPrice=100001 to the end of the url of the page. This should not happen.

$("#bidnow-BTN").click(function () {
  var varurl = document.URL
  var itemId = varurl.split(/\//)[4]

  $.ajax({
    url: "{% url 'User ID' %} ",
    method: "GET",
    success: function (data) {
      var varurl = document.URL
      var itemId = varurl.split(/\//)[4]
      var username = data.username
      alert("Got here: " + username)

      $.ajax({
        url: "{% url 'Bidding ID' %} ",
        method: "GET",
        success: function (data) {
          alert("Does NOT reach this point")
          for (var i = 0; i < data.users.length; i++) {
            if (data.users[i].username == username) {
              var id = data.users[i].id
            }
            else {

            }
          }


          $.ajax({ // kinda checked
            url: "{% url 'List Items' %} ",
            method: "GET",
            success: function (data) {
              var varurl = document.URL
              var itemId = varurl.split(/\//)[4]
              for (var i = 0; i < data.items.length; i++) {
                if (itemId == data.items[i].id) {
                  var currentPrice = data.items[i].higestBid
                }
                else {

                }
                if (parseFloat($('#bidAmount').val()) <= currentPrice) {
                  alert("Please enter a higher amount")
                  abort()
                }

                if (parseFloat($('#bidAmount').val()) > currentPrice) {

                  var post_data = {
                    'itemId': itemId,
                    'userID': id,
                    'bid': (parseFloat($('#bidAmount').val()) || 0)
                  };

                  $.ajax({ //checked
                    url: "{% url 'Modify Bid' %} ",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    method: "PUT",
                    data: JSON.stringify(post_data),
                    success: function (data) {
                      $('#ItemCurrentPrice').empty()
                      $('#ItemCurrentPrice').append("£" + data.highestBid)





                      $.ajax({ //checked
                        url: "{% url 'Bidding ID' %} ",
                        method: "GET",
                        success: function (data) {
                          for (var i = 0; i < data.users.length; i++) {
                            if (data.users[i].username == username) {
                              var id = data.users[i].id
                            }
                            else {

                            }
                          }
                          var post_data = {
                            'itemId': itemId,
                            'userID': id,
                            'bid': (parseFloat($('#bidAmount').val()) || 0)
                          };
                          $.ajax( //checked
                            {
                              url: "{% url 'List Bid' %} ",
                              contentType: 'application/json; charset=utf-8',
                              dataType: 'json',
                              method: "PUT",
                              data: JSON.stringify(post_data),
                              success: function (data) {

                              }
                            }) //Checked




                        }
                      })  //Checked

                    }
                  })  //Checked
                }
              }
            }
          })

        }
      })
    }
  })
})

Possible duplicate of [How to make code wait while calling asynchronous calls like Ajax](https://stackoverflow.com/questions/14031421/how-to-make-code-wait-while-calling-asynchronous-calls-like-ajax) — krummens, Nov 21 '19 at 21:50
code is unreadable and unmaintainalble , I would recommend you to separate things to different functions — Liad Yogev, Nov 21 '19 at 23:10
@krummens why would he need to make it synced if he calls them inside the success callback? — Liad Yogev, Nov 21 '19 at 23:12

score 0 · Answer 1 · answered Nov 22 '19 at 04:10

0

try to add async: false event in your ajax

$.ajax({ 
type: "POST",
url: "file.php",
async: false,
data: { code: code },
success: function(response){ },
error: function(xhr, ajaxOptions, thrownError){
    alert(thrownError);
}
});

answered Nov 22 '19 at 04:10

jEIZ ART

9
6

Thanks for response. This has sorted the problem with updating data to the database, however for some reason the web page still refreshes/redirects to the same url+/?bidPrice=100001. This i cannot figure why it happens. I suspect it is a django thing. – homemadesausage Nov 22 '19 at 16:08
Try to add async event to the other ajax if it will solve the issue. Youre almost there. – jEIZ ART Nov 22 '19 at 17:07
I have added async false to all of them already before, experiencing the same problem – homemadesausage Nov 22 '19 at 17:54
@homemadesausage do you have a form? – jEIZ ART Nov 22 '19 at 18:20
So I have now managed to sort the problem by preventDefault for the click method – homemadesausage Nov 22 '19 at 18:21
@homemadesausage thinking for that solution also. – jEIZ ART Nov 22 '19 at 18:21

Why multiple ajax requests in each other do not execute?

1 Answers1