[SOLVED] Duplicate toolbar on reloading html inner data

[Juan Antonio Martínez]

Hi all!
I have a problem related with loading inner html content

My imdex.html page has a menu that in turn invokes $('#content').load(requestedPage);
Where "requestedPage" loads from server several easyui based windows, datagrids, and so:

Code:

/**
 * From main page:
 * .....
 * <div id="mycontent">
 *     <div id="contenido"></div>
 * </div>
 * ......
 * Load html contents from 'page' URL and set as contents on '#contenido' tag
 * @param page URL where to retrieve HTML data
 * @param title new page title
 */
function loadContents(page) {
	$('#mymenu').panel('collapse');
	$('#contenido').remove();
	$('#mycontent').html('<div id="contenido"></div>');
	$('#contenido').load(	
			page,
			{},
			function(response,status,xhr){
				if (status=='error') $('#contenido').load('/agility/client/frm_notavailable.php');
			}
		);
}

My problem comes with datagrid toolbars: when from the menu I load a previously loaded datagrid, toolbar appears duplicated
as seen at this image:


Looking at DOM tree, I can see that toolbar appears outside "mycontent" div, thus $('contenido').remove() has no effect, and next time I load page contents, a new toolbar with same id will be aggregated at the end of page... and displayed repeated on top of the datagrid

¿Any easy -and generic- way to solve this issue?
¿What's the right way to load an easyui-based subset of a page?

Thanks in advance
Juan Antonio

[Juan Antonio Martínez]

Perhaps this question is related to mine:

http://www.jeasyui.com/forum/index.php?topic=3361.0

Is the propossed solution still valid for latest easyui version ?

EDIT:
Just seen that latest easyui already implements .panel('clear').

So I changed my code:

Code:

....
<!--  CUERPO PRINCIPAL DE LA PAGINA (se modifica con el menu) -->
<div id="mycontent">
	<div id="contenido" class="easyui-panel" style="background:none" data-options="width:'100%',fit:true,border:false,"></div>
</div>
....

And:

Code:

function loadContents(page,title) {
	$('#mymenu').panel('collapse');
	$('#contenido').panel('clear');
	$('#contenido').panel('refresh',page);
	setHeader(title);
}

But still no luck. Code looks better and clean, but inner datagrid toolbars are duplicated on each reload

[Juan Antonio Martínez]

Ok: i've finally isolated the problem and solved in a very dirty (but effective) way:

When I invoke $('#tt').panel('refresh',page), I load several elements:
- a main window (normally a datagrid)
- several auxiliar dialogs ( either forms, or subgrids)

These auxiliar dialogs are loaded in "closed" state, and activated by mean of linkbuttons from main datagrid window's toolbar.
When I want to change main window (and also related auxiliar dialogs), I invoke $('#tt').panel('clear'), that effectively clears.... main panel, not auxiliar dialogs.
So next load of same window and their slaves, gives DOM with duplicated entries... and thus are shown on rendering

This bug only affects auxiliar datagrid toolbars and footers. Other components are silently overwritten and works as expected

My dirty solution: provide and store a list of auxiliar dialogs to be cleared on next reload of main page:

Code:

/**
 * Load html contents from 'page' URL and set as contents on '#contenido' tag
 * @param page URL where to retrieve HTML data
 * @param title new page title
 * @param slaves list of dialogs to .clear() on next loadContents
 */
var slaveDialogs = new Object();

function loadContents(page,title,slaves) {
	$('#mymenu').panel('collapse');
	$.each(slaveDialogs,function(key,val) { alert(val); $(val).dialog('panel').panel('clear'); } ); 
	slaveDialogs = (slaves===undefined)? {} : slaves;
	$('#contenido').panel('clear');
	$('#contenido').panel('refresh',page);
	setHeader(title);
}

This code works fine, but requires a global variable, explicit list of dialogs to be cleared, and restricts auxiliar windows to be declared as dialogs.

Any ideas for a better solution?
Juan Antonio