[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 21158
  • Last Modified:

using beforeSend() in jQuery .ajax with animated gif

Hi,

How do I use the beforeSend() in a jQuery .ajax call so there is like an animated gif while waiting for the success return from .ajax call?

I want to load one of these animated gifs:
http://www.ajaxload.info/

Here's my code for the .ajax():
$.ajax({
        type : 'post',
        url: './model/change_paypal_price/modChangePaypalPrice.php',
        cache: false,
        dataType: 'json',
        data: {
            final_amount : final_amount,
            monthlypayentamt : monthlypayentamt,
            sPackageName : sPackageName,
            desire_payment_month : desire_payment_month
        },
        success: function(retData, textStatus, jqXHR) {
            var sEncryptedPPBtn = retData.encrypted_pp_button;

            if ( retData.success == 1 ) {
                //display variables in fields from database
                $('p#encypted_ppbtn').html(''); //empty html first
                $('p#encypted_ppbtn').html(sEncryptedPPBtn);               

                });

                console.log(textStatus+' success');
            } else { //fail. Either the data has not yet been saved (i.e. it is an initial save) or there was some other error with the sql call.
                //if (retData.email != '') {$('#passworderror').text('password error').show(500);}
                console.log('textStatus: '+textStatus+"\n'+'\nerror message: "+retData.error);
                //return false;
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log('textStatus: '+textStatus+'\n01_first_page.js call to 01_modGetFirstPageVars.php'+'\nerror message: '+retData.str_getfirstpagevars);
        }
    });

Open in new window


Thank you<><
0
Victor Kimura
Asked:
Victor Kimura
  • 2
  • 2
3 Solutions
 
leakim971PluritechnicianCommented:
check this post :
http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_28300915.html

$.ajax({
     beforeSend:function() { 
         $("<img src='http://miniontours.yzi.me/loading.gif'  style='position:relative;top:200px;left:200px;z-index:2000' id='loading-excel' />").appendTo("body");
     },
     complete:function() {
           $("#loading-excel").remove();
     },
        type : 'post',
        url: './model/change_paypal_price/modChangePaypalPrice.php',
        cache: false,
        dataType: 'json',
        data: {
            final_amount : final_amount,
            monthlypayentamt : monthlypayentamt,
            sPackageName : sPackageName,
            desire_payment_month : desire_payment_month
        },
        success: function(retData, textStatus, jqXHR) {
            var sEncryptedPPBtn = retData.encrypted_pp_button;

            if ( retData.success == 1 ) {
                //display variables in fields from database
                $('p#encypted_ppbtn').html(''); //empty html first
                $('p#encypted_ppbtn').html(sEncryptedPPBtn);               

                });

                console.log(textStatus+' success');
            } else { //fail. Either the data has not yet been saved (i.e. it is an initial save) or there was some other error with the sql call.
                //if (retData.email != '') {$('#passworderror').text('password error').show(500);}
                console.log('textStatus: '+textStatus+"\n'+'\nerror message: "+retData.error);
                //return false;
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log('textStatus: '+textStatus+'\n01_first_page.js call to 01_modGetFirstPageVars.php'+'\nerror message: '+retData.str_getfirstpagevars);
        }
    });

Open in new window

0
 
SriVaddadiCommented:
It is same as you are passing success and error callbacks.

Success:  function(){}'
beforeSend: function(){}
0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
@SriVaddadi,

I added this:

beforeSend: function() {
            $("#encypted_ppbtn").html("<img alt='Please wait...generating payment' src='https://secure.myultratrust.com/images/animated/ajax-loader.gif' />");
        },

Open in new window


I see the alt text display in FF. It doesn't work in chrome nor IE.

The image is uploaded to the server.

What's wrong?
0
 
SriVaddadiCommented:
Try this

beforeSend: function() {
            $("#encypted_ppbtn").append("<img alt='Please wait...generating payment' src='https://secure.myultratrust.com/images/animated/ajax-loader.gif' />");
        },
0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
I found that the problem was my htaccess which prevent hotlinking! =)

thanks for the information!
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now