Jquery Dialogbox in webforms

Question

0.00/5 (No votes)

See more:

I used this
http://jqueryui.com/dialog/#animated[^]

to show Animated Dialog Box

C#

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
    $('#<%=dialog.ClientID %>').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        $('#<%=opener.ClientID %>').click(function() {
        $('#<%=dialog.ClientID %>').dialog("open");
        });
    });
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div id="dialog"  runat="server" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 <asp:Button ID="opener" runat="server" Text="Button" />
</asp:Content>

but nothing happend on my Screen .did i missed anything ?

Edited:

this is my page Source form firebug Script tab

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
    $(function() {
    $('#ctl00_ContentPlaceHolder1_dialog').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        $('#ctl00_ContentPlaceHolder1_opener').click(function() {

        $('#ctl00_ContentPlaceHolder1_dialog').dialog("open");
        });
    });
</script>
</head>
<body>
    <form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTA5NTQwODU3ZGTjHXEnTCPZkag2gXKOdIjs9hJlOg==" />
</div>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKHjK/pDQKC1MeGC8nJ+J/ArkUcMIPb9FpPaV9jjboo" />
</div>
    <div>
        
   
    <div id="ctl00_ContentPlaceHolder1_dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

    <input type="submit" name="ctl00$ContentPlaceHolder1$opener" value="Button" id="ctl00_ContentPlaceHolder1_opener" />

 



    </div>
    </form>
</body>
</html>

Posted 12-Dec-14 2:20am

King Fisher

Updated 14-Dec-14 17:31pm

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 8:38am

Check the Developer Tool Console first.

King Fisher 12-Dec-14 13:20pm

didn't sleep?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 13:36pm

Not yet. Tell me.

King Fisher 12-Dec-14 23:53pm

No errors but some warnings

King Fisher 12-Dec-14 23:58pm

I see something flicking at the Div but does't get the dialog box i checked with the alert('message'); and its worked .i thing Error might be at css

Chubby Ninja 12-Dec-14 12:31pm

I can't see where you've added <%=dialog.ClientID %> to any elements id attribute, nor <%=opener.ClientID %> - are you sure you are binding the javascript properly?

Have a look at your compiled source - $('#<%=dialog.ClientID %>') and $('#<%=dialog.ClientID %>') should have elements with the id's matching

King Fisher 12-Dec-14 13:11pm

I just modified the Control ID form that link

2 solutions

Solution 1

You can't use .ClientID in javascript. You need to give it the actual ID. Since you are using master pages the ID can get messed up.

Things I did:
Corrected javascript ids.
Added ClientIDMode="Static" to your button 'opener'.
Remove the runat tag from the 'dialog' div this isn't necessary.

VB

<asp:content id="Content1" contentplaceholderid="head" runat="Server" xmlns:asp="#unknown">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
    $('#dialog').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        $('#opener').click(function() {
        $('#dialog').dialog("open");
        });
    });
</script>
 
</link></link></asp:content>
<asp:content id="Content2" contentplaceholderid="ContentPlaceHolder1" runat="Server" xmlns:asp="#unknown">
 
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 <asp:button id="opener" runat="server" text="Button" clientidmode="Static" />
</asp:content>

Posted 12-Dec-14 5:46am

SteveyJDay

Comments

Richard Deeming 12-Dec-14 11:56am

You can use .ClientID inside a <%= ... %> block.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-14 13:10pm

He can use ClientID. No issue will happen as long as the script is inside the same page and not in any external js file.

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-12-12T18:25:00

Solution 2

I just created one fiddle - http://jsfiddle.net/taditdash/t614Lc7o/[^]

Just replaced asp Button with input button. Used jQuery 1.9.1 and jQuery 1.9.2. And it's working.

You should start debugging the code. But the files you used, I guessed the exact example is in jQuery official site. So, it should work.

Do one thing. Just put a debugger inside the click event by writing debugger; and then you will be able to debug the code inside the Firebug. Press F10 and go line by line.

Updated:

JavaScript

$('#<%=opener.ClientID %>').click(function () {
$('#<%=dialog.ClientID %>').dialog("open");
return false;
});

Posted 12-Dec-14 18:25pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 14-Dec-14 20:53pm

v2

Comments

King Fisher 13-Dec-14 12:05pm

hi Tadit ,I'm getting this Error
TypeError: $(...).dialog is not a function
$("#dialog").dialog({

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Dec-14 12:53pm

That means it cannot able to find the dialog function. Have you added the jQuery reference? You can see in the script window of developer tool, whether it is added or not.

King Fisher 13-Dec-14 13:23pm

sorry

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Dec-14 22:16pm

Haha. Please accept the answer then. Thanks. :)

King Fisher 14-Dec-14 3:29am

you can find the reference link in my Question ,I have the Link

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-14 4:00am

When you said sorry, I thought you did not refer. Hence, I assumed, issue is solved.

Anyways, did you check the script tab in developer tool? Is it showing all necessary scripts including the jQuery file?

King Fisher 14-Dec-14 7:57am

I'll check and let u know tommorrow boz I'm at Home buddy :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-14 11:04am

Cool. :)

King Fisher 14-Dec-14 23:32pm

I have posted my Page source

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 1:36am

That's ok. But as I said, did you debug?

King Fisher 15-Dec-14 1:45am

I set breakpoint at click event .I clicked the button event is fired well and it not moved to dialog event

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 1:50am

After dialog line, do you see any error in Console?

King Fisher 15-Dec-14 1:54am

I don't see any errors but The warning tabs have more warnings

King Fisher 15-Dec-14 1:50am

Its not moved to Dialog event when i click the event
$('#ctl00_ContentPlaceHolder1_opener').click(function() {
$('#ctl00_ContentPlaceHolder1_dialog').dialog("open");
});
its not moved to underlined line its just moved to Close bracket lines

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 2:27am

I think, I have to try this at my end. :)

King Fisher 15-Dec-14 2:37am

Can i show my Screen if you don't mind

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 2:49am

King, I tried and got the problem. You need to add one return false statement inside the click. The click would be like...


$('#<%=opener.ClientID %>').click(function () {
    $('#<%=dialog.ClientID %>').dialog("open");
    return false;
});

Try and let me know.

King Fisher 15-Dec-14 2:54am

why do we set return false; ?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 2:57am

If you don't, it will post back. That is what happening before. The div was showing for a second and then page is posting back again, so page resets.

By default, it takes true, so that it can post back the page, which is the default behaviour. If we want to do something in client side, we need to restrict the button to post back by setting "return false".

King Fisher 15-Dec-14 3:34am

its clear dude .thanks again

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 3:54am

Most welcome buddy. :)

King Fisher 15-Dec-14 2:52am

O God Thanks a lot dude .it works fine :) :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Dec-14 2:54am

Glad to hear that. :) Most welcome.