CODEWITHSUNDEEP
jquery
B. A. Johnsen
B. A. Johnsen

Reputation: 33

Using jQuery to display animated loading message while processing script

What I'm trying to do: Submit a form to a script that will run in the background, provide a loading text with animated dots in the input field, and return a message once done in that very same field.

The problem: I manage to catch the input variable and display the animated loading message. I'm somewhat new to this so the nested code is probably a mess and the loading display should probably be a function that can be nested (if I'm understanding this correctly). It stops at displaying the loading message so I assume the form never actually gets submitted and the whole script just comes to a hault somewhere.

What I have:

<script>
  jQuery(document).ready(function($)
  {
    $("#subsenid").submit(function(e)
    {
      e.preventDefault();
      var senid = $("input:text[name=submit_sen]").val();
      i = 0;
      setInterval(function() 
      {
        i = ++i % 4;
        $("#submit_senid").val("Importing"+Array(i+1).join("."));
      }, 500, function()
        {
          $.get("/inc/receiving_script.php", {psnid: senid}, function(data)
          {
            $("#submit_senid").val("All done");
          });
        }
      });
    });
  </script>

Long story short: Submit form, display animated loading message and return message from script (I just added the "All done" message instead of proper return messages from the script to see if anything happened at all).

Any pointers and suggestions in the right direction is greatly appreciated.

If more information is needed I'll provide it as quickly as I can.

Upvotes: 3

Views: 609

Answers (1)

Asciiom
Asciiom

Reputation: 9975

Are you using something like firebug or similar? You should. It's a plugin for firefox that helps you debug your code. (other modern browsers have similar consoles and tools, usually you can access them by right clicking in your page and selecting 'inspect element' or similar)

If you open firebug you will be able to see the ajax call to your script, and what its results are. Also it allows you to set an execution break point in your code (set one in the beginning of your submit handler) and walk through your script line by line. That way you can see what is actually happening and check the contents of your variables etc. Also the DOM can be examined easily. Invaluable help for any front end developer!

Secondly I see some problems in your code. You execute the ajax call in an anonymous function and provide it to setInterval as a 3rd param, which won't work. You need to start animation, execute the ajax call, and in the ajax callback stop animation and set your retrieved data where you want it.

Untested, but something like this should put you on the right track:

jQuery(document).ready(function($){

    $("#subsenid").submit(function(e){
        e.preventDefault();
        var senid = $("input:text[name=submit_sen]").val();
        var i = 0;

        var animationInt = setInterval(animateBox, 500);
        function animateBox(){
            i = ++i % 4;
            $("#submit_senid").val("Importing"+Array(i+1).join("."));
        }

        $.get("/inc/receiving_script.php", {psnid: senid}, function(data){
            clearInterval(animationInt);
            $("#submit_senid").val("All done");
        });
    }
  });
});

Upvotes: 1

Related Questions