文章/答案/技术大牛

发布

社区首页 >问答首页 >数据交换，从服务器获得请求后，数据掩码不会加载。

问数据交换，从服务器获得请求后，数据掩码不会加载。
EN

Stack Overflow用户

提问于 2017-07-28 10:14:55

回答 1查看 860关注 0票数 0

我创建了主页面，其中包含2个数据编辑器和1个时间输入掩码。一个按钮将触发一个GET请求，请求在div中加载具有相同内容的页面。我已经把所有的js，CSS和函数脚本放在主页上。

在主页面上，所有的数据项和输入掩码都正常工作，但是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>

input-mask

ajax

datepicker

asp-classic

xmlhttprequest

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-09 02:46:50

通过在showContent()中包含jquery来管理它

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45370798

复制

相似问题

问数据交换，从服务器获得请求后，数据掩码不会加载。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数据交换，从服务器获得请求后，数据掩码不会加载。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数据交换，从服务器获得请求后，数据掩码不会加载。
EN