如果从另一个php页面调用它，如何将Javascript实现为模态

Question

在index.php我有订单表，当我点击订单修改时，一个模态显示但是来自页面调用edit.php。正如您在屏幕截图中看到的那样：

我遇到很多麻烦，我无法实现像datepicker，Google地址自动填充这样的任何Javascript。

index.php中的

href：

 <a href="edit.php" data-toggle='modal' data-target = "#action2" class ="btn btn-primary"> <span class = "glyphicon glyphicon-edit"></span> Edit </a></a>

Edit.php

<?php
include_once("config.php");
$q_customer = $conn->query
    ("SELECT * from orders inner JOIN mydate on orders.order_no=mydate.order_no and orders.date=mydate.order_date" ) or die(mysqli_error());
$f_customer = $q_customer->fetch_array();
?>
<form method = "POST" action = "save_customer_query.php" enctype = "multipart/form-data" class = "modal-body" id = "action2">
    <center>
        <label class = "text-info">Update Order information</label>
    </center>
    <div class  = "modal-body">
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Order Date</label>
            <input type = "text" name = "orderdatepicker"  id="orderdatepicker" value = "<?php echo $f_customer['date']?>" class="form-control"/>
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Order Number</label>
            <input type = "text" name = "order_no"  id="order_no" tabindex="1" value = "<?php echo $f_customer['order_no']?>" class="form-control" autofocus />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Phone Number</label>
            <input type = "text" name = "phone"  id="phone" tabindex="1" class="form-control"  />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">First Name</label>
            <input type = "text" name = "first_name"  id="first_name" tabindex="2" class = "form-control"  />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Last Name</label>
            <input type = "text" name = "last_name" id="last_name"tabindex="3" class = "form-control" />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Email</label>
            <input type = "text" name = "email"  id="email" tabindex="4" class = "form-control" />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Company</label>
            <input type = "text" name = "company"  id="company" tabindex="5" class = "form-control" />
        </div>
        <div class="form-group col-xs-4 col-md-4">
            <label for="name" class="control-label">Address</label>
            <div id="locationField">
                <input id="autocomplete" name = "address"  onFocus="geolocate()" type="text" class = "form-control" value = "<?php echo $f_customer['address']?>"/>
            </input>
        </div>
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="timepicker_6" class="control-label">Kitchen Time </label>
        <input type="text"  id="timepicker_6" name = "k_time" value = "<?php echo $f_customer['k_time']?>" class = "form-control"/>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#timepicker_6').timepicker({
                    showPeriod: true,
                    showLeadingZero: true
                });
            });
        </script>
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="timepicker_7" class="control-label">Delivery Time </label>
        <input type="text" id="timepicker_7" name = "d_time" value = "<?php echo $f_customer['d_time']?>" class = "form-control"/>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#timepicker_7').timepicker({
                    showPeriod: true,
                    showLeadingZero: true 
                });
            });
        </script>
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Driver</label>
        <input type = "text" name = "driver_no"  id="driver_no"  tabindex="5" class = "form-control" />
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" >No of People</label>
        <input type = "text" name = "no_ofppl"  id="no_ofppl" tabindex="5" class = "form-control" />
    </div>
</div>
<div class = "form-group col-xs-4 col-md-4">
    <button  class = "btn btn-default" data-dismiss = "modal" ><span class = "glyphicon glyphicon-remove"></span> Cancel</button>
</div>
<div class = "modal-footer">
    <button  class = "btn btn-primary" name = "save" tabindex="7" id="save" ><span class = "glyphicon glyphicon-save"></span> Save</button>
</div>
</form> 

没有添加谷歌api自动完成脚本，因为它太长了。

Answer 1

你需要做的是在timepicker方法上绑定document.ready而不是绑定在modal shown事件中的Modal popUp中使用的所有时间选择器，就像下面那样它是做同样的事情 datepicker，谷歌地址自动填充以使其正常工作..

$('#action2').on('shown.bs.modal', function () {
    $('#timepicker_6').timepicker({
            showPeriod: true,
            showLeadingZero: true
     }); 

});