jQuery.load执行后，日期选择器不起作用

Question

I've got a problem trying to display datepickers in a new JSP, after called it with Jquery.load function. 用Jquery.load函数调用后，尝试在新的JSP中显示日期选择器时遇到问题。 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. 但是，如果我这样做了，我在主jsp中拥有的其他日期选择器将停止工作。

The new JSP is called from the main like this: 新的JSP是这样从主调用的：

$('#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: 该servlet正确执行，并且在该文档的开头，我在新的JSP中运行以下代码：

$(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&oacute;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) 编辑2：主要JSP呼叫（来自其.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"]);
});
}

Answer 1

You have to execute the datepicker function inside of your callback: 您必须在回调内部执行datepicker函数：

$('#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): 从您的JSP（servlet响应）中删除以下代码：

$(document).ready(function() {  
   $('#dateField').datepicker($.datepicker.regional["pt"]);
   $('#dateField').datepicker("show");
});

jQuery.load执行后，日期选择器不起作用

问题描述

1 个解决方案

解决方案1
0 2018-02-02 14:44:05

jQuery.load执行后，日期选择器不起作用

问题描述

1 个解决方案

解决方案1 0 2018-02-02 14:44:05

解决方案1
0 2018-02-02 14:44:05