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

In index.php I have table with orders, when I click on order to modify, a modal shows but from page call edit.php. Now as you see in the screen shot:

I have many troubles, I can't implement any Javascript like datepicker, Google address autocomplete.

href in index.php:

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

Didn't added google api autocomplete script because its too long.

What you need to do is instead of binding timepicker on document.ready method bind all time picker used in Modal popUp in On modal shown event just like below that's it do the same thing for datepicker, google address autocomplete as well to make it work..

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

});