Question

我一直在尝试在我的ajax页面上使用jquery datepicker但它无法加载。在laravel框架和ajax上开发一个web应用程序但是当我尝试使用jquery datepicker时它只在表单打开时才有效我的主页。但是一旦我点击一个链接，将一个新页面加载到div中，datepicker就不能在那里工作。我的控制台不会抛出任何错误。任何想法我可能做错了。

以下是我关注的jquery网站上的示例。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

这是我的ajax电话

function makerequest(serverPage, objID) {
var obj = document.getElementById(objID);
obj.innerHTML = '<b>Loading....</b>';
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

页面我试图加载到div

     <form method="POST" action="{{URL::route('applicant.store')}}" class="user form-horizontal" enctype="multipart/form-data">
        <br>
        <input type="text" id="datepicker">
        <h4 class="text-center">ENROLLEE REGISTRATION FORM</h4>
    <!--div to contain ajax passport-->
       <!-- <div id="passport" class="text-center" style="border:1px solid black;height:120px;width:120px;color:silver"></div> -->

       <!--surname and othernames-->
        <div class="form-group">
            <div class="col-sm-1 col-md-offset-">        
            <label for="name">Surname</label>        
            </div>
            <div class="col-sm-4">
            <input type="text" name="surname" required value="{{Input::old('surname')}}" class="form-control">

            </div>
            <div class="col-sm-1 col-md-offset-">        
            <label for="name">Other Names</label>        
            </div>
            <div class="col-sm-4">
            <input type="text" name="othernames" required value="{{Input::old('othernames')}}" class="form-control">

            </div>
        </div>

          <div class="form-group">
        <div class="col-sm-2 col-md-offset-">        
            <label for="name">Upload Passport</label>        
            </div>
        <div class="col-sm-3">
       <input type="file" name="passport" class="form-control"/>
    </div>
    </div>

    <div class="col-sm-2 col-md-offset-"> 
        <div>       
            <label for="form_no">Form NO.</label>        
            </div>
            <div class="col-sm-1">
            <input type="text" name="form_no" value="{{Input::old('form_no')}}" class="form-control" required>
            </div>

            <div class="col-sm-2 col-md-offset-">        
            <label for="tell_no">Teller/Reciept NO.</label>        
            </div>
            <div class="col-sm-2">
            <input type="text" name="tell_no" value="{{Input::old('tell_no')}}" class="form-control" required>
            </div>

            <div class="col-sm-1 col-md-offset-">        
            <label for="amt_paid">Amount Paid</label>        
            </div>
            <div class="col-sm-1">
            <input type="text" name="amt_paid" value="{{Input::old('amt_paid')}}" class="form-control" required>
            </div>

     </div>   

         <div class="form-group">
            <div class="col-sm-1 col-md-offset-">                                 
     <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>&nbsp;Submit Application Form</button>

        </div>
</form>
        </div>

    </div>
    </form>
    </div>
    </div>
    </div>
        </div>

<script>
$('document').ready(function(){
$( "#datepicker" ).datepicker();
$( "#regpicker" ).datepicker();
});
</script>

感谢任何帮助

Answer 1

将所有脚本引用放在母版页中，这在整个应用程序中很常见。因此，当母版页加载时，所有插件都会启动，因此您不必在子页面中添加引用，也不必担心插件。

Answer 2

我的回答与DOM有关，用于在提供AJAX请求时将事件/窗口小部件分配给DOM元素

尝试在 pageload 事件上附加日期选择器，如下所示

$("document").on("pageload",function(event,data){
    $( "#datepicker" ).datepicker();
}) ;

或者您可以使用以下实现

function pageload()
{
    $( "#datepicker" ).datepicker();
}

希望它有所帮助...

Answer 3

删除要加载到div中的新页面中的jQuery引用。如果您在母版页和新页面中使用jQuery引用，则可能会导致多重引用，这可能会导致此类问题。

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

因此，请尝试单独使用主页中的jQuery引用。

表单输入日期选择器没有显示在ajax页面上

3 个答案: