How to add loading in javascript,jquery and php while it execute?

Question

I tried to make a something that when clicked will return value within it page.below is my form,now when form is submitted it takes sometime,what i want is it will show a loading time,while the codes get executed

my form

<html>
<head>
</head>
<body>

<form id="myForm" action="redirect.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="pass" /><br />
<button id="sub">submit</button>
</form>

<span id="result"></span>

<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/script.js" type="text/javascript"></script>
</body>
</html>

my script.js file

         $("#sub").click( function() {
         $.post( $("#myForm").attr("action"),
          $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
            });

          });

        $("#myForm").submit( function() {
        return false;
         });

my redirect.php file

     <?php
     $name = $_POST['name'];
     $age = $_POST['pass'];
     if($name==!NULL || $age==!NULL)
     echo "Successfully returned";
     echo $name;
     else
     echo "Returned Failed";
     ?>

the logic is quite straightforward, upon initial load, ofcourse the animated loading gif is hidden, once the form is submitted, show the preloader gif, after the ajax request is done, hide it again — Kevin
– Kevin, Commented Jul 25, 2014 at 6:41
this ain't new technology, that you need to invent yourself. a google search should suffice: ajax form submit preloader — Kevin
– Kevin, Commented Jul 25, 2014 at 6:47

Alexander Gelbukh · Accepted Answer · 2014-07-25 08:34:04Z

You can give progress messages like echo "15% done" from within your cycle in redirect.php.

Suppose currently your code is:

<?php

$N = 100000; // this is how many iterations you will make in your work

for ($i = 0; $i < $N; $i++) // This is the loop that does the work in your script
{
    do some part of your work...
}

?>

For the messages to be shown, you will need to do this in PHP:

<?php

ob_start (); 

$percent_previous = 0;

$N = 100000; // this is how many iterations you will make in your work

for ($i = 0; $i < $N; $i++) // This is the loop that does the work in your script
{
    do some part of your work...

    $percent = $N / ($i + 1) * 100;

    if ($percent_previous != $percent) // not to show it too frequently
    {
        message ("$percent% done...");
        $percent_previous = $percent;
    }
}

// after the work done:

if ($percent_previous != 100)
    progress (100);

function message ($msg)
{
    echo "<!-- some 4 KB of random garbage like jhajdhsjahsjaheuwbcwuvacjacv -->";
    echo $msg;
    ob_end_flush ();
    ob_flush     ();
    flush        ();
    ob_start     (); 
    echo "<!-- some 1 KB of random garbage like hdsjfagdfqhwjcwwvyvcsdhalj -->";
}

?>

I echo before and after the messages a long comment with garbage <!-- hdjhsjsjdshjd -> (some 4 kilobytes) to reset the network's and browser's caching mechanisms. I use garbage because if I just use some 4 KB of spaces, it can be compressed and the resulting transmitted message will not be large enough.

You can start from <span class=someclass> and after 100% close this tag; then execute a JavScript to erase the progress messages.

Of course the same can be done with images, and you can nicely format your progress messages.

If you only want a gif to show and disappear after the calculation finishes, then you can proceed along these lines:

<html>
<body>

<?php

ob_start (); 

progress ("<span id='progress'><img src='progress.gif'></span>");

// You still need the trick I described above for this to be shown in real time

// do all your long work here

?>

<script>
    document.getElementById ("progress").innerHTML = ''; // This erases the image
</script>

</body>
</html>

A complete example using the OP's sample code is:

<html>
<body>

<?php

ob_start (); 

message ("<span id='progress'><img src='progress.gif'></span>");

// You still need the trick I described above for this to be shown in real time

 $name = $_POST['name'];           // OP's code
 $age = $_POST['pass'];            // OP's code
 if($name==!NULL || $age==!NULL)   // OP's code
 echo "Successfully returned";     // OP's code
 echo $name;                       // OP's code
 else                              // OP's code
 echo "Returned Failed";           // OP's code

function message ($msg)
{
    echo "<!-- some 4 KB of random garbage like jhajdhsjahsjaheuwbcwuvacjacv -->"; // please include here at least some 4 kilobytes of such random garbage, I will not type it here
    echo $msg;
    ob_end_flush ();
    ob_flush     ();
    flush        ();
    ob_start     (); 
    echo "<!-- some 1 KB of random garbage like hdsjfagdfqhwjcwwvyvcsdhalj -->"; // please include here at least some 1 kilobyte of such random garbage, I will not type it here
}

?>

<script>
    document.getElementById ("progress").innerHTML = ''; // This erases the image
</script>

</body>
</html>

i did not downvote,btw can u write the full thing because i am not understanding — user3815328
– user3815328, Commented Jul 25, 2014 at 5:31
Before writing the full thing: do I understand correctly your situation? You want to load a page; when you click a button, the PHP to which it points starts a long calculation, and you want to show some progress indicator: "10% done... 20% done... ... 100% done, result = 123". Then in the PHP you have some loop that does the calculation. Is this correct? So my suggestion is to issue messages as the loop progresses. If you confirm, I will write a more detailed code. — Alexander Gelbukh
– Alexander Gelbukh, Commented Jul 25, 2014 at 5:42
what if i only want to a gif to load while script executing and disappears when execution finish — user3815328
– user3815328, Commented Jul 25, 2014 at 6:38
please update your answer in reference to my code,cz i am not understanding what to change — user3815328
– user3815328, Commented Jul 25, 2014 at 6:42

Collectives™ on Stack Overflow

How to add loading in javascript,jquery and php while it execute?

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related