Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    South Africa
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax preloader image

    Hi guys,

    I am still new at Javascript, and have some difficulty getting a preloader image to display in my existing code.

    Basically the user submits an identity number which is sent to another php file for verification, and the result is displayed without refreshing the page.

    For this I came accross this Ajax code:

    function submitForm() {
    $.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
    $('#ValidationForm').find('.form_result').html(response);
    }});

    return false;
    }


    Here is the form code:
    <form id="ValidationForm" onsubmit="return submitForm();">
    <input type="text" name="number">
    <input type="Submit" value="Verify">
    </form>

    How can I amend the above code to have a preloader image (or text) shown while the user waits for the result?

    I have read about the readystate event, but my attempts to use it in the JavaScript above failed.

    Help will be greatly appreciated.

    Thanks

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    this assumes your loading image or container element has a class of loaderimg
    - also this only happens upon a successful ajax request, you should also consider using the error: setting as well - if you havent already ofc ourse

    Code:
    function submitForm() {
    $('.loaderimg').fadeIn();
    $.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
    $('#ValidationForm').find('.form_result').html(response);
    $('.loaderimg').fadeOut();
    }});
    
    return false;
    }
    Last edited by DanInMa; 09-07-2012 at 04:27 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Location
    South Africa
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks DanInMa,

    Solution was relative simple, but since I didn't know better, you directed me in the right direction.

    I added a div with the loader image in the container element, and made it not visible:

    <div id='loading' style='display: none;'><img src='loader.gif'></div>
    Then I did the following in the javascript (make the loading div visible once the form is submitted):

    function submitForm() {
    var loadingdiv = document.getElementById('loading');
    loadingdiv.style.display = "block";
    $.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
    $('#ValidationForm').find('.form_result').html(response);
    }});

    return false;
    }
    Now since the container element gets replaced with all new info, it's not necessary for me to make the loading div invisible again.

    And it works perfect!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •