Hi,
I have solve this issue by replacing ajaxStart by onclick event and ajaxStart by complete: ajax request but can not solve using ajaxStart and ajaxStop On Dec 22, 8:03 pm, bookme <rarockthewo...@gmail.com> wrote: > Hi, > > I am trying to solve ajaxStart and ajaxStop issue from last 3 days but > can not solve...can somebody tellmewhat'smymistake here. > > I want to show a loader image for different DOM element ids on > different ajax request. Problem is that when I am calling an ajax > request on one form submission then not only it's corresponding but > also other loader image is showing, while only one loader image must > be show. > > Here ismycode: > > First Blockcode > ----------------------------------------------------------------------------------------------------------------- > <script> > $(document).ready(function(){ > $("form#submit").submit(function() { > $.ajax({ > type: "POST", > url: "test1.php", > success: function(del){ > $('div.success').fadeIn(); > } > }); > jQuery('#id_fav_loading').ajaxStart(function() { > jQuery('#id_fav_loading').show(); > }).ajaxStop (function() { > jQuery('#id_fav_loading').hide();; > }); > return false; > });}); > > </script> > > <div class="container"> > <form id="submit" method="post"> > <label for="lname">Client Last Name:</label> > <input id="lname" class="text" name="lname" size="20" > type="text" / > > <button class="button positive"> <img > src="../images/icons/ > tick.png" alt="" /> Add Client </button> > </form> > <div style="display:none;" id="id_fav_loading"> > <img src="loader.gif" /> > </div> > <div class="success" style="display:none;"> > Client has been added successfully. > </div> > </div> > ----------------------------------------------------------------------------------------------------------------------------------------------------- > > Second blockcode > ------------------------------------------------------------------------------------------------------------------------------------------- > <script> > $(document).ready(function(){ > $("form#submit1").submit(function() { > $.ajax({ > type: "POST", > url: "test1.php", > success: function(del){ > $('div.success1').fadeIn(); > } > }); > jQuery('#id_fav_loading1').ajaxStart(function() { > jQuery('#id_fav_loading1').show(); > }).ajaxStop (function() { > jQuery('#id_fav_loading1').hide();; > }); > return false; > });}); > > </script> > > <div class="container"> > <form id="submit1" method="post"> > <label for="lname">Client Last Name:</label> > <input id="lname" class="text" name="lname" size="20" > type="text" / > > <button class="button positive"> <img > src="../images/icons/ > tick.png" alt="" /> Add Server </button> > </form> > <div style="display:none;" id="id_fav_loading1"> > <img src="loader.gif" /> > </div> > <div class="success1" style="display:none;"> > Server has been added successfully. > </div> > </div> > > If I clicks on Add Client then image for add client and add server is > displaying while only add client block loader image must be display. > > Pleasehelpmeto come out this problem. > > Thanks