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
<!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>
