Solved

loading when page make an operation

Posted on 2009-07-03
7
208 Views
Last Modified: 2012-05-07
Hi EE
i have a question:
Can I add a loader (like gif animator , like ajax) when i lanch an operation into may page?
Example :
I have a php page that send some request and print video the result, some times, the result return after 50/60 seconds, so i would add a loader when my page attend.
I dont know how i implement this.
Can you help me?
I use in my project php - mysql and use jQuesry framework.

Regards
Denis
0
Comment
Question by:denny3d
  • 4
  • 2
7 Comments
 
LVL 5

Expert Comment

by:Jagarm
ID: 24771989
Please check the following page: http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

Let me know if it didin't help.
0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24772002
I do this when uploading files... but same principle for any form submit which will take some time to process...
<script type="text/javascript">

 

 

        $(document).ready(function(){

                var validator = $("#importForm").validate({ 

                        // specifying a submitHandler prevents the default submit, good for the demo 

                submitHandler: function() { 

                        $('#importit').hide();

                        $('#importing').show(); // show animation

                        $("#importForm").submit();

                } 

                });

        });

 

</script>               

<form action="index.php" method="post" enctype="multipart/form-data" name="importForm" id="importForm">

<div id="importit">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">

        <tr valign="top">

                <td class="label"><label id="lufile" for="ufile">Import File</label></td>

                <td class="field">

                        <input name="ufile" type="file" id="ufile" size="50"  class="required" value="" accept="csv"/><br>

                        <b>NOTE:</b> Maximum filesize is <b>approximately $php_upload_max_filesize</b>.<br>

                </td>

                <td> </td>

        </tr>

        <tr>

                <td class="label"><label id="limportsubmit" for="importsubmit"></label></td>

                <td class="field" colspan="2">

                        <input id="importsubmit" name="importsubmit" type="submit" value="Import Hubs">

                </td>

        </tr>

</table>

<div style="clear: both;"> </div>

</div>

</div>

</form>

Open in new window

0
 

Author Comment

by:denny3d
ID: 24772011
no , it's not ok
i lanch a link and not open an image
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:denny3d
ID: 24772039
@BrianMM

where div #importing ?
0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24772100
:)
<script type="text/javascript">

 

 

        $(document).ready(function(){

                var validator = $("#importForm").validate({ 

                        // specifying a submitHandler prevents the default submit, good for the demo 

                submitHandler: function() { 

                        $('#importit').hide();

                        $('#importing').show(); // show animation

                        $("#importForm").submit();

                } 

                });

        });

 

</script>               

<form action="index.php" method="post" enctype="multipart/form-data" name="importForm" id="importForm">

<div id="importit">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">

        <tr valign="top">

                <td class="label"><label id="lufile" for="ufile">Import File</label></td>

                <td class="field">

                        <input name="ufile" type="file" id="ufile" size="50"  class="required" value="" accept="csv"/><br>

                        <b>NOTE:</b> Maximum filesize is <b>approximately $php_upload_max_filesize</b>.<br>

                </td>

                <td> </td>

        </tr>

        <tr>

                <td class="label"><label id="limportsubmit" for="importsubmit"></label></td>

                <td class="field" colspan="2">

                        <input id="importsubmit" name="importsubmit" type="submit" value="Import Hubs">

                </td>

        </tr>

</table>

<div style="clear: both;"> </div>

</div>

</div>

</form>

<div style="display: none;" id="importing">

<b>Please be patient, importing into ACSLite...</b>

<br><br><img src="./media/images/ajax-loader.gif" alt="Loading...">

</div>

Open in new window

0
 

Author Comment

by:denny3d
ID: 24840520
hello EE
i have an example
cam you see this link and try to serch anythink
you can saw a loading in the middle of the page, when the page load.
can i make this effects?

this is the link

www.bancodinapoli.it

regards
0
 

Accepted Solution

by:
denny3d earned 0 total points
ID: 24868712
Hello EE
nobody help me?


0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Echo images using file system 2 30
Chocolatey under PowerShell is not working properly 3 45
mysqli 3 18
How to convert my query to the proper format? 5 16
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now