Menu
I have a aspx page with two panels having the same class, which should function as dialog box. I am trying to open the dialog box using dialog("open") but it doesn't seem to work. Below is the code snippet.
<script type="text/javascript">
$(document).ready(function() {
$(".descPanel").dialog({ autoOpen: false,
open: function() {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
$('.image').mouseover(function() {
$($(this).parent()).children('.descPanel').dialog('open');
});
});
</script>
HTML Strcuture:
<form id="form1" runat="server">
<div>
<table>
<tr id="tr">
<td></td>
<td></td>
<td>
<asp:Image runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
<asp:Panel runat="server" ID="mypanel" CssClass="descPanel">
<asp:Label runat="server" ID="mylabel" CssClass="label" Text="hello"></asp:Label>
</asp:Panel>
</td>
</tr>
</table>
<table>
<tr id="tr">
<td></td>
<td></td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
<asp:Panel runat="server" ID="Panel1" CssClass="descPanel">
<asp:Label runat="server" ID="Label1" CssClass="label" Text="hello1111"></asp:Label>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
I have verified that the element that points to the dialog has been reffered correctly. Any solutions so that I can get it working?
808
Overall your code should look like this instead:
$('.image').each(function() {
var panel = $(this).siblings('.descPanel');
$(this).mouseover(function() {
panel.dialog('open');
});
});
$(".descPanel").dialog({
autoOpen: false,
open: function() {
$(this).siblings(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
You can test it out here.
Why? Well when you call .dialog() it wraps that <div> in another set of elements, but more importantly it's moves those elements to the end of the <body>, so they're not there to find relatively anymore. In the above we're finding the panels that go with the images and storing a reference to them before they're moved.
As an aside, you should remove that id="tr" from your code, duplicated IDs are only trouble! (and invalid HTML), use a class in those situations.
56
Just found out that you can also bind a function to the open event by doing:
yourDialog.bind("dialogopen", function(event, ui) {
//your code here
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
