How to execute some javascript code when Document/Window ready/onLoad

[thecyberzone]

Suppose in a form a panel '#main' content is loaded by executing following code :

Code:

$('#main').panel('refresh','contents.html');

Now this contents.html contains 2 easyui-datebox. I want to initialize those box with some date (not current date). Where I have to put javascript code?

If I put is this way it never executes.

Code:

$(function(){
	var dt = new Date();
	var y = dt.getFullYear();
    $('#year').numberspinner({
        min: 2015,
        max: 2030,
        value: y,
        editable: false
    });
	var Y1 = $('#year').numberspinner('getValue');
	var Y2 = parseInt(Y1)+1;
	var dfrom = '04' + '/' + '01' + '/' + Y1  ;
	var dto = '03' + '/' + '31' + '/' + Y2  ;
        alert(dfrom+'-'+dto);
        $('#dtFrom').datebox('setValue',dfrom);    //<- Enabling this line restricts rending the entire panel
        $('#dtTo').datebox('setValue',dto);          //<- Enabling this line restricts rending the entire panel
});

But if I put it directly under <script></script> tag it executes as follows:

Code:

var dt = new Date();
	var y = dt.getFullYear();
    $('#year').numberspinner({
        min: 2015,
        max: 2030,
        value: y,
        editable: false
    });
	var Y1 = $('#year').numberspinner('getValue');
	var Y2 = parseInt(Y1)+1;
	var dfrom = '04' + '/' + '01' + '/' + Y1  ;
	var dto = '03' + '/' + '31' + '/' + Y2  ;
        alert(dfrom+'-'+dto);
        $('#dtFrom').datebox('setValue',dfrom);    //<- Enabling this line restricts rending the entire panel
        $('#dtTo').datebox('setValue',dto);          //<- Enabling this line restricts rending the entire panel

But if I initialize those datebox, rendering of datebox is not done.

Please show me the correct way to initialize datebox in the contents.htm when it will be loaded under any panel using refresh method.

[jarry]

Listen to the 'onLoad' event on the panel to retrieve the datebox components that loaded from 'contents.html' page.

Code:

$('#main').panel({
	onLoad: function(){
		$('#dtFrom').datebox('setValue',dfrom);
		...
	}
})

You also can pass your parameters to the content page and initialize the datebox component's value on the 'contents.html' page.

Code:

<input id="dtFrom" class="easyui-datebox" data-options="
	value: ...
	">

[jahangir]

Please try to put some delay in your code.

Code:

setTimeout(function(){
	$('#dtFrom').datebox('setValue',dfrom);    
        $('#dtTo').datebox('setValue',dto);  
}, 100);

[thecyberzone]

Basically listening onLoad event on the panel is done in main panel holder html page where from these content html is loaded dynamically as per menu selected by user (I use panel refresh method). So it is not convenient to listen onLoad in main html and then initialize controls in contact html within panel, because there are so many forms are there that will be called thru menu selection, rather it is easy to put/call JavaScript code within panel's content html.

I thought that JavaScript jQuery onLoad like $(function (){...}); block may be executed within target html that will be loaded within panel, but unfortunately that is not working everywhere.

I want to put some initialization code to initialize dtFrom & dtTo easyui-datebox to beginning and end date of current financial year. My question is where I have to put that code within panel's content html tile.

Listen to the 'onLoad' event on the panel to retrieve the datebox components that loaded from 'contents.html' page.

Code:

$('#main').panel({
	onLoad: function(){
		$('#dtFrom').datebox('setValue',dfrom);
		...
	}
})

You also can pass your parameters to the content page and initialize the datebox component's value on the 'contents.html' page.

Code:

<input id="dtFrom" class="easyui-datebox" data-options="
	value: ...
	">

[thecyberzone]

Thanks and will try & let you know.

Please try to put some delay in your code.

Code:

setTimeout(function(){
	$('#dtFrom').datebox('setValue',dfrom);    
        $('#dtTo').datebox('setValue',dto);  
}, 100);

[thecyberzone]

And moreover how to put document onready code within panel's content html?

Putting jQuery $(function (){...}); method within panel's content html <script>...</script> block never executed when it is loaded within any panel by using refresh method.

[jahangir]

Please check attached example files.


https://we.tl/t-hjsKpIGtuz

[thecyberzone]

And it works successfully, many many thanks.

Please try to put some delay in your code.

Code:

setTimeout(function(){
	$('#dtFrom').datebox('setValue',dfrom);    
        $('#dtTo').datebox('setValue',dto);  
}, 100);

[thecyberzone]

I have checked the same code before, individually for example this type of code with document.ready jQuery function works fine, but in a large project having numerous forms and panels, this $(document).ready(function () { ... }); style never executed. But timeout tricks works successfully.

Please check attached example files.


https://we.tl/t-hjsKpIGtuz