AJAX调用后,Datepicker不起作用

时间:2016-06-05 19:42:04

标签: ajax jquery-ui-datepicker

我有一个DatePicker工作正常,直到进行AJAX调用。

有什么想法吗?

?><select onChange="Contract_PropertyDetails();" class="element select medium" id="contract_property" name="contract_property" width="300" style="width: 300px">  
<option value="0" >Select property</option>

Contract_PropertyDetails();是我的AJAX功能。

function Contract_PropertyDetails() {

var cp = document.getElementById('contract_property').value;
var companyid = document.getElementById('id_company').value;
var url = "incl_list_properties_contract.php?Company="+ companyid + "&cp="+cp;
url = encodeURI(url);

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    Contract=new XMLHttpRequest();

  } else { // code for IE6, IE5
    Contract=new ActiveXObject("Microsoft.XMLHTTP");
  }

  Contract.onreadystatechange=function() {
    if (Contract.readyState===4 && Contract.status===200) {
      document.getElementById("DETAILS_OF_LESSEE").innerHTML=Contract.responseText;
    }
  };

  Contract.open("GET",url,true);
  Contract.send();
}

DETAILS_OF_LESSEE是显示结果的DIV。

使用incl_list_properties_contract.php我在日期选择器的字段中添加了其他表单。

<input type="text" id="Datepicker1" > 

这是Index.php中的函数

$(function() {
  $("#Datepicker1").datepicker("destroy");

    $( "#Datepicker1" ).datepicker({
        changeMonth:true,
        changeYear:true
    }); 
});

我注意到如果日期选择器的字段在AJAX响应之外,那么在调用之前是一个级别。以下DIV正在自动添加,日期选择器工作正常。

ui-datepicker-div 但是,如果输入文本字段与AJAX函数的响应有关,那么显然不在页面上 - 因此在第一次DIV不存在时。

所以问题是如何在发送响应和更新DIV内容时使用AJAX函数执行日期选择器。 ??

等待回复。

1 个答案:

答案 0 :(得分:0)

当然,日期选择器插件无法修改代码执行时不存在的元素。在将元素添加到页面后,您必须初始化插件。

这将在AJAX调用的回调中完成。也许就像这样简单:

Contract.onreadystatechange=function() {
    if (Contract.readyState===4 && Contract.status===200) {
        document.getElementById("DETAILS_OF_LESSEE").innerHTML=Contract.responseText;
        $( "#Datepicker1" ).datepicker({
            changeMonth:true,
            changeYear:true
        }); 
    }
};