Matt K
Matt K

Reputation: 39

Using javascript hide()/show() in vb.net

I am creating a website using vb.net. What I want to do is not have multiple forms just multiple 's on the page and hide/show them on the button click so there will be no change in the actual url, just display of the page. So I am using vb.net and javascript to achieve that.

my vb.aspx page :

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
<!--

    function show_ata() {
        $('#dmi').hide();
        $('#ata').show("slow");

    }
    function back() {
        $('#ata').hide();
        $('#dmi').show("slow");
    }

// -->
    </script>
    </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
 <div id="ata" runat="server" >
<p>ATA</p>
<asp:Button runat="server" ID="Button1" OnClientClick="return back()" Text="Back to DMI" CausesValidation="false" />
</div>
<div id="dmi" runat="server">
<p>DMI</p>
<asp:Button runat="server" ID="btnatadetails" OnClientClick="return show_ata()" Text="Go to ATA" CausesValidation="false" />
</div>
</asp:Content>

So that is my code, I have some code on .aspx.vb page too, but it is only to do with checking if user is logged in, and has nothing to do with page display so I will not post it here.

MY PROBLEM My problem is that for some reason button on click action hides given div only for 1 sec and then shows it again, my intend was to hide it and stay hidden.

Any ideas what am i doing wrong?

SOLUTION Some of you guys suggested that I should wrap my javascript code in document ready function, which is probably correct but does not solve my issue. Solution is either write vb code for button click like this:

Private Sub btnatadetails_Click(sender As Object, e As System.EventArgs) Handles btnatadetails.Click
        dmi.Visible = False
        ata.Visible = True
End Sub

Or not to use ASP:Button and use html button <input type=button> because asp:button runs on server and on every click page will reload and come back to its original state.

Thanks for help guys.

Upvotes: 1

Views: 1822

Answers (3)

Matt K
Matt K

Reputation: 39

SOLUTION Some of you guys suggested that I should wrap my javascript code in document ready function, which is probably correct but does not solve my issue. Solution is either write vb code for button click like this:

Private Sub btnatadetails_Click(sender As Object, e As System.EventArgs) Handles btnatadetails.Click
    dmi.Visible = False
    ata.Visible = True

End Sub Or not to use ASP:Button and use html button because asp:button runs on server and on every click page will reload and come back to its original state.

Thanks for help guys.

Upvotes: 0

gsiradze
gsiradze

Reputation: 4733

you need simply add $(document).ready(function(){ ... } to use jquery

<script language="javascript" type="text/javascript">
 <!--
$(document).ready(function(){
 function show_ata() {
     $('#dmi').hide();
     $('#ata').show("slow");

 }
 function back() {
     $('#ata').hide();
     $('#dmi').show("slow");
 }
}
// -->
</script>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

click action hides given div only for 1 sec and then shows it again

Because it is calling before document is ready and after ready it's showing it's original.

Solution: Wrap your code inside ready handler:

$(document).ready(function(){
//your code here
});

Upvotes: 1

Related Questions