Why Div is not visible on button click

Question

5.00/5 (1 vote)

See more:

Hello Friends,
in my webpage i set visibility of a div hidden and i want to show it on button click,so i am writing a jquery code for it. but some how it is not working.
My asp code is

ASP.NET

<asp:Button ID="btnGenerate" CssClass="button" runat="server" Text="Generate" OnClick="btnGenerate_Click" />
<div id="print" style="width: 80%; margin-removed 10%; margin-removed 20px;visibility:hidden;">                
                <input type="button" id="btnPrint" class="button" value="Print" onclick="printDiv('ReportDiv')"/>
</div>

and my jquery code is:

JavaScript

<script>
    $(document).ready(function () {
        $("#btnGenerate").click(function () {
            $("#print").css("visibility", "visible");
        });
    });
</script>

please help me to fix this issue. Thanks

Posted 5-Mar-14 0:42am

Amit Kumar143

Updated 5-Mar-14 0:46am

v2

Add a Solution

Comments

Amalraj Ramesh 5-Mar-14 6:47am

change the div id like btnPrint
or
$("#print").css("visibility", "visible");

5 solutions

Solution 2

XML

Hi Amit,
   Please use  <input type="button" id="btnGenerate" class="button" value="Generate" /> instead of <asp:Button ID="btnGenerate" CssClass="button" runat="server" Text="Generate" OnClick="btnGenerate_Click" />

    In your code there is no any css or javascript error but do you know about Server Side Controls.There are mainly two types of controls First one is HTML control and second is ASP.NET controls.
    ASP.Net controls has the server side attributes that means when you use any server side control its getting postback event so that due to postback your javascript dosen't work.

Posted 5-Mar-14 1:58am

Naresh.Thakor

Solution 1

try this

<script>
$(document).ready(function () {
$("#btnGenerate").click(function () {
$("#Print").css("visibility", "visible");
});
});
</script>

Posted 5-Mar-14 0:44am

Amalraj Ramesh

Updated 5-Mar-14 0:46am

v2

Solution 5

What is the Purpose of your Function 'printDiv('ReportDiv')'? Is it use for Display that div.

Posted 6-Mar-14 1:45am

k07

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Murali0195 · Accepted Answer · 2014-03-05T23:59:00

Hi...
See this one!.

C#

<script>
$(document).ready(function () {
                $("#btnGenerate").click(function () {
                    $("#print").show();
                });
            });
</script>

XML

<asp:Button ID="btnGenerate" CssClass="button" runat="server" Text="Generate" OnClick="btnGenerate_Click" />
<div id="print" style="width: 80%; margin-removed 10%; margin-removed 20px;visibility:hidden;">
                <input type="button" id="btnPrint" class="button" value="Print" onclick="printDiv('ReportDiv')"/>
</div>

Thank u.

anil pathak · Accepted Answer · 2014-03-06T00:22:00

Hi Friend,

You have two option to show the div.

1- Use onclientClick event & call you javascript function to show the div. And Use IsPostBack false in your page load event.

2- you make div as server control like runat="server". And make visible hide / show in your c# code.

3- Use return false like in below code but you can not call your server side event.

XML

<script>
$(document).ready(function () {
                $("#btnGenerate").click(function () {
                    $("#print").show();
return false;
                });
            });
</script>

Thanks