Datepicker, le masque de données ne se charge pas après avoir reçu la requête du serveur

J'ai créé la page principale qui a 2 datepickers et 1 masque de saisie pour l'heure. Un bouton déclenchera une requête GET pour une page avec le même contenu à charger dans un div. J'ai mis tous les js, CSS et le script de fonction sur la page principale. Tous les datpickers et le masque de saisie fonctionnent correctement à la page principale, mais la requête GET a déclenché et la nouvelle page est chargée, tous les datpickers et le masque de saisie ne fonctionnent pas.Datepicker, le masque de données ne se charge pas après avoir reçu la requête du serveur

Aidez-nous s'il vous plaît.

Date Picker and Input Mask Not Working

Le principal Code PAGE

<!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>

L'EEG demande Page 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>

Source

2017-07-28 Hansheung Cheah

Tout ce qui apparaît dans la console sous l'onglet NETWORK? –

Manage pour le faire fonctionner en incluant le jquery dans le 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>

Source

2017-08-09 02:46:50

Datepicker, le masque de données ne se charge pas après avoir reçu la requête du serveur

Répondre

Questions connexes