Click here to Skip to main content
15,171,729 members
Please Sign up or sign in to vote.
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
Updated 14-Dec-14 18:31pm
v3
Comments
   
Check the Developer Tool Console first.
King Fisher 12-Dec-14 13:20pm
   
didn't sleep?
   
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

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;
});
   
v2
Comments
King Fisher 13-Dec-14 12:05pm
   
hi Tadit ,I'm getting this Error
TypeError: $(...).dialog is not a function
$("#dialog").dialog({
   
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
   
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
   
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 :)
King Fisher 14-Dec-14 23:32pm
   
I have posted my Page source
   
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
   
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
   
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
   
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; ?
   
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
   
Most welcome buddy. :)
King Fisher 15-Dec-14 2:52am
   
O God Thanks a lot dude .it works fine :) :)
   
Glad to hear that. :) Most welcome.
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>
   
Comments
Richard Deeming 12-Dec-14 11:56am
   
You can use .ClientID inside a <%= ... %> block.
   
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.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900