Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET jQuery
Hi
 
I am new to Jquery.
 
In my application there is one page say default.aspx,it has master page applied to it.
in default.aspx 2 div controls are there(div1,div2).
div1 is visible and div2 is invisible
Now when i click on a button in div1 then i want to make div1 visibility to false
and div2 visibility to true.
I tried this code.
 
<script src="jquery/jquery.js" type="text/javascript"></script>
 
   <script type="text/javascript">
  $(document).ready(function(){
    $("#button1").click(function(){
      $("#div1").hide();
      $("#div2").show();
    });
  });
  </script>
 
with this div1 is hiding div2 is visible for a moment and then again div1 is visible and div2 is becoming invisible.
 
to avoid that effect i put
return false;
after this line div2.show()
 
Now my problem is I wrote some code in button1 click event which is not getting fired.
 
In which way i need to do this
please help me.
 
Thanks for help in advance
 

EDIT ---------------------------------------
 
This is my code
 
.aspx page
-----------
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="jquery/jquery.js" type="text/javascript"></script>
 
     <script type="text/javascript">
   $(document).ready(function(){
      $('#<%=btnEdit.ClientID %>').click(function(){
        $('#<%=divAddress.ClientID %>').hide();
        $('#<%=divEdit.ClientID %>').show();
        return false;
      });
      $('#<%=btnCancel.ClientID %>').click(function(){
        $('#<%=divAddress.ClientID %>').show();
        $('#<%=divEdit.ClientID %>').hide();
        return false;
      });
   });
    </script>
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" runat="Server">
<div id="divAddress" runat="server" style="border-style: none; padding-left: 10px">
                <table border="0" width="100%" cellpadding="0" cellspacing="0">
 
                    <tr>
                        <td align="left">
                            <asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="btn_bgimg" OnClick="btnEdit_Click" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 20%" align="left" class="gen-td">
                            <asp:Panel ID="panel1" runat="server" Width="70%" CssClass="panelstyle">
                                <table width="100%">
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblName" runat="server" Text="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblAddress1" runat="server" Text="" />
                                        </td>
                                    </tr>
 
                                </table>
                            </asp:Panel>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
 
           <div id="divEdit" runat="server" class="divstyle" style="display:none">
                <table border="0" width="100%" cellpadding="0" cellspacing="0">
 
                    <tr>
                        <td style="width: 20%" align="left" class="gen-td">
                            Name :
                        </td>
                        <td align="left" class="gen-td">
                            <asp:TextBox ID="txtName" Width="200px" CssClass="text_bgimg" runat="server" BorderStyle="Groove"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="gen-td">
                            Address :
                        </td>
                        <td align="left" class="gen-td">
                            <asp:TextBox ID="txtAddress1" Width="200px" CssClass="text_bgimg" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center" class="gen-td">
                            <asp:Button ID="btnSave" CssClass="btn_bgimg" runat="server" Text="Save" />
                            &nbsp; &nbsp;
                            <asp:Button ID="btnCancel" CssClass="btn_bgimg" runat="server" Text="Cancel"
                                onclick="btnCancel_Click" />
                        </td>
                    </tr>
                </table>
            </div>
 

 
 

 
aspx.cs
-------
 
protected void btnEdit_Click(object sender, EventArgs e)
   {       
       txtName.Text = "abcdef";
       //here i want to retrieve some data from database.

   }
Posted 19-Oct-11 21:49pm
P.Salini14.9K
Edited 20-Oct-11 2:19am
v6
Comments
Anuja Pawar Indore at 20-Oct-11 7:23am
   
Remove clientID its not required
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

2 Ways i can suggest:
 
1) Remove all jQuery code and show/hide your Div at server side only, however your div is having runat="server" attribute
 
protected void btnEdit_Click(object sender, EventArgs e)
   {
    divEdit.visible= true;
    divAddress.visible= false;
    txtName.Text = "abcdef";
   }
 
protected void btnCancel_Click(object sender, EventArgs e)
   {
    divEdit.visible= false
    divAddress.visible= true;
   }
 
2) Still if you want to use Jquery (However doing so will look foolish Smile | :) , not the best way at all ), the code you have wrote will work until your server side click event triggers.. and the show/hide state of DIVs will be lost after postback.. so you have to set the status somewhere and get it back after the postback... You can use Hiddenfield to set the current status and then set div status accordingly
 
See below code..
 
<input type="hidden" id="hdStatus" value="0" />
 
$(document).ready(function(){
 
Var hdStatus= $("#hdStatus").value();
 
if(hdStatus==0)
{
        $('#<%=divAddress.ClientID %>').show();
        $('#<%=divEdit.ClientID %>').hide();
}
else
{
        $('#<%=divAddress.ClientID %>').hide();
        $('#<%=divEdit.ClientID %>').show();
}
 
  $('#<%=btnEdit.ClientID %>').click(function(){
        $("#hdStatus").value("1");
        $('#<%=divAddress.ClientID %>').hide();
        $('#<%=divEdit.ClientID %>').show();
      });
  $('#<%=btnCancel.ClientID %>').click(function(){
        $("#hdStatus").value("0");
        $('#<%=divAddress.ClientID %>').show();
        $('#<%=divEdit.ClientID %>').hide();
      });
   });
 

