Search code examples
ajaxdatepickerasp-classicxmlhttprequestinput-mask

Datepicker, data-mask won't load after getting request from server

I created the main page that has 2 datepickers and 1 input mask for time. A button will trigger a GET request for a page with the same content to be loaded within a div. I have put all the js, CSS and function script on the main page.

At the main page, all the datepickers and input mask work correctly but the GET request got trigger and the new page is loaded, all the datepickers and input mask are not working.

Please help.

Date Picker and Input Mask Not Working

The MAIN PAGE Code

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

The GET REQUEST 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>
Solution

  • Manage to get it working by including the jquery in the 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>