CODEWITHSUNDEEP
javascriptasp.net
user1135218
user1135218

Reputation: 403

asp.net javascript div hide show not working

I am new to asp.net/javascript and have been practising with the following code for sometime now. Basically I am testing how div containers appear using javascript with the following code (extract)

Everytime I run the page I get the following error: BC30456: 'Show' is not a member of 'ASP.default4_aspx'. And the following line gets highlighted:

<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />

I can see the onclick="SHOW() ;" seems to be the problem, but I don't know what's wrong.

Any guidance is welcome.

<form id="form1" runat="server">

<div>

    <asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;"  />

    <div style="background-color:yellow;width=200px;height:200px"></div>
    <div style="background-color:red;width=200px;height:200px"></div>
    <div style="background-color:blue;width=200px;height:200px"></div>
    <div style="background-color:beige;width=200px;height:200px"></div>
    <div style="background-color:skyblue;width=200px;height:200px"></div>

    <div id="div_Schedule" class="MiddlePopUp"  style="display:none;left:400px;top:400px;z-index:10;">
        <asp:Button ID="btnScheduleHide" runat="server"  Text="hide" onclick="Hide();" CssClass="STD_button" />
        <br/>
        <br/>  
        <img src="/quick.jpg" style="height: 764px; width: 1168px" />
    </div>

</div>
</form>

<script type="text/javascript">

    document.getElementById('div_Schedule').style.display = "none";


    function Show() {
        document.getElementById('div_Schedule').style.display = "block";
    }

    function Hide() {
        document.getElementById('div_Schedule').style.display = "none";
    }
</script>

Upvotes: 1

Views: 1777

Answers (2)

Christos
Christos

Reputation: 53958

You should use the OnClientClick instead of OnClick. The first one handles the client click on the client - it doesn't trigger a postback. While the second triggers a postback and the click will be handled in the server.

That being said, you could try this:

<asp:Button ID="btnSchedule" 
            runat="server" 
            Text="Schedule" 
            OnClientClick="Show();" 
            TabIndex="1000" 
            style="width:120px;margin-top:-5px;border: thin solid #ffffff;"/>

The same holds for the OnClick of btnScheduleHide button.

As a side note, I don't see the reason for these button to be server side buttons. They could be html buttons. You don't have to define them as a server side controls and then the View engine of ASP.NET render the corresponding html code for them, since you quite possibly don't need to trigger a postback to the server and make some actions there and return a response from the server.

The following, I am almost sure that would meet your needs:

<input type="button" id="btnSchedule" value="Schedule" onclick="Show();"/>

Furthermore, if you stick with the first approach you have to change also the way you select your button in your client side code:

This will not work:

document.getElementById('btnSchedule')

Why?

Because the rendering engine of ASP.NET will create an ID not exactly like btnSchedule. You could easily spot this, if you use the developer tools.

So how you could select it correctly?

 document.getElementById("<%= btnSchedule.ClientID%>");

Upvotes: 2

CountZero
CountZero

Reputation: 6389

Don't put the javascript onclick in the asp.net button.

Use the ClientID property to attach the onlcick event.

This should do the job. 

document.getElementById('div_Schedule').style.display = "none";


function Show() {
     document.getElementById('div_Schedule').style.display = "block";
}

function Hide() {
     document.getElementById('div_Schedule').style.display = "none";
}

var showButton = document.getElementById("<%= btnSchedule.ClientID%>");
var hideButton = document.getElementById("<%= btnScheduleHide.ClientID%>");

showButton.addEventListener("click", Show);
hideButton.addEventListener("click", Hide);

Upvotes: 0

Related Questions