Datepicker not working after jQuery.load execution
Question
I've got a problem trying to display datepickers in a new JSP, after called it with Jquery.load function. No datapcikers are showing up unless I use this command:
$("#ui-datepicker-div").remove();
But if I do, the others datepickers that I have in the main jsp stop working.
The new JSP is called from the main like this:
$('#divNewJSP').load("myServlet?OP=1, function() {
$('#divNewJSP').slideDown();
The servlet executes correctly and I have the following code running in the new JSP, at the beggining fo the document:
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show")
...
I've been trying several options but no one seems to work...Any ideas please?
Thx in advance.
EDIT
<link type="text/css" rel="stylesheet" href="/css/monitor.css"/>
<link type="text/css" rel="stylesheet" href="/css/jquery.dataTables.css" />
<script type="text/JavaScript" src="/js/jquery-1.11.1.js"></script>
<script type="text/JavaScript" src="/js/jquery.form.js"></script>
<script type="text/JavaScript" src="/js/jquery-ui.js"></script>
<script type="text/JavaScript" src="/js/jquery.ui.datepicker-es.js"> </script>
<script type="text/javascript" src="/js/jquery.dataTables.js?ver=a0.8185263484592263"></script>
<script>
$(document).ready(function() {
createDatatable();
// Datepickers
/*$("#ui-datepicker-div").remove();*/ <------ IT WORKS WITH THIS
//*** ORIGINAL DATEPICKERS INIT ***//
/* $('#dateField1').datepicker($.datepicker.regional["es"]);
$('#dateField2').datepicker($.datepicker.regional["es"]);
$('#dateField3').datepicker($.datepicker.regional["es"]);
$('#dateField4').datepicker($.datepicker.regional["es"]);*/
});
<body>
<div id="blockResult">
<div id="formCriteraRC"><br/>
<fieldset style="float:left;border:1px solid #007E3A;padding:0.5em;margin-bottom:0.5em;width:98%;">
<legend class="caption">Search Criteria</legend>
<table>
<tr>
<tr>
<div class="intrnot_small">
<span class="labelDateField">Date 1:</span>
<input type="text" class="bloquesinmargen campo" id="dateField1" value="" />
<span class="labelDateField">Date 2:</span>
<input type="text" class="bloquesinmargen campo" id="dateField2" value="" />
</div>
</tr>
<tr>
<div class="intrnot_small>
<span class="labelDateField">Date 3:</span>
<input type="text" class="bloquesinmargen campo" id="dateField3" value="" />
<span class="labelDateField">Date 4:</span>
<input type="text" class="bloquesinmargen campo" id="dateField4" value="" />
</div>
</tr><br/>
<tr>
<div class="intrnot_small">
<input type="button" id="search value="Search" disabled>
<input type="button" id="clean" value="Clean">
</div>
</tr>
</table>
</fieldset>
</div> <!-- end form -->
<div id="listData">
<table id="datatableReg" class="display nowrap" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
<thead>
<tr>
<th width="15px">Sel.</th>
<th width="120px">Id</th>
<th width="90px">Origin</th>
<th width="80px">Códe</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- end -->
</div>
<div id="divDetailResult" class="bloquesinmargen" style='overflow-x: hidden; height: 99%; width: 99%; max-width:99%; display: none; top:0px;'> </div>
</body>
</html>
EDIT 2: MAIN JSP CALLING (from its .js)
function openNewJSP(){
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField1').datepicker($.datepicker.regional["pt"]);
$('#dateField2').datepicker($.datepicker.regional["pt"]);
$('#dateField3').datepicker($.datepicker.regional["pt"]);
$('#dateField4').datepicker($.datepicker.regional["pt"]);
});
}
1 answers
solution1
0 2018-02-02 14:44:05
You have to execute the datepicker function inside of your callback:
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
Remove the following code from your JSP (servlet response):
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.