Hiding Division with Javascript, but problem while rendering

Last post 10-27-2006 2:03 PM by BhaveshPatel. 2 replies.

Sort Posts:

  • Hiding Division with Javascript, but problem while rendering

    10-27-2006, 12:37 PM

    Hi guys!!!!

          I have 2 division tag... one with datalist and one with formview(Enable Paging).. I have two input buttons,one leads to division-1(datalist) and other leads division-2(formview) at start up I m hiding division-2(formview.).... The problem is when I am working with division-2(Formview)... if any button click or postback happened (if the page is rendered) i m losing my division-2(bcoz I by default i m keeping division2 hidden.)

          Now what I want... whenever I am playing with division-2 and click on any button inside division2.... the whole page should not get rendered at server side. here is my code:

    <script type="text/javascript" language="javascript">

    function showHideContent(id1,id2,show)

    {

        var elem1 = document.getElementById(id1);

        var elem2 = document.getElementById(id2);

      if (elem1)

    {

    if (show)

    {

    elem1.style.display = 'block';

    elem1.style.visibility = 'visible';

    elem2.style.display = 'none';

    elem2.style.visibility = 'hidden';

    }

    else

    {

    elem1.style.display = 'none';

    elem1.style.visibility = 'hidden';

    elem2.style.display = 'block';

    elem2.style.visibility = 'visible';

    }

    }

    }

    </script>

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

    .hiddencol

    {

    display:none;

    }

    .fancy { color: #FF6500; font-size: 12pt }

    </style>

    </head>

    <body>

    <form id="form1" runat="server" class="fancy" method="get">

    <input type="button" value="View ThumbNail" onclick="showHideContent('division1','division2', true);" />

    <input type="button" value="View SlideShow" onclick="showHideContent('division1','division2', false);" />

    <div id="division1" >

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:IntranetDBConnectionString %>"

    SelectCommand="SELECT * FROM [MerchMarketing]"></asp:SqlDataSource>

    <b>Thumbnail Image</b>

    <asp:DataList ID="DataList1" DataKeyField="ID" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="4" RepeatDirection="Horizontal" >

    <ItemTemplate>

    <asp:Label ID="IDLabel" runat="server" Visible="false" Text='<%# Eval("ID") %>'></asp:Label><br />

    <asp:Label ID="THUMBIMAGENAMELabel" runat="server" Visible="false" Text='<%# Eval("THUMBIMAGENAME") %>'></asp:Label>

    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "/Images/" + DataBinder.Eval 

     (Container.DataItem, "ORGIMAGENAME")%>'>

    </asp:ImageButton>

    <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>'></asp:Label>

    <asp:Button ID="btn_Delete" runat="server" Text="Delete" OnClick="btn_Delete_Click" />

    </ItemTemplate>

    </asp:DataList>

    </div>

    // This is my division-2 which i m hiding at initially, but it will show up whenever user will click on

    //"View SlideShow button.

    <div id="division2" class="hiddencol" onclick="showHideContent('division1','division2', false);">

    <b> Original Image </b>

    <asp:FormView ID="DataList2" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True">

     

    <ItemTemplate>

    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "/Images/" + DataBinder.Eval(Container.DataItem, "ORGIMAGENAME")%>' >

    </asp:Image>

    <br />

    TITLE2:

    <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>'></asp:Label>

    <br />

    </ItemTemplate>

    </asp:FormView>

    </div>

    </form>

    dont know what to do!!!! I was wondering if i can use two different form for both division... but it is giving me error that i can not use two form tag in one page... let see who can help me out in this....

    work smarter, Not Harder.

    Bhavesh Patel
  • Re: Hiding Division with Javascript, but problem while rendering

    10-27-2006, 2:01 PM

    One thing to try is to set the value of a hidden field when you hide/show or swap divisions, that way, when you return from a postback you can check the value of the hidden field to execute javascript to display the correct one.  I would not hide it using the visible property on the server because if you do, it will not be rendered.  Instead set a style property on the div in server side code if you want to hide it, the same way you do in your script.  Make sure that your body tag has an onload script that checks the hidden field and shows or hides the div as necessary.

     good luck,

    --JJ

    Please mark as answered if I helped.
    I don't answer personal emails unless I know you or of you. Feel free to post in the forum to get an answer from me.
  • Re: Hiding Division with Javascript, but problem while rendering

    10-27-2006, 2:03 PM

    Hi guys!!!

         I found the answer..This is for the ppl who having the same problem. the best way is to use asp- panel instead of division... by using Panel, u dont need to worry about javascript at all... check out the link below to see how it works...

    http://discuss.fogcreek.com/dotnetquestions/default.asp?cmd=show&ixPost=1092 

    Regards

    work smarter, Not Harder.

    Bhavesh Patel
Page 1 of 1 (3 items)
Microsoft Communities
Page view counter