Member Avatar for prit005 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#btnclick").click(function(){
  $("#para").hide("slow");
  $("#btnclick").click(function(){
     $("#para").show("slow");
   });
  });
});
</script>

<body>
    <form id="form1" runat="server">
   <div id="para">
    <p>The form contains a button to place the final order. In this example, pressing the button returns a simple JavaScript alert(), depending on the contents of the order. In actual production, the order page could submit form data to a secondary page or code-behind class (ASP.NET Web Forms) for order processing. Alternatively, data could be formatted and sent directly back to an XML file or to a database using Ajax. Order processing could be done on the client- or server-side, depending on the technology implemented.
    </p>
    </div>
    <div id="btn">
     <asp:Button ID="Button1" runat="server" Text="Name" />
    </div>

i want to hide this paragraph but it is not work(not hide)
but when i use the <button id="btnclick">Click Me </button> this control it works fine but while using the asp.net server control it is not work
Please help me on this JQUERY

Edited by kvprajapati because: Added [code] tags.
  • 3 Contributors
  • 2 Replies
  • 894 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kvprajapati

Dani AI

Generated

The problem here is the difference between the server-side ID you write in ASP.NET and the actual client-side id the browser receives. ASP.NET often rewrites control ids (master pages, naming containers, UpdatePanel, etc.), so a jQuery selector like #btnclick will miss the rendered element. is pointing that out; inspecting the page with the browser devtools will show the real id.

Practical options (pick one):

  • Use the control's generated client id in your selector (works in all WebForms versions). Example:

    <script>
$(function(){
  $('#<%= Button1.ClientID %>').on('click', function(e){
    e.preventDefault();            // stop the postback if you want client-only behavior
    $('#para').toggle('slow');
  });
});
</script>

  • Force a stable id (ASP.NET 4+): set ClientIDMode="Static" on the asp:Button so the markup id matches the server ID.

    <asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Name" />

  • Select by class or a partial id if you prefer not to use server expressions: give the control a CSS class and select $('.js-hide-btn'), or use an attribute selector like $("[id$='Button1']") as a last resort.

A couple of important notes: an asp:Button triggers a postback by default, so client handlers can run briefly then the page reloads — use e.preventDefault() or a non-submit button if you only want client behavior. Also avoid binding a click handler inside another click handler (your posted script binds a click inside a click), which causes multiple handlers to accumulate; use a single handler and toggle or track state instead. These points echo 's HTML-button idea but preserve server-side control if needed.

Recommended Answers

All 2 Replies

Member Avatar for hericles

Obviously when you use the asp:Button its ID is set to "btnclick", right? Because it isn't in the code you posted above.

Member Avatar for kvprajapati

Try,

<asp:Button ID="Button1" runat="server" Text="Name" OnClientClick="return false;" />

Or Use html button

<input type="button" id="Button1" value="button"/>

PS:
Do wrap your programming code blocks within [code] ... [/code] tags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.