Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript events

Status
Not open for further replies.

JScannell

Programmer
Jan 9, 2001
306
US
I've been wracking my brain for quite a while so I figured I'd reach out to you guys. Here's what I'm trying to do:

1. I have a button that will perform a database lookup using remote scripting.
2. While it is doing all of this, I want an element that has "Please Wait --- Uploading Data" to become visible, or its value to change from "" to "Please Wait --- Uploading Data" so the user can see it.
3. When the process is finished, I want toe <span> to become invisible.

It seems that no matter what I do, no text changes or no display attributes changes until the very end so there is effectively no change to anything!! I currently have the following:

function Update_PLS_Wait ( strValue )
{
alert ( document.getdata.PLS_Wait.value );
document.getdata.PLS_Wait.value = strValue;
alert ( document.getdata.PLS_Wait.value );
return true;
}

function getApparatusName_via_VLICK ()
{
.
.
.
}

Inside my form:
<tr>
<td align=center colspan=2>
<input type="button" name = "clicker1" class="Submit_Button" value = "Lookup Items" onClick = "Update_PLS_Wait ( 'Please wait --- Uploading data' ); getApparatusName_via_CLICK (); Update_PLS_Wait ( '' );">
</td>
</tr>
<tr><td align=center colspan=2><input type = "TEXT" name = "PLS_Wait" id = "PLS_Wait" size="30" maxlength="30" value="" readonly></td></tr>


The crazy thing is that the alerts inside "Update_PLS_Wait ( strValue )" happen but I am unable to see the textbox change when I close the alert()


This issue is the same regardless of whether I have a text element that I change or a span where I change the display property like ( which I wanted in the first place):

<tr>
<td align=center colspan=2>
<input type="button" name = "clicker1" class="Submit_Button" value = "Lookup Items" onClick = "Update_PLS_Wait ( 'block' ); getApparatusName_via_CLICK (); Update_PLS_Wait ( 'none' );">
</td>
</tr>
<tr><td colspan=2><span id="PLS_Wait" name="PLS_Wait" STYLE="display:none">Please wait --- Uploading data</span></td></tr>

Then the Update_PLS_Wait () function would change to this:

function Update_PLS_Wait ( strDisplay )
{
var obj = document.getElementById ( "PLS_Wait" );
obj.style.display = strDisplay;

return true;
}


Thanks in advance,
Jerry


Jerry Scannell
 
Here's a working example of what you're trying to do. Hopefully you can use this more modern take on Javascript which uses `const` keyword, the `querySelector` method, and event listeners:

If the HTML is as such:

HTML:
<span id="waitMessage">initial text</span>
<br>
<input id="aparatusNameButton" type="button" class="Submit_Button" value="Lookup Items">

Then the Javascript can be thus:

JavaScript:
const waitMessageSpan = document.querySelector('#waitMessage');

const aparatusNameButton = document.querySelector('input#aparatusNameButton');
aparatusNameButton.addEventListener('click', getApparatusName);

function getApparatusName() {
	alert(waitMessageSpan.innerText);

	waitMessageSpan.innerText = 'Please wait --- Uploading data';

	alert(waitMessageSpan.innerText);

	// ...

	waitMessageSpan.style.display = 'none';
}

Here is a jsfiddle of the working example:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top