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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using a progress bar or "processing" message

    I have a page containing 1500 links. I have a simple script to search the these links and display the list of hits in a <div> just under the search form.

    For the benefit of users with slow machines, I have written a function to display a message next to the search box during the search.

    My problem is that the message displays at the end of the search at the same time as the search results.

    How can I get the message to display first so that it is visible while the search is taking place?

    I tried to have the form initiate two functions from one click by calling one function with onSubmit in the <form> statement and the other using onClick in the <input> statement but this did not work.

    Please and thanks in advance.

    Jean

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code?

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Javascript will not update the page until all processes have completed.

    ex.
    Code:
    var x="hello";
    
    document.write(x);
    
    var y="world";
    
    document.write(y);
    Will display "Hello World" on the page, note at no point do you see just hello. The only way to stop the code from executing, once initialized, is to throw an alert in the middle.

    ex.
    Code:
    var x="hello";
    
    document.write(x);
    alert("")
    var y="world";
    
    document.write(y);
    Now when the alert is displayed, the code halts, and reflects what has happened thus far on the page. This isn't very handy for what you are trying to accomplish, but applicable. There is an actual term for what I have described (or the lack there of), though I can't recall now.

    Anyhow, to get around this problem we use, setTimeout("someFunction()",time in milliseconds). Which means do "this" in "X" milliseconds. Where and how you use it depends on your code, but here is a simple example.

    ex.
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title></title>
    		<script type="text/javascript">
    		function doStuff()
    		{
    			code for searching for links
    		}
    		function showWaitMessage()
    		{
    			code for wait message
    		}
    		</script>
    	</head>
    	<body>
    	<button onclick="showWaitMessage();setTimeout('doStuff()',1000);" value="search" />
    	</body>
    </html>
    Now the message function is called, and we have put the search function into "queue". Because we have told it to wait 1 second before executing, this gives the message function time to process and display the message to the user before the search function is called.

    Hope that helps,
    Basscyst
    Last edited by Basscyst; 05-25-2005 at 11:02 PM.
    Helping to build a bigger box. - Adam Matthews

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, your comments explained what was going on. I'm new to javascript - heck I only began to learn HTML last November - so I've lots to learn!

    I finally got it to work a different way. As you can see, I submitted the message using onMouseDown= in the <input> tag. The data is submitted to the search on the <form> tag using onSubmit.

    A further question, though. I don't understand why my <form> tag onSubmit is structured the way it is -- I just copied it from some other code and it works.

    I would also like to know how to get the search string into the search function from the <input> tag or from a <button> tag for that matter. Any help in this regard would be much appreciated.

    Here is an extract from my code showing how the search function works.

    Sorry if this message is too long.
    cheers
    jean




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    // Create getElementById function for older browsers
    //The title property is used to add search keywords to the links
    if(document.all && !document.getElementById) {document.getElementById = function(id) { return document.all[id];}}
    function findInLinks(xStr) {
    if(!xStr || xStr==' ' || xStr==' ' || xStr==''){writeMsg("No search word(s) entered."); return;};
    if(xStr.length <3){writeMsg('Please enter a longer word.'); return;};
    //Get output div from document
    var zDiv=document.getElementById("userbox");
    // Clear any previous output list from results div
    aList=document.getElementById("Results");
    if(aList) zDiv.removeChild(aList);
    // Create new output list and append to output div
    aList=document.createElement("ul");
    aList.setAttribute("id","Results");
    zDiv.appendChild(aList);
    numMatches=0
    // Get items to search.
    zThings = document.getElementsByName("Pattern");
    xStr=xStr.toLowerCase();
    for(i=0; i < zThings.length; ++i) {
    if((zThings[i].innerHTML && zThings[i].href)&&( zThings[i].innerHTML.toLowerCase().indexOf(xStr)!=-1 || (zThings[i].title && zThings[i].title.toLowerCase().indexOf(xStr) != -1)) ){
    // Create new list item and append to list
    aListItem=document.createElement("li");
    aList.appendChild(aListItem);
    //Create new link, copy found link, append to new list item
    aLink=document.createElement("a");
    aLink.href=zThings[i].href;
    aLink.innerHTML=zThings[i].innerHTML;
    aLink.target=zThings[i].target;
    aListItem.appendChild(aLink);
    numMatches=numMatches+1;
    }
    }
    writeMsg(numMatches + " matches found.")
    return;
    }

    function debug(msg){alert(msg);}
    function debug1(msg){debugWindow.write(msg);}//Must open a window to use.

    function messageBox(xMessage){ deleteMsgBox();createMsgBox();writeMsg(xMessage); }

    function createMsgBox()
    {
    zSpan=document.getElementById("MessageBox");
    aMsgBox = document.createElement("input");
    aMsgBox.setAttribute("type","text");
    aMsgBox.setAttribute("size","25");
    aMsgBox.setAttribute("value","");
    aMsgBox.setAttribute("id","MsgBox");
    zSpan.appendChild(aMsgBox);
    bar=""
    return;
    }

    function writeMsg(xMessage)
    {
    xMessage=" "+xMessage
    aMsgBox.setAttribute("value",xMessage);
    return;
    }

    function deleteMsgBox()
    {
    aMsgBox=document.getElementById("MsgBox");
    if(aMsgBox)zSpan.removeChild(aMsgBox);
    return;
    }


    </script>

    </head>

    <body>

    <form action="" onSubmit="findInLinks( this.elements[0].value); return false;">
    <input type="text" size="10">
    <input type="submit" value="Search" onMouseDown ="messageBox('...Searching Pattern Links...')" >
    &nbsp; &nbsp;<span id="MessageBox"></span>
    </form>
    </div>
    <br clear="all">
    <div id="user" class="patterncategory jsRqd"><a href="#"></a>Your Search Results
    <div id="userbox" class="linkbox jsRrqd">



    </div></div>

    <div class="patterncategory"><a href="#"></a>Settings and Borders
    <div class="linkbox" ><ul>
    <li><a name="Pattern" title="Settings Borders " href="#">Diamond Border and Corners</a> </li>
    <li><a name="Pattern" title="Settings Borders " href="#">Winding Ribbons Border</a> </li>
    <li><a name="Pattern" title="Settings Borders " href="http://piecebynumber.com/pastbom/greekkey.htm">Greek Key Border</a> </li>
    <li><a name="Pattern" title="Settings Borders " href="http://piecebynumber.com/pastbom/chainptt.htm">Venetian Chain</a> </li>
    <li><a name="Pattern" title="Settings Borders " href="http://piecebynumber.com/pastbom/cornrptt.htm">Venetian Chain Corner</a> </li>
    <li><a name="Pattern" title="Settings Borders " href="http://www.thequiltedsnail.com/patterns/flyingGeese.pdf">Flying Geese Borders</a> </li>
    <li><a name="Pattern" title="Settings " href="http://piecebynumber.com/dn/mazepatt.htm">Miniature Garden Maze (setting)</a> </li>
    <li><a name="Pattern" title="Settings " href="http://www.geocities.com/pcpiecers/sticksomethinginmiddle.html">Something-in-the-Middle Blocks</a> </li>
    <li><a name="Pattern" title="Settings " href="http://www.reddawn.net/quilt/art/image/mar03.jpg">Lattice</a> </li>
    <li><a name="Pattern" title="Settings " href="http://www.reddawn.net/quilt/lattice.htm">Assembling the Lattice Block</a>

    </ul></div></div>

    </body>
    </html>


  •  

    Posting Permissions

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