on input change triggered an ajax call and on success we modifying 80% content on the page.
2 to 3 requests responses are fine and then the browser is hanging until the success function
update the data.
var options = {
url: form.attr("action"),
data: form.serializeArray(),
type: 'POST',
beforeSend: function ()
{
$("#main_page :input").attr("disabled","disabled");
},
success: updatePage
};
form.ajaxSubmit(options);
and the success function is
updatePage: function(data)
{
if(data.isEmptyDiv)
{
$('#Messages').html(data.gMessagesHtml);
$('.options').remove();
$('table').remove();
$('.offers').remove();
$('.code').remove();
$('.totals').remove();
$('.summary').append(data.Html);
$('.summary').addClass('empty');
$('.summary').addClass('empty');
}
else
{
$('#Messages').html(data.MessagesHtml);
$('table').replaceWith(data.Items);
$('table').find('.test input[type="number"]').ESO_number_input();
bindAll();
$('.offers').html(data.offers);
$('.code').html(data.code);
$('.totals').html(data.Totals);
if( $('.offers .image').html() != ''){$('div.item_container_holder').hide();}else{$('div.item_container_holder').show();}
}
if (!data.Eligible) {
$('#ButtonTop').removeClass('major');
$('#ButtonBottom').removeClass('major');
$('#ButtonTop').addClass('minor');
$('#ButtonBottom').addClass('minor');
$('#ButtonTop').attr('disabled', 'disabled');
$('#ButtonBottom').attr('disabled', 'disabled');
} else {
$('#ButtonTop').removeClass('minor');
$('#ButtonBottom').removeClass('minor');
$('#ButtonTop').addClass('major');
$('#ButtonBottom').addClass('major');
$('#ButtonTop').removeAttr('disabled');
$('#tButtonBottom').removeAttr('disabled');
}
},
2,3 ajax requests are working fine. after that the browser hangs for sometime it's happening for all the browsers.
Here are a few ideas.
What does the function
bindAll();
do? are you binding the same event multiple times and causing some kind of loop?
maybe you need to unbind first or bind in such a way that calling it multiple times applies the binding once?
Is
data.Items
in
$('table').replaceWith(data.Items);
really a rendered html table? Do you have more than one table on the page? if so you should probably reference it by ID.