在带有主文件的ASP.NET 2.0页面上使用Java Timer

Question

I have found out that sometimes the simplest things you want to do are almost impossible to fund an answer for. I have an ASPX page in ASP.NET V2 programmed in Visual Studio 2005. The ASPX page has a behind code ASXP.VB page and is tied to a .master file. I have two buttons [Button_Process] that will eventually call a program that will extract data from a SQL table -- no problem here. [Button_Process] will also call a javascript timer that goes for 7seconds (enough time for the extraction to happen). We're doing the timer delay so a cute little graphic appears and makes the person using the page think the systems working and not to double-click the button -- I know there's other ways of doing this but this is our approach for know). Again there is no problem here. test with an aleart delivers a message seven seconds after clicking the [Button_Process] button. Everything is good in the world up to this point.

I have a second button, [Button_PM_Upload], that is hidden during this time. It will eventually call a program on button-click to take the info from the previous button click collecting, compare it to data in a second SQL table and update the second SQL table. All I want to do is to make that second button visible after the seven seconds is up. I very simple task but I am having problems finding the solution.

In the master page between head tags is this timer code that works remarkably well:

<script type="text/javascript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer()
{
    // Set the length of the timer, in seconds
    secs = 7
    StopTheClock()
    StartTheTimer()
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function StartTheTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
        alert("The timer is working properly")
        //document.getElementsByName ("Button_PM_Upload").style.display=
         "block";          
    }
    else
    {
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}
//-->
</script>

On the ASPX.VB behind code page is this code for that button click and it works very well too:

Protected Sub Button_Process_OnClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_Process.Click
    'This code fires of the timer in the master file
    ClientScript.RegisterStartupScript(GetType(Page), "Startup", "<script type=text/javascript>InitializeTimer()</script>")
End Sub

Through days of reading and research I found out that the timer is clientside and the behind code is Serverside and "never the two do talk". Articles on the NET say that to make the second button "grabable" by the javascript, I must instead of saying (visible=false) to initially make it invisible prior to the timer , which is serverside and doesn't deliver the button clientside, I need to tweak the display command. That code is located on the ASPX page for that button and looks like this in the source code:

<asp:Button ID="Button_PM_Upload" runat="server" Style="display: none; left: 632px;
position: absolute; top: 252px; z-index: 104;" Text="Upload to PartsMaster"
ToolTip="Change PR codes and Descriptions"  Width="147px" />

As my older brother use to say in our youth, -- "everything is hunky-dory at this point". The next part that the articles say varies between authors. All do however have a close solution but do not tell where to place the code. I have been placing it under the alert in the Javascript in the master page. Here is what I am getting:

document.getElementsByName("Button_PM_Upload").style.display="block";

gives me -- button stays hidden

document.getElementsByName("Button_PM_Upload").style.display='block';

gives me -- button stays hidden

document.getElementsByName('Button_PM_Upload').style.display='block';

gives me -- button stays hidden

document.getElementsByName('Button_PM_Upload').style.display="block";

gives me -- button stays hidden

Whenever I substitute block for inline (one suggestion) all four code lines give me the same result (nothing). Whenever I substitute block for visible (another suggestion) all four code lines give me the same result. Whenever I substitute block with inline (another suggestion) all four codes lines give me the same result.

I did find this example where you put server code in -- ("<%=Button_PM_Upload%>") --, but all I get is an error (no matter how I arrange it) that reads this: BC30451: Name 'Button_PM_Upload' is not declared.

My web site has the master page on the root of the project. Also on the root is a folder called [PSC_Tools]. My ASPX and ASPX.VB pages are in that folder and I'm wondering if maybe its a simple path problem. Whatever it is, I am a standstill -- sometimes the simplest things to do are the hardest to find code for. Ajax tools are out of the question. The site was developed without them and if imported in, they interfer with the config file running the site.

Am I missing code somewhere? Am I not importing something? Does this have to do with the config or css files? I'm at a loss. I came across your site and could feel the heat of collected intellect and experience exuding out from my monitor. Hope I followed the rules for asking a question and would very much appreciate any help you could give. And as a help, coould you please let me know exactly where and on what page (ASPX, ASXP.VB, .master) the code should go.

Have a great weekend

Answer 1

There is an easy workaround: Wrap the button in a div:

<div id="x"><asp:Button/></div>

Then hide and show the div.

If you wanted to disable the button, use jQuery like this:

$('#x button').attr('disabled', 'disabled');

The trick is referencing the button through the wrapping element.