时间戳

首页 > 解决方案 > Jquery Datepicker 未在 Bootstrap Popup 模式中显示

javascript - Jquery Datepicker 未在 Bootstrap Popup 模式中显示

问题描述

我有一个onclick已实现方法的按钮。用户单击该 onclick 方法按钮后，将打开一个弹出模型，其代码已写入单独的文件mills.php 。问题实际上是模型不加载 jquery 文件，因此我的弹出窗口不起作用。我不知道我应该在哪里声明 jquery 文件和我的日期选择器，以便它在模型弹出输入框上工作。在下面检查我的代码

我在这样的单独文件中有一个模式弹出代码

ajax.php

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
    $( function() {
        alert("hello");
        $( "#datepicker" ).datepicker();
    });
</script>
<?php
    @require_once("config.php");
    if(@$_GET['addMill']=="ok"){
        ?>
    <div class="modal-header">
       <h5 class="modal-title" id="scrollmodalLabel">Add Mill</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
       </button>
    </div>
    <div class="modal-body">
       <p>
       <form action="mills.php?go=add_mill" method="post">
          <div class="row">
             <div class="col-lg-12">
                <div class="row form-group">
                   <div class="col col-md-12"><input placeholder="Name"  name="name" type="text"></div>
                </div>
             </div>

    //datepicker here
    <div class="row">
             <div class="col-lg-12">
                <div class="row form-group">
                   <div class="col col-md-12"> <input type="text" id="datepicker">></div>
                </div>
             </div>

             <div class="col-lg-12">
                <div class="row form-group">
                   <div class="col col-md-12"><input placeholder="Phone#" name="phone" class="form-control" type="text"></div>
                </div>
             </div>
             <div class="col-lg-12">
                <div class="row form-group">
                   <div class="col col-md-12"><textarea name="description" id="textarea-input" rows="9" placeholder="Description" class="form-control"></textarea></div>
                </div>
             </div>
          </div>
          <div align="right">
             <button type="submit" class="btn btn-primary">Confirm</button>
          </div>
       </form>
       </p>
    </div>

    <?php
    }?>

我从下面的文件 Mills.php中调用这个模型

<div class="col-lg-6">
   <section class="card1" style="padding: 0px 10px; text-align: right;">
      <button onclick="addMill()" data-toggle="modal" data-target="#scrollmodal" class="btn btn-primary btn-sm" style="background: #4e4e52; border: 0px;">Add Mills</button>
   </section>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#bootstrap-data-table-export').DataTable();
    });
    function addMill(data){
        document.getElementById("mills").innerHTML="loading...";
        var xmlhttp;
        if(window.XMLHttpRequest){
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                //alert(xmlhttp.responseText);
                document.getElementById("mills").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax.php?addMill=ok");
        xmlhttp.send();
    }
</script>

我已经在这样的测试文件上尝试了 datepicker，它工作得很好。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $( function() {
            $( "#datepicker" ).datepicker();
        });
    </script>
</head>
<body>
<input type="text" id="datepicker">
</body>
</html>

标签： javascriptjqueryhtml

解决方案

推荐阅读