Jump to content

Showing a loading image


downah
 Share

Recommended Posts

Hi guys,

 

Small (or big) problem once again

 

I am using a simple html form, on submit action calls a php (mail) script.. now this script takes a little while to finish as there are some time limits in there before sending another mail.. I expected it to load a blank page, or at least display everything before loop.. but it didn't, instead it sort of "hangs" at the form stuck (although you can see the url of the script is loading in the browser bar) and once the script is finished it loads all the output on the page.. so I started looking at some ways of how to make this loading image.. or atleast let the user know something is happening, and that the script is working.

 

I saw some stuff on stackover flow and included this, which was supposed to show a loading image where the submit button is, but I don't think it works because it isn't loading the page with the form anymore.. but the running the php loop, although I am going to let you see it anyway in the hope of.. something:

        $('#loading_image').show(); // show loading image, as request is about to start
$.ajax({
    url: '..',
    type: '..',
    complete: function() {
        // request is complete, regardless of error or success, so hide image
        $('#loading_image').hide();
    }
});
$('#myform').submit(function() {
    $('#loading_image').show(); // show animation
    return true; // allow regular form submission
});

 

and my form

 

                           						<form method="post" action="sendeveryone.php" id="myform" onReset="return confirm('Do you really want to reset the form?')">
                		<fieldset>
                		Please note:  All e-mails start with "Dear {MEMBER_NAME}, " If you would like to mention their username in the body of your email, all you have to do is type '{MEMBER_NAME}' and it will replace it to their username.<br><br>
                        <br>
                            <label class="control-label" for="subject">Subject</label>

                                <input id="subject" name="subject" class="span5" type="text">
                  
                     <label class="control-label" for="body">Body</label>
                  
<div class="row-fluid">
        <div class="utopia-widget-content-nopadding">
            <div class="span12 text-editor">
                <textarea id="input" name="input"></textarea>
            </div>
        </div>
    </div>

<br><img src="myloadingimage.gif" style="display: none;" id="loading_image">

                        <button class="btn btn-large btn-primary span5" type="submit">Send</button>
                        <button class="btn btn-large span5" type="reset">Cancel</button>
                
                  		</fieldset>
                        </form>

 

This didn't work.. anyone has any hints or tips for me or other ways of going around this?

Link to comment
Share on other sites

jQuery's $.ajax() has e beforeSend method that is triggered just before the AJAX call is made and is a good way to show a preloader image. It would look like this in your code:

 

$.ajax({
    url: '..',
    type: '..',
    beforeSend: function() {
        $('#loading_image').show();
    }
    complete: function() {
        $('#loading_image').hide();
    }
});

 

Hope it helps.

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.