...

View Full Version : using a progress bar or "processing" message



CDNQuilter
05-25-2005, 06:47 PM
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

Harry Armadillo
05-25-2005, 10:26 PM
Code?

Basscyst
05-25-2005, 10:49 PM
Javascript will not update the page until all processes have completed.

ex.



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.


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.


<!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

CDNQuilter
05-26-2005, 03:51 AM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum