Hello! A small problem with asp+JS+masterpage+updatepanel+panel, show and hide a div

#1
ManyTimes

Posted 04 May 2010 - 07:13 PM

Newbie

Members
14 posts

Hello guys!

Hopefully I am in the right forum... :)

I am stumbled that I cannot get this little thing to work, been playing around with it for hours now...
My problem:
I have a master page looking like this (more or less)

<asp:Panel ID="Panel1" runat="server" CssClass="ShowHideMenu">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="btnshow" runat="server"  CssClass="mainmenubtn" Text="Show"  OnClientClick="showDiv('divtest');" />
            <asp:Button ID="btnhide" runat="server" CssClass="mainmenubtn" Text="Hide"  OnClientClick="hideDiv('divtest');" />
               <div id="divtest" style="display: none;">
                    Hello World in a DIV, which shall be shown/hidden through a click
                </div>      
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnshow" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="btnhide" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</asp:Panel>

My .JS functions "showDiv" and "hideDiv" looks like this:

function hideDiv(divstring) {         //Sets display state to "none"
    var divdoc = getelement(divstring)
    divdoc.style.display = "none";
    return false;
}

function showDiv(divstring)                    //Sets display state to "block"
{
    var divdoc = getelement(divstring);
    divdoc.style.display = "block";
    return false;
}

Doing this in a .ASPX file works fine. When I do this in a .master page, it...bugs (not really the master page's fault, its a combination of update-panel + panel....) :)

What happens:
I click hide: the "testdiv" is hidden.
I click show: the "testdiv" is shown for a nanosecond, and something is turning the div to hide again.

What I want: Simply just show and hide a simple div, with a <asp:button..> from both outside the update-panel, and from within the update-panel, for a start; just from within the update-panel. :)

The error is this: the "runat="server"" tag at the two buttons, it makes the whole page (even if I use update panel with the tag updatemode=conditional) reload (a postback?)... Well, If I remove runat=server, the buttons do not show.

How can I still use the <asp:button ...> tag, without the "runat="server" attribute? Is that even possible? I mean, if it isn't, why in the blue hell did MS make us write "runat="server"" in the first place, if it is always required...? (Hopefully fixed in VS2010 package! :))

Well, suggestions? :)

#2
gokuajmes

Posted 04 May 2010 - 08:55 PM

Programming God

Members
518 posts

ManyTimes said:

The error is this: the "runat="server"" tag at the two buttons, it makes the whole pagereload (a postback?)...

asp, buttons needs to have the runat="server" in order for the Asp.net engine to recognize a server control

ManyTimes said:

(even if I use update panel with the tag updatemode=conditional) Well, If I remove runat=server, the buttons do not show.

UpdateMode property is not meant for this purpose.They are used when you have nested Update Panels & want to refresh only one of them.

ManyTimes said:

How can I still use the <asp:button ...> tag, without the "runat="server" attribute?

Is that a Joke :lol:. You can get that functionality using the input button ie.. html button control .

ManyTimes said:

Is that even possible?

Never possible but workaround do exist

ManyTimes said:

I mean, if it isn't, why in the blue hell did MS make us write "runat="server"" in the first place,

So that people like you could whine :crying: around in the forums without understanding Software Development:w00t:A

As a workaround try this code below
Javascript

<script type="text/javascript">
    function hide() {         //Sets display state to "none"
    document.getElementById("jake").style.display = "none";
}

function show()              //Sets display state to "block"
{
   document.getElementById("jake").style.display = "block";
}
    </script>

ASP.net Code

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="Panel1" runat="server" CssClass="ShowHideMenu">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:Button ID="btn1" runat="server" Text="Show" OnClientClick="show()" />
            <asp:Button ID="btn2" runat="server" Text="Hide" OnClientClick="hide()" />
            </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
            <div id="jake" style="width:100px; height:100px; background-color:Red;">
            </div>
    </form>
</body>

Featured on Deeptechtons | the JavaScript forums[Closed Now]| twitter| Facebook| Create a Web2 modal popup control with asp.net ajax modal popup extender

#3
ManyTimes

Posted 05 May 2010 - 08:24 AM

Newbie

Members
14 posts

Thanks for the response!

>>>UpdateMode property is not meant for this purpose.They are used when you have nested Update >>>Panels & want to refresh only one of them.
I know, but this was as far as I could get, before I got to a error. :)

I want everything that is going to be updated when a button is clicked, within the same updatepanel, everything from <div> to <asp:button> to <asp:Panel> to another <updatepanel> if needed, is this possible? Show me a sample? How does youtube.com do their controls like profile -> "Favorites"-column?

>>>asp, buttons needs to have the runat="server" in order for the Asp.net engine to recognize...
I thought if I added a:
<trigger><AsyncPostBackTrigger ControlID="buttonID" EventName="Click" /></trigger>
I could remove the "runat="server""... Guess I was wrong (although I did not post that in the snippet in my first post)?

>>>You can get that functionality using the input button ie.. html button control .
Will not use that, unless a week has past, and ...last resort.

About your "snippet": I want the <div> of yours within the <updatepanel>? I mean, when I do so, the "bug" I am talking about is happening, seems to me the updatepanel is doing a postback, when I just do a small clientside javascript code. Oh, maybe it fucks up because of I do not have nested updatepanels yet. I'll test this:
<updatepanel>
<buttons />
<updatepanel> <div> </div> </updatepanel>
</updatepanel>

>>>so that people like you could whine
True. So many things that ismplemented in ASP.NET without the ability to have attributes, silly, they should instead have been implemented that tag in the "mother" tag, same thing with "runat="server"", writing it all over the place, silly, with no client option! But; This is a result of having 1000 programmers working on one thing, then sync'ing all those snippets together... A MESS! :)

Edit: Forgot to mention, I've tried the "OnClientClick" both with the runat="server" and without it with no luck of course. :)

Edit: Ok, screw this, after two working days I'll move on..., this is really really messed up. Been trying at least 100 different combinations of <asp:UpdatePanel><triggers> with divs, with and without runat server, with or without triggers, added AsyncPostBackControl through the "sc1" (ScriptManager)... This just does not seem to work the way I want it to!

I've had a solution for this all along, do not use JavaScript, rather call a function in the codebehind (C#)... So, I'll do that now, and that works, guaruan-****-teed, but my head was all stuck in "JavaScript to solve clientside code, C# for server and database in/out-put, and asp.net for creating the controls (GUI) and css for theme and layout...".

Whine out! :)

Edited by ManyTimes, 05 May 2010 - 01:14 PM.