php - Multiple jQuery AJAX calls conflicts? -
i trying create simple shopping cart using ajax , php.
everything works should 1 thing doesn't work time , seems fails execute. (it works 3 times out of 5).
to explain issue please take @ code bellow:
jquery(document).ready(function() { //////////////////////lets run our add cart feature using ajax ////////////// $(function(){ $('.form1').on('submit', function(e){ $( "#preloader" ).fadein( 850 ); // prevent native form submission here e.preventdefault(); // whatever want here $.ajax({ type: $(this).attr('method'),// <-- method of form url: $(this).attr('action'), //url: "cart.php", data: $(this).serialize(), // <-- serialize fields string ready posted php file beforesend: function(){ }, success: function(data){ $( "#preloader" ).fadeout( 850 ); } }); }); }); //////////////////////lets run load cart-header.php on page load using ajax ////////////// $(document).ready(function () { function load1() { $.ajax({ //create ajax request load_page.php type: "get", url: "cart-header.php", datatype: "html", //expect html returned success: function (data2) { $('#headercart').html($(data2)); //settimeout(load2, 500); } }); } load1(); }); //////////////////////lets load cart-header.php on form1 submit using ajax ////////////// <!----- part fails work ---> $(function(){ $('.form1').on('submit', function(load2){ // prevent native form submission here load2.preventdefault(); // whatever want here $.ajax({ type: "get",// <-- method of form url: "cart-header.php", //url: "cart.php", datatype: "html", // <-- serialize fields string ready posted php file beforesend: function(){ }, success: function(data){ //$('#test').load('cart.php #total').html(); $('#headercart').html($(data)); } }); }); }); //////////////////////lets run our delete cart feature using ajax ////////////// $(document).on('submit', '.delform', function(dleitem){ // prevent native form submission here dleitem.preventdefault(); // whatever want here $.ajax({ type: $(this).attr('method'),// <-- method of form url: "cart-header.php", //url: "cart.php", data: $(this).serialize(), // <-- serialize fields string ready posted php file beforesend: function(){ }, success: function(data){ $('#headercart').html($(data)); } }); }); }); //////////////////////lets quantity of current items added in cart using ajax///////////// $(document).ready(function () { function load() { $.ajax({ //create ajax request load_page.php type: "get", url: "cart.php", //url: "cart-header.php", datatype: "html", //expect html returned success: function (data) { $('.item_count').html($(data).find('#total').text()); //$('#headercart').html($(data)); settimeout(load, 1000); } }); } load(); }); i have commented code can see parts of code , do.
the issue part:
//////////////////////lets load cart-header.php on form1 submit using ajax ////////////// <!----- part fails work ---> $(function(){ $('.form1').on('submit', function(load2){ // prevent native form submission here load2.preventdefault(); // whatever want here $.ajax({ type: "get",// <-- method of form url: "cart-header.php", //url: "cart.php", datatype: "html", // <-- serialize fields string ready posted php file beforesend: function(){ }, success: function(data){ //$('#test').load('cart.php #total').html(); $('#headercart').html($(data)); } }); }); }); as mentioned above, code works fine works when wants if has mind of own!
could please advise on issue?
thanks in advance.
Comments
Post a Comment