Page 1 of 1

How To Load This Function At Will?

Posted: Thu Apr 30, 2009 5:58 pm
by jbh
Hey,

There is a little 'progess' function (it gives a text based 'progress bar' type response) that I found but I cannot load it at will.
I am not a jscript guru, obviously, and I was wondering what I can do to make sure I can output it wherever I want. Here is the code:

Code: Select all

function progress() {
    var str = "Almost Ready";
    for (i=0; i<dots; i++) {
        str = str + ".";
    }
    dots = dots + 1;
    if (dots<5) {
        setTimeout("checkcode()",1000);
    }
    displayMessage(str);
}
The idea is that it is supposed to display something like:
Almost Ready... where each dot appears a second after the other

I tried this with a form and, if I submit to page xyz.php, and hit BACK, I see it work
But I cannot include it in a page or get it to load any other way. What can I do?

The objective is to control when I show a user the 'progress...' output such as when they submit to a page
or if a page loads/etc.

Thank you for your time.

Re: How To Load This Function At Will?

Posted: Thu Apr 30, 2009 7:57 pm
by it2051229
I've tried this before using Javascript but what I did was an output of random quotes in every 5 seconds. I have the code here that counts numbers from 1 to 5 and you can use it as a reference for your problem

Code: Select all

 
<script type='text/javascript'>
      var counter = 0; // we start counting at 0      
 
      // this method gets triggered if the "start counting" button has been clicked
      function startCounting()
      {
                  // we check if we have reached the last digit which is 5 and that's where we stop
                  if(counter == 5)
                  {
                             // stop
                             document.getElementById("wheretoplacethecounter").innerHTML = "FINISHED";
                  }
                 else
                 {
                            // we pause for one second and call this method again after one second
                            setTimeout(startCounting, 1000);
 
                            // output on the page the current value of count
                            document.getElementById("wheretoplacethecounter").innerHTML = counter;
 
                            // increment counter
                            counter++;
                 }
      }
</script>
<div id='wheretoplacethecounter'></div>
<br />
<input type='button' value='start counting' onclick='startCounting()' />
 

Re: How To Load This Function At Will?

Posted: Fri May 01, 2009 2:05 am
by kaszu
Do you have a functions 'checkcode' and 'displayMessage' ?
Do you have variable dots defined?
How/when do you call 'checkcode' or 'progress' for first time?

Re: How To Load This Function At Will?

Posted: Fri May 01, 2009 8:45 am
by jbh
Kaszu>>Yes for the first 2 questions. One way I get it to work is to put a form on index.php
I then use onclick to trigger a function that actually calls the function I typed above.

When I visit the response page, and hit the back button, only THEN do I see the progress function activate. It's odd

I can't figure out, for instance, how to submit to the same page (index.php submitting to itself) and, if $_POST["field"] (PHP) has a value,
I simply activate it. That is the goal (like I would do with a php function).

it2051229>>I will try this and update you. Thanks.

Re: How To Load This Function At Will?

Posted: Fri May 01, 2009 8:51 am
by jbh
That does function, but it's hard for me to modify it to do what the above function does. I will study it though and thank you for it.
Just wondering if anybody knows how to take the original function and display it at will or is it not possible?

Thanks so much for your time.

Re: How To Load This Function At Will?

Posted: Thu May 07, 2009 8:51 am
by jbh
Am I to assume there is no way to just get the "Almost Ready" with a dot appearing next to it once per second to appear anytime a form is submitted? Why is it so hard to get an answer on this question (other forums are stumped). Is it not natural to javascript?

Thanks.

Re: How To Load This Function At Will?

Posted: Thu May 07, 2009 6:37 pm
by it2051229
you know once a form is submitted, the next thing that happens (if you have been observing carefully), the whole page refreshes and whatever animation you have placed will be gone with your dots dots loading etc... but you observe, some websites were able to do it and what they did there is not "form" submission but rather updating only partially a part of the page and that's where javascript comes in which I assume that's what you wanted.

maybe nobody answers that question.. because that simple problem of yours take quite sometime to answer and explanations can take a long time especially if you do not understand how to do javascript... You need to understand javascript's concepts.

anyways, you were not able to run my code because maybe you did it wrong.. now here's a COPY/PASTE FULL STRUCTURE RUNNING code which most people on the forum avoids to do because it takes time to do it and it's like a waste of time because we should've been spending our time coding and thinking on our project and not creating lengthy codes for someone else:

Code: Select all

 
<html>
    <head>
        <title>What the hell are you talking about?</title>
        <script type='text/javascript'>
            var counter = 0;
        
            function startLoading()
            {
                // we check if we have reached the last digit which is 5 and that's where we stop
                if(counter == 5)
                {
                    // stop
                    document.getElementById("loadingarea").innerHTML = "Finished Loading After 5 Seconds";
                }
                else
                {
                    // output on the page the current value of count
                    document.getElementById("loadingarea").innerHTML = counter;
                    
                    // increment the counter to increase the number of dots
                    counter++;
                    
                    var dots = "Loading";
                    
                    for(i = 0; i < counter; i++)
                    {
                        dots = dots + " . ";
                    }
                    
                    // display the dots on the webpage
                    document.getElementById("loadingarea").innerHTML = dots;
                    
                    // we pause for one second and call this method again after one second
                    setTimeout(startLoading, 1000);
                }
            }
        </script>
    </head>
    <body>
        <h1>Loading Dots Dots Demo</h1>
        <h2>
            <div id='loadingarea'>
                <!--
                - space reserved for loading
                -->
            </div>
        </h2>
        <br />
        <input type='button' value='start loading' onclick='startLoading()' />
    </body>
</html>