I have encountered an issue with my nested AJAX functions - only the first request seems to be executed and I am unsure of the reason behind this behavior. To troubleshoot, I have included some alert messages to track progress. I am working within a Django environment for this project. For instance, when the bidnow-BTN is clicked, the following jQuery function should run. However, after the initial AJAX request, the page unexpectedly refreshes and appends something like "/?bidPrice=100001" to the URL. This is not the intended behavior.
$("#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("Reached this point: " + username);
$.ajax({
url: "{% url 'Bidding ID' %} ",
method: "GET",
success: function (data) {
alert("This point is not reached");
for (var i = 0; i < data.users.length; i++) {
if (data.users[i].username == username) {
var id = data.users[i].id;
}
else {
}
}
$.ajax({ // partially validated
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].highestBid;
}
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({ //validated
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({ //validated
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( //validated
{
url: "{% url 'List Bid' %} ",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
method: "PUT",
data: JSON.stringify(post_data),
success: function (data) {
}
}) //Validated
}
}) //Validated
}
}) //Validated
}
}
}
})
}
})
}
})
})