All geek questions in one place

JQuery Dialog Open event does not fire

I have an aspx page with two panels having the same class, which should work like a dialog box. I am trying to open a dialog using a dialog ("open"), but it does not work. The following is a snippet of code.

<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 checked that the element that points to the dialog was correctly deferred. Any solutions so I can get it to work?

+4
source share
2 answers

In general, your code should look like this:

 $('.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 check it out here .

Why? Well, when you call .dialog() , it wraps this <div> in a different set of elements, but more importantly, it moves these elements to the end of <body> , so they are no more. In the above example, we find panels that come with images and keep a link to them until they are moved.

As an aside, you should remove this id="tr" from your code, duplicate identifiers are just a problem! (and invalid HTML), use the class in these situations.

+8
source

It just turned out that you can also bind a function to the open event by doing:

 yourDialog.bind("dialogopen", function(event, ui) { //your code here });
+5
source

Source: https://habr.com/ru/post/1337657/

More articles:


All Articles