Datepicker，從服務器獲取請求後，數據掩碼將無法加載

我創建了具有2個日期選擇器和1個時間輸入掩碼的主頁面。一個按鈕將觸發一個GET請求，以在一個div中加載一個具有相同內容的頁面。我已經把所有的js，CSS和函數腳本放在主頁面上。Datepicker，從服務器獲取請求後，數據掩碼將無法加載

在主頁面上，所有的日期選取器和輸入掩碼都能正常工作，但GET請求已觸發並且新頁面已加載，所有日期選取器和輸入掩碼都不起作用。

請幫忙。

主頁代碼

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<!-- IN SUBFOLDER PLUGIN --> 

<!-- Date Picker --> 
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 
<!-- InputMask --> 
<script src="plugins/input-mask/jquery.inputmask.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> 
</head> 
<body> 
<form name="form1"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 
     <button type="submit" id="btnShow" name="btnShow" 
      onclick="showContent();return false;"> 
      Show</button> 
</form> 
<br /> 
<br /> 
<div id="content2" style="display: none"> 
    <!-- CONTENT HERE --> 
</div> 

<script> 
$(function() { 
//Date picker 
$("[date-picker]").datepicker({ 
    format: "dd/mm/yyyy", 
    autoclose: true, 
    }).datepicker("setDate", new Date()); 
}); 

$(function() { 
//Time mask 
    $("[data-mask]").inputmask(); 
}); 

$(function() { 
    $("#btnShow").click(function() { 
     $("#content2").show(); 
    }); 
}); 
</script> 

<script> 
function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content2").innerHTML = xhttp.responseText; 
     } 
    }; 

    xhttp.open("GET", "ax_test.asp?", true); 
    xhttp.send(); 
} 
</script>

GET請求頁面ax_test.asp

<form name="form2"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 

</form>

來源

2017-07-28 Hansheung Cheah

NETWORK選項卡下的控制檯中顯示的任何內容？ –

設法得到它通過在jQuery的工作showContent（）

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<!-- ALL script in subfolder plugins --> 

<!-- Date Picker --> 
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> 
<!-- JQuery 2.2.3 Compressed --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- datepicker --> 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> 
<!-- InputMask --> 
<script src="plugins/input-mask/jquery.inputmask.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> 
<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> 
</head> 
<body> 
<form name="form1"> 
    <label>Date : </label> 
     <div>From :<input name="dt_DateFr" type="text" date-picker></div> 
     <div>To : <input name="dt_DateTo" type="text" date-picker></div> 
     <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
      data-inputmask="'alias': 'hh:mm'" data-mask> 
     </div> 
     <button type="submit" id="btnShow" name="btnShow" 
      onclick="showContent();return false;"> 
      Show</button> 
</form> 
<br /> 
<br /> 


<div id="content2" style="display: none"> 
    <!-- CONTENT HERE --> 
</div> 

<script> 
$(function() { 
//Date picker 
$("[date-picker]").datepicker({ 
    format: "dd/mm/yyyy", 
    autoclose: true, 
    }).datepicker("setDate", new Date()); 
}); 

$(function() { 
//Time mask 
    $("[data-mask]").inputmask(); 
}); 

$(function() { 
    $("#btnShow").click(function() { 
     $("#content2").show(); 
    }); 
}); 
</script> 

<script> 
function showContent() { 
    var xhttp; 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content2").innerHTML = xhttp.responseText; 
     $("[data-mask]").inputmask(); 
     $("[date-picker]").datepicker({ 
     format: "dd/mm/yyyy", 
     autoclose: true, 
     }).datepicker("setDate", new Date()); 


     } 
    }; 

    xhttp.open("GET", "ax_test.asp?", true); 
    xhttp.send(); 
} 
</script> 

</body> 
</html>

來源

2017-08-09 02:46:50

Datepicker，從服務器獲取請求後，數據掩碼將無法加載

回答

相關問題