asp.net javascript div hide show not working

Question

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>

Christos · Accepted Answer · 2015-02-03 15:26:02Z

2

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%>");

edited Feb 3, 2015 at 15:26

answered Feb 3, 2015 at 15:17

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1135218 Over a year ago

Yes, the OnClientClick did it!!!!. The thing is that I copied the code from internet (forum) and it was unfortunately written as OnClick and since I am a newbie at asp.net/javascript, I couldn't see the problem. Thanks for the other points, will keep it in mind.

CountZero · Accepted Answer · 2015-02-03 15:25:26Z

0

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);

answered Feb 3, 2015 at 15:25

CountZero

6,4293 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

asp.net javascript div hide show not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related