Make div visibility false using jquery

Question

0.00/5 (No votes)

See more:

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.

JavaScript

<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
-----------

XML

<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>

XML

<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
-------

C#

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

   }

Posted 19-Oct-11 20:49pm

P.Salini

Updated 20-Oct-11 1:19am

v6

Add a Solution

Comments

Anuja Pawar Indore 20-Oct-11 7:23am

Remove clientID its not required

8 solutions

Add a Solution

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

kiran dangar · Answer 1 · 2011-10-20T01:38:00

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

C#

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 :), 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" />

JavaScript

$(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]

Harry Binn · Answer 2 · 2015-02-23T05:09:00

Had the same issue. Solved it with this code.

var _visible = ($('#elementID').css('visibility') == 'hidden') ? '' : 'visibility:hidden';      
      $('#elementID').attr('style',_visible);

The other possibility is to hide the element you want hidden inside another element that has a specified width.

<div style="display:inline-block; width:200px">
         <div id="elementID">Hide this</div></div>

then you can use the JQuery .toggle or the .hide and .show on the 'elementID' without affecting spacing on the orginal document.

$('#elementID').toggle()

Anuja Pawar Indore · Answer 3 · 2011-10-19T21:30:00

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();
});

Posted 19-Oct-11 21:30pm

Anuja Pawar Indore

Updated 19-Oct-11 21:31pm

v2

Comments

P.Salini 20-Oct-11 3:35am

I am placing it in document.ready so that the script will work after document is loaded completely.

P.Salini 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 20-Oct-11 6:03am

are you making it visible false or true from server side?

P.Salini 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 20-Oct-11 6:55am

Is it possible for you to give the complete code, will fix it fast

AlokZanwar1985 · Answer 4 · 2011-10-20T00:36:00

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.

Posted 20-Oct-11 0:36am

AlokZanwar1985

I.explore.code · Answer 5 · 2011-10-20T00:51:00

try with this:

JavaScript

$(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...

Anuja Pawar Indore · Answer 6 · 2011-10-20T01:52:00

No jQuery is required in your case

as you have server side click event, just apply this

C#

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

I.explore.code · Answer 7 · 2011-10-20T02:22:00

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...

deepak.m.shrma · Answer 8 · 2012-11-05T17:52:00

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.

JavaScript

$(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. :-)
Thnks,
Deepak

Make div visibility false using jquery

8 solutions

Solution 4

Solution 9

Solution 1

Solution 2

Solution 3

Solution 5

Solution 6

Solution 7

Add your solution here

Preview 0

Make div visibility false using jquery

8 solutions

Solution 4

Solution 9

Solution 1

Solution 2

Solution 3

Solution 5

Solution 6

Solution 7

Add your solution here

Preview 0

Existing Members

...or Join us