2013-01-22 78 views
0

我有一个日期选择器的问题,出于某种原因在第一次加载datepicker工作正常,并让我选择日期,但是当我点击刷新(通过AJAX)时,日期选择器区域刷新,但那么我无法使用日期选择器。他们无论如何围绕它?jQuery datepicker问题通过ajax

香港专业教育学院尝试使用不同的ID,并没有太大的成功取出旧的元素:/

我在PHP中的功能,显示日期,在文件“datefunction.php”

function getDateInfo() 
{ 
    $date = $_GET['date']; 

    $html = '<script> 
     $(document).load(function() { 
     $("#dt").datepicker(\'destroy\'); 
     $("#dt").remove(); 

     var mydate = $("#dt1").datepicker({ dateFormat: "dd-mm-yy" }); 
       $("#dt1").click(function(){ 
        mydate.datepicker("show"); 
        });  
       }); 
      });</script> 
       <label>Date1:</label> 
      <input type="text" name="dt" id="dt1" maxlength="10" size="12" value="' . $date . '" readonly="true" />'; 

    return $html; 
} 

echo getDateInfo(); 

我有这被视为所谓的“dates.php页面

<script src="/script/jquery.js" type="text/javascript"></script> 
<script type='text/javascript' src='/script/jquery-ui-1.8.9.custom.min.js'></script> 
<script type='text/javascript' src='/script/jquery.datePicker.js'></script> 
<script> 
var bustcachevar=1; //bust potential caching of external pages after initial request? (1=yes, 0=no) 
var bustcacheparameter=""; 

function ajaxpage(url, containerid, requesttype){ 
    var page_request = false 
    if (window.XMLHttpRequest) // if Mozilla, Safari etc 
     page_request = new XMLHttpRequest() 
    else if (window.ActiveXObject){ // if IE 
     try { 
      page_request = new ActiveXObject("Msxml2.XMLHTTP") 
     } 
     catch (e){ 
      try{ 
       page_request = new ActiveXObject("Microsoft.XMLHTTP") 
      } 
      catch (e){} 
     } 
    } else return false 
    page_request.onreadystatechange=function(){ 
     loadpage(page_request, containerid) 
    } 

    if (requesttype=='get'){ 
     if (bustcachevar) bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() 
     page_request.open('GET', url+bustcacheparameter, true) 
     page_request.send(null) 
    } else if (requesttype=='post') { 
     var poststr = "mytextarea1=" + encodeURI(document.getElementById("mytextarea1").value) + "&mytextarea2=" + encodeURI(document.getElementById("mytextarea2").value); 
     page_request.open('POST', url, true); 
     page_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     page_request.setRequestHeader("Content-length", parameters.length); 
     page_request.setRequestHeader("Connection", "close"); 
     page_request.send(parameters); 
    }; 
} 

function loadpage(page_request, containerid){ 
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
    document.getElementById(containerid).innerHTML=page_request.responseText 
} 
$(document).ready(function() { 
       var mydate = $("#dt").datepicker({ dateFormat: "dd-mm-yy" }); 
       $("#dt").click(function(){ 
        mydate.datepicker("show"); 
        });  
       }); 
</script> 


<?php 
$date = "05-06-2009"; 
echo "<div id='datearea'><label>Date:</label> 
      <input type='text' name='dt' id='dt' maxlength='10' size='12' value='" . $date . "' readonly='true' /></div>"; 
echo "<a href='#' onclick='javascript:ajaxpage(\"datefunction.php?date=02-04-1999\", \"datearea\", \"get\");'>update</a>"; 
?> 

回答

0

这是因为,当页面加载JQuery的 * 增加 *所有DOM元素的事件和函数s,但是当通过Ajax加载DOM的元素时,从未添加事件。为此,我使用LiveQuery JQuery的插件,它将事件添加到DOM,即使它们是在DOM已经通过AJAX或任何其他方式加载后添加的。

$("#dt").livequery('click', function(event) { 
    //CODE FOR DATE PICKER 
}); 
0

你应该解决这个问题,改变这种:

$("#dt").click(function(){ 

这样:

$("#dt").on('click', function(){ 

http://api.jquery.com/on/

0

因为日期选择器()将无法找到动态添加元素......或者你在阿贾克斯成功函数之后调用日期选择器

$('#yourInoutID').datepicker(); 

做到这一点

$(document).find('#yourInoutID').datepicker(); 

更新

你的情况

这将是

$(document).on('click','#dt',function(){ 
       mydate.datepicker("show"); 
       });  
      });