Print Page - dialog gets added to DOM multiple times

Title: dialog gets added to DOM multiple times
Post by: eggbert on July 31, 2011, 10:51:01 AM

Hi,

I have a panel that I load with the href property, in the panel html I also have a easyui-dialog with a form in it. However, this causes some strange behavior.

When I load the panel, the dialog gets copied to the bottom of the DOM, right above </body>, and it will keep getting duplicated on each panel refresh. If I submit the form then, with $('#fm').form("submit"), the form will get submitted repeatedly for each #fm that appears several times in the DOM.

Is this a bug, or something I am not understanding?

Thanks.

Title: Re: dialog gets added to DOM multiple times
Post by: eggbert on July 31, 2011, 06:23:13 PM

Below is a small example of this. The window in the panel is getting appended to the bottom of the dom, but continuously reloading the panel creates more windows/forms, they even have the same ID.

index.html

Code:

<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript">
            $(function(){                
                 //this works with live(), but is a work-around to the real problem...
                 //$('#dlg-ok-button').live("click", function(){submitForm();});                 
                 $('#p').panel({
                    onLoad : function() {
                        //rebinding button to click here submits all the forms in the dom !!!!
                        $('#dlg-ok-button').click(function() {submitForm();});
                        var numForms = $('form').length;
                        $('#num-forms').text("Number of forms in the DOM: " + numForms);
                    }
                });               
            });  
            
            function reloadPanel() {                
                $('#p').panel("refresh", "panel.html");        
            }
            
            function submitForm() {
                $('#fm').form("submit",{
                    url: "dopost.php",                    
                    success: function(result){
                        alert(result);
                        $('#dlg').dialog("close");
                    }
                });
            }
            
            function showDialog() {
                $('#dlg').dialog('open').dialog('setTitle','Test Dialog');
            }
        </script>
    </head>
    <body>
        <div>
            <div id="p" class="easyui-panel" title="Test Panel" 
                 style="width:500px;height:150px;padding:10px;"  
                 iconCls="icon-save" href="panel.html">  
            </div>
            <br />
            <a href="#" id="btn" class="easyui-linkbutton" onclick="reloadPanel();">Reload Panel</a>  
            <span id="num-forms"></span>
        </div>
    </body>
</html>

panel.html

Code:

<a href="#" id="show-dlg-button" class="easyui-linkbutton" onclick="showDialog();">Open Dialog</a>
<div id="dlg" class="easyui-dialog" closed="true" modal="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        Enter your name<br />
        <input type="text" name="name">    
    </form>
</div>
<div id="dlg-buttons">  
    <a href="#" id="dlg-ok-button" class="easyui-linkbutton">OK</a>  
</div>

dopost.php

Code:

<?php
    echo "Success";
?>

Title: Re: dialog gets added to DOM multiple times
Post by: eggbert on July 31, 2011, 07:55:42 PM

I am also noticing that various other components in a panel get appended to the bottom of the DOM on a refresh. combo boxes, etc. If you keep refreshing it, over time the DOM becomes huge.

Should not a panel "clean up" after its self before reloading?

Title: Re: dialog gets added to DOM multiple times
Post by: stworthy on July 31, 2011, 08:59:27 PM

In you panel container:

<div id="p" class="easyui-panel" title="Test Panel"
style="width:500px;height:150px;padding:10px;position:relative"
iconCls="icon-save" href="panel.html">
</div>

Set 'inline' property to true for the dialog that defined in panel.html:

<div id="dlg" class="easyui-dialog" closed="true" modal="true" inline="true" buttons="#dlg-buttons">
<form id="fm" method="post">
Enter your name<br />
<input type="text" name="name">
</form>
</div>

The 'inline' property of dialog is set to false by default, this will create the dialog and move it to body. To make the dialog stay in the old position, please set the 'inline' property to true.

Title: Re: dialog gets added to DOM multiple times
Post by: eggbert on July 31, 2011, 09:25:59 PM

Thanks stworthy,

I actually did try playing around with the inline option, but then the dialog and its modality is constrained to it's parent panel only. I kind of want the modal dialog to block the whole browser window. And it gets cut off if the panel is not as large as the dialog. (see attached screen shot, tried playing with zindex, but I guess it is overflow hidden?)

Title: Re: dialog gets added to DOM multiple times
Post by: eggbert on July 31, 2011, 10:40:38 PM

I have found that if I call $('#dlg').dialog("destroy") before refreshing the panel, it does indeed remove the dialog from the dom.

I would say this should be the default behaviour when refreshing a panel. There are a lot of other components that end up in the body, like the date picker and combo box (if they are not set to inline).

Is there some way to know which components originated from which panel? Maybe a hook in the easyloader, that could keep a relation or something, so that when a panel is refreshed the components added to the bottom of the DOM get automatically destroyed?

Sorry for all the questions. I am really enjoying JQuery Easy UI. It is the best UI library for JQuery I've seen (even better than JQueryUI imho) and it seems to have a nice solid design as well!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: eggbert on July 31, 2011, 10:51:01 AM