Print Page - avoid flickering in refresh panel

Title: avoid flickering in refresh panel
Post by: crosemffet on June 06, 2016, 05:21:09 AM

hello and thanks again for your support.
after certain operation I need to refresh the panel content.
actually I'm using:
$('#p_central').panel('refresh','myLocations.php');
works like a charm, but the problem is refresh operation produces a flickering in the content.
any way to refresh smoothly..?

Title: Re: avoid flickering in refresh panel
Post by: jarry on June 06, 2016, 06:47:55 PM

The code below shows how to custom the loading action.

Code:

$('#p').panel({
	onBeforeLoad: function(param){
		var target = this;
		var state = $.data(target, 'panel');
		var opts = state.options;
		state.isLoaded = false;
		opts.loader.call(target, param, function(data){
			var content = opts.extractor.call(target, data);
			$(target).panel('clear');
			$(target).html(content);
			$.parser.parse($(target));
			opts.onLoad.apply(target, arguments);
			state.isLoaded = true;
		}, function(){
			opts.onLoadError.apply(target, arguments);
		});
		return false;
	}
})

Title: Re: avoid flickering in refresh panel
Post by: crosemffet on June 08, 2016, 04:18:43 AM

jarry, thanks for your reply. it works like a charm, the refresh go smoothly, the only problem is the panel title and panel icon breaks. I can't understand the reason. I'm uploading 2 images, the first is before using your script, and the second one is after using your script. you can notice the problem in the panel. maybe you can help me to find a solution.
here's my code, in case you need it to understand the situation,

<div id="p_north" data-options="region:'north',href:'_homeNorth.php'" style="height:40px;overflow:hidden"></div>
<div id="p_south" data-options="region:'south',collapsible:false,loadingMessage:'',href:'_homeSouth.php'" style="height:30px;overflow:hidden"></div>
<div id="p_west" data-options="region:'west',collapsible:false,loadingMessage:'',href:'_homeWest.php'" title="'.$textotg[50].'" style="width:300px;overflow:hidden"></div>
<div id="p_central" data-options="region:'center',title:'Main Title',loadingMessage:'',href:'_homeCentral.php',tools:[{iconCls:'icon-reload',handler:function(){$('#p_central').panel('refresh');}}]" style="overflow:hidden"></div>

thanks you in advance,

Title: Re: avoid flickering in refresh panel
Post by: jarry on June 09, 2016, 01:54:54 AM

What is your 'myLocations.php' page? You may need to provide a simple example or a live link to demonstrate your issue.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: crosemffet on June 06, 2016, 05:21:09 AM