Hope this will help
 
[Please "Accept Answer" if it helps you]
  Permalink  
v3
Comments
CodeHelper_PS at 20-Oct-11 8:18am
   
Thanks for your suggestions.
I know method1 suggested by you.
I am trying to learn jquery thats why i wrote the posted code.
Now i followed your method2
but the server side button click event is not getting fired,
and once the postback occurs the current status is not the same even though hidden field is there.
kiran dangar at 20-Oct-11 8:57am
   
Ohh yes... you have to remove "return false"
kiran dangar at 20-Oct-11 8:58am
   
I have updated Solution... have a try..
kiran dangar at 20-Oct-11 9:01am
   
You can also try replacing <input> hidden field with <asp:hiddenfield> control.. you can use any of these...
CodeHelper_PS at 21-Oct-11 1:36am
   
Hi kiran
i have replaced input tag with asp control.
now removed return false.
now when i click on edit button the click event is getting fired every time,
 
but as i said in the question
now div1 is invisible and div2 is visible only for a moment and then div1 is becoming visible and div2 becoming invisible.
 
and after postback jquery is not working.
 

Finally what my question is
 
Can we do some functionality of a button in jquery and some functionality in server click event at a time or not
CodeHelper_PS at 21-Oct-11 1:39am
   
My 5
Thanks for your valuable suggestions.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Why are you placing your button click on document.ready, is it intentionally, this should work
 
$('#btnShowMore').click(function () {
$('#div1').show();
$('#div2').hide();
});
  Permalink  
v2
Comments
CodeHelper_PS at 20-Oct-11 3:35am
   
I am placing it in document.ready so that the script will work after document is loaded completely.
CodeHelper_PS at 20-Oct-11 3:44am
   
I tried the code by removing document.ready() but it is not working.i am not even getting any error.
Anuja Pawar Indore at 20-Oct-11 6:03am
   
are you making it visible false or true from server side?
CodeHelper_PS at 20-Oct-11 6:44am
   
i am not making visibility false from server side
i just used display:none for div2 inorder to make div2 invisible at the time of page-load.
Anuja Pawar Indore at 20-Oct-11 6:55am
   
Is it possible for you to give the complete code, will fix it fast
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

My friend please don't use Server side control use the input html control you will get the result what you are looking for.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

try with this:
 
$(document).ready(function(){
    $("#button1").click(function(e){
      $("#div1").hide();
      $("#div2").show();
      e.preventDefault();
    });
  });
 
e.preventDefault() would well, prevent the default click behavior of a server side button control which is to postback and this will cause the jquery not to show the div2.
 
Also, if you are using ASP.NET server button control, then you might want to set the ClientIDMode property of the button to "static" before using it in jquery coz remember, jquery runs on client side so the ID "button1" does not have any existence but there is an implicit Client ID which looks like "ctl$001...". By making the ClientIDMode static, you will be able to use the "button1" even on client side.
 
Hope this helps
 
Cheers...
  Permalink  
v2
Comments
CodeHelper_PS at 20-Oct-11 7:16am
   
as per my knowledge
Prevent default means it prevents the execution of default event
but i also want to execute click event of asp button
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

No jQuery is required in your case
 
as you have server side click event, just apply this
protected void btnEdit_Click(object sender, EventArgs e)
   {
    divEdit.visible= true;
    divAddress.visible= false;
    txtName.Text = "abcdef";
   }
 
protected void btnCancel_Click(object sender, EventArgs e)
   {
    divEdit.visible= false
    divAddress.visible= true;
   }
Remove all JQuery method
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

Well, I would generally do it in 2 different steps, rather than having only one button try to talk to jquery and the server at the same time. You can either use another button to do the actual server side processing and keep the current one only for client side hiding/showing OR you can totally get rid of jquery and do everything server side. Since its not a lot of processing, I imagine you would be fine doing everything on server side.
 
Looks like trying to achieve what you are trying to using the way you are trying to, often ends being unpretty: http://stackoverflow.com/questions/7590076/how-can-a-clicked-asp-net-button-open-jquery-dialog-and-then-resume-default-when[^]
 
Hope this helps...
Cheers...
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 7

Your button has runat value "server", i.e. runat="server", which basically submit your form to server. and reload it.
to prevent that you have to prevent your default event of your button. try this simple code.
 

$(function () {
             $("#<%=divEdit.ClientID %>").hide();
 
             $('#<%=btnEdit.ClientID %>').click(function (e) {
                 e.preventDefault();
                 $("#<%=divAddress.ClientID %>").hide();
                 $("#<%=divEdit.ClientID %>").show();   
             });
             $('#<%=btnCancel.ClientID %>').click(function () {
                 e.preventDefault();
                 $("#<%=divAddress.ClientID %>").show();
                 $("#<%=divEdit.ClientID %>").hide();
             });
         });
 
Its working fine i have tested it. Smile | :)
Thnks,
Deepak
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web02 | 2.8.1411022.1 | Last Updated 5 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100