7 Replies - 20368 Views - Last Post: 25 July 2011 - 08:06 AM

#1 jimdavis1026  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 21-June 10

Hide Div With ASP.Net Button Click and jQuery

Posted 21 June 2010 - 12:18 PM

When ever I attempt to hide a div (or another control) using an asp.net button's click event, the div is briefly hidden but becomes visible again, immediately. Can anyone tell me what I am doing wrong? This code works fine when I am using html controls, but fails when I use an asp.net button control.

Thank you very much for any help.

My code is below:
<body>
    <form id="form1" runat="server">
    <div id="toolpanel">
    Tool Panel
    </div>
    <div id="container">
    Container
    </div>
    <asp:Button ID="ButtonAlert" runat="server" Text="Alert" />
    </form>

<script type="text/javascript">
    $(document).ready(function() {
    $('#ButtonAlert').click(function() {
            //alert("We got here.");
            $('#toolpanel').hide();


        });

    });

</script>

</body>




Is This A Good Question/Topic? 0
  • +

Replies To: Hide Div With ASP.Net Button Click and jQuery

#2 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 28 July 2010 - 12:05 AM

You could try doing something like this:
<asp:Button ID="ButtonAlert" runat="server" Text="Alert" onclick="javascript:someFunction();" />

<script type="text/javascript">
function someFunction(){
     $("#toolpanel").hide();
}
</script>



Try that and see if it works.
Was This Post Helpful? 0
  • +
  • -

#3 jbeme  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 93
  • Joined: 30-October 09

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 30 July 2010 - 07:26 PM

I do not use Asp.net but I can give you a solution using javascript.
<script language="javascript">
function showtext() {
document.getElementById("textstuff").innerHTML="<button onclick='removetext()'>click to remove</button>";
}
function removetext() {
document.getElementById("textstuff").innerHTML="";
}
</script>
<button onclick="showtext()">click to show</button>
<div id="textstuff"></div>


As you can see this builds the text area with javascript, creating a button that removes itself. You can use this to build and remove your ASP.net query calls.
Was This Post Helpful? 0
  • +
  • -

#4 fsloke  Icon User is offline

  • D.I.C Regular

Reputation: 25
  • View blog
  • Posts: 412
  • Joined: 19-December 07

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 30 July 2010 - 08:33 PM

Hi Brother,

Please include the JQUERY library.

<html>
<body>
    <form id="form1" runat="server">
    <div id="toolpanel">
    Tool Panel
    </div>
    <div id="container">
    Container
    </div>
    <input type="button" id="ButtonAlert"/>
    </form>
 <script type="text/javascript" src="jquery-1.4.2.js"></script>  
<script type="text/javascript">
    $(document).ready(function() {
    $('#ButtonAlert').click(function() {
            //alert("We got here.");
            $('#toolpanel').hide();


        });

    });

</script>

</body>
</html>



Thanks
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3476
  • View blog
  • Posts: 10,009
  • Joined: 08-June 10

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 31 July 2010 - 02:12 AM

View Postjbeme, on 31 July 2010 - 02:26 AM, said:

I do not use Asp.net but I can give you a solution using javascript.
<script language="javascript">
function showtext() {
document.getElementById("textstuff").innerHTML="<button onclick='removetext()'>click to remove</button>";
}
// 
</script>
<button onclick="showtext()">click to show</button>
<div id="textstuff"></div>


if you have the <button>s inside a <form>, they will submit it. (default type: submit)
Was This Post Helpful? 0
  • +
  • -

#6 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 31 July 2010 - 11:54 PM

View Postfsloke, on 31 July 2010 - 02:33 AM, said:

Please include the JQUERY library.


He could have included that in the <HEAD> part of his page, he only supplied us with the <BODY> part.
Was This Post Helpful? 0
  • +
  • -

#7 neehar100  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 25-July 11

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 25 July 2011 - 07:47 AM

Hi you cannot use two click functions at the same time.

When you write Jquery you are writing $('button').onclick(function(){ which is similar to onclick="Button_Click" in asp.
so server will accept only one function not two functions.

use this code <input type=button value="Button"/> then it will work
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3476
  • View blog
  • Posts: 10,009
  • Joined: 08-June 10

Re: Hide Div With ASP.Net Button Click and jQuery

Posted 25 July 2011 - 08:06 AM

View Postneehar100, on 25 July 2011 - 04:47 PM, said:

Hi you cannot use two click functions at the same time.

When you write Jquery you are writing $('button').onclick(function(){ which is similar to onclick="Button_Click" in asp.
so server will accept only one function not two functions.

both wrong.

you can assign more than one function to a click event (though they are executed consecutively) cf. "Event Listeners"

and jQuery does allow you to define two functions (which is done through the click() method, btw.)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1