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

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);

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.

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);

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: ...
	">

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.

I am giving more input to this fault. When within right panel content the reference to the jquery and jeasyui is given and independently executed, then everything is executing fine, but when it is loaded by using refresh method of panel, and all jquery & jeasyui references are given in the header section of main.php, rendering of jeasyui is not working. Following is the header content placed in main.php :

Code:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>MTI TRAINING HISTORY</title>
	
	<script type="text/javascript" src="../tapp/ui/jquery.min.js"></script>
	<script type="text/javascript" src="../tapp/ui/jquery.easyui.min.js"></script>
	
	<script type="text/javascript" src="../tapp/ui/themes/jquery.easyui.theme.v1.js"></script> 
	<link rel="stylesheet" type="text/css" href="../tapp/ui/themes/ui-cupertino/easyui.css">
	<link rel="stylesheet" type="text/css" href="../tapp/ui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../tapp/ui/demo/demo.css">

 	
 	<link href="../tapp/fontawesome/css/fontawesome-all.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="custom.css"> 
</head>

The layout code is main.php, left panel is loaded from leftbar.php and clicking any option the right panel will be refreshed accordingly. Screenshot is attached with.

I cannot put datebox in any file that will be loaded in the right panel. This restricts rendering the entire panel.
Screenshot of that is also attached with.

In a layout, I have a left panel and a right panel. Left panel contains some link, by clicking corresponding url is loaded in right panel. Now if I put any onLoad javascript in target (loded in right panel) html/php as follows it never executes.
<script>
   $(function(){
                  . . .
                  // some initial codes here
        });
</script>
insted of if I put those codes directly it executes as follows:
<script>
   . . .
   // some initial codes here
</script>
Also very frequently, putting normal codes like
$('#dtFrom').datebox('setValue', df);
produces some problem and entire ui does not renders clearly.

What is the correct way to put initial javascript codes for initializing datebox etc. in the target html/php which will be loaded in the right panel after clicking a link in left panel ?

I am attaching some code to make it understand

Code:

<!DOCTYPE html>
<body>
<?PHP
//	include("lock.php");
?>

<script type="text/javascript" src="export.js"></script>

<div id="code" style="width:100%">
	<div style="text-align: left; margin-top: 15px; margin-bottom: 15px;">
		<div style="width: 50px; display: inline-block;"></div>			
		<label>Year</label>
		<input id="year" type="text" class="easyui-numberspinner"  style="width:85px; text-align: right;" data-options="
			formatter: function(yrs) {
				var x = parseInt(yrs);
				var y = x + 1 - 2000; 
				return x + '-' + y ;
			}
		">		
		<div style="width: 50px; display: inline-block;"></div>
		<label>From </label>				
		<input id="dtFrom" name="dtFrom" class="easyui-datebox" style="width:100px;" />
		<label>To </label>					
		<input id="dtTo" name="dtTo" class="easyui-datebox" style="width:100px;" />
		<div style="width: 50px; display: inline-block;"></div>
		<a href="#" id="pp" class="easyui-linkbutton" data-options="iconCls:'fa fa-sync-alt'" onclick="load();">Load</a>
		<a href="#" id="pp" class="easyui-linkbutton" data-options="iconCls:'fa fa-print'" onclick="printPage();">Print</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-file-excel'" 
			onclick="$('#dg').datagrid('toExcel','Report.xls');">Export to Excel</a>	
	</div>  

	<table id="dg" class="easyui-datagrid" style="width:100%;height:450px;"
			data-options = "rownumbers:true,singleSelect:true,fitColumns:true,remoteSort:false,multiSort:false,striped:true">
	<thead>
		<tr>
			<th data-options="field:'DEPTNAME',width:200,align:'center'">DEPARTMENT</th>
			<th data-options="field:'SECODE2',width:80,align:'center'">SECODE</th>
			<th data-options="field:'SECTION',width:200">SECTION</th>
			<th data-options="field:'TNO2',width:50,align:'right'">T/NO</th>
			<th data-options="field:'NAME',width:250,align:'left'">NAME</th>
			<th data-options="field:'SAILPNO',width:250,align:'left'">SAILPNO</th>
			<th data-options="field:'ACTDATE',width:100,align:'left'">ST.DATE</th>
			<th data-options="field:'ASSDATE',width:100,align:'left'">PLANDT</th>
			<th data-options="field:'DAYS',width:40,align:'left'">DAYS</th>
			<th data-options="field:'PROGCODE',width:80,align:'left'">PROGCODE</th>
			<th data-options="field:'PROGNAME',width:250,align:'left'">PROGNAME</th>
			<th data-options="field:'VENUE',width:150,align:'left'">VENUE</th>
		</tr>
	</thead>
	</table>	
	
</div>
<script>


	var dt = new Date();
	var y = dt.getFullYear();
    $('#year').numberspinner({
        min: 2015,
        max: 2030,
        value: y,
        editable: false
    });
   
	var Y = $('#year').numberspinner('getValue');
	var Y2 = parseInt(Y)+1;
	var dfrom = '04' + '/' + '01' + '/' + Y  ;
	var dto = '03' + '/' + '31' + '/' + Y2  ;

	alert(dfrom+dto);
//	$('#dtFrom').datebox('setValue','04/01/2019');  <- Enabling this line restricts rending the entire panel
//	$('#dtTo').datebox('setValue',dto); 			<- Enabling this line restricts rending the entire panel


</script>
</body>

Just put important fields in row display and use detail-view to display all other fields in detail-view.

Thanks jarry

Is there any way to change the text of the confirmation button from ok-cancel to yes-no ? Also in case of message alert is there any way to customize icons from default error, warning etc.

I want to delete a row in datagrid by selecting a row and pressing delete key, but cannot find a way to handle datagrid keypress event so that I can trap delete key and do the row deletion in datagrid.

Any help is appreciated.

I have solved it, actually this line
dt.setDate(dt.getDate() + r.DURATION);
should be writen as
dt.setDate(parseInt(dt.getDate()) + parseInt(r.DURATION));

This is my code :

Code:

	$('#stdate').datebox({
		onSelect: function(d){
			var g = $('#prog').combogrid('grid');	
			var r = g.datagrid('getSelected');

		    var dt = new Date(d);
alert(dt);
		    dt.setDate(dt.getDate() + r.DURATION);
alert(dt);		    
		    var dd = dt.getDate();
		    var mm = dt.getMonth() + 1;
		    var y = dt.getFullYear();

		    var newDate = mm + '/' + dd + '/' + y; 
		    $('#enddate').datebox('setValue',newDate); 
		}
	});

Each time I put 03/20/2019 in #stdate and 3 as days/duration, result in #enddate always shows 09/19/2019, and this is wrong answer. I could not understand why this is happening. Please help.