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
