Toggling Bootstrap modal from PHP trigger

Question

Good day! I'm trying to create modal for edit purposes. That means that it must be filled with retrieved data by specific ID. The problem is that it doesn't work.

Link used to call PHP edit function:

<a href="' . ROOT . '/index.php?edit=' . $payment['id'] . '"><span class="glyphicon glyphicon-edit"></span></a>

PHP edit function:

if (isset($_GET['edit'])) {
 $edit = httpGet(ROOT . "/API.php?getId=" . $_GET['edit']);
  ?><script type="text/javascript">
    $('#editId').modal('show');</script>
   <?php
   }

"editId" modal:

<div id="editId" class="modal fade" tabindex="1"  role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="text-center">Edit Transaction</h1>
        </div>
        <div class="modal-body">
            <form class="form col-md-12 center-block" action="API.php" method="post">
                <div class="form-group">
                    <input type="text" id="id" name="id" class="form-control input-lg" placeholder="ID" value="<?php echo $edit[0]['id']; ?>">
                </div>
                <div class="form-group"> <select class="form-control" id="type" name="type" placeholder="Transaction type" value="<?php echo $edit[0]['type']; ?>">
                        <option value="withdaw">Withdraw</option>
                        <option value="deposit">Deposit</option>
                    </select></div>
                <div class="form-group">
                    <input type="text" id="sum" name="sum" class="form-control input-lg" placeholder="Sum" value="<?php echo $edit[0]['sum']; ?>">
                </div>
                <div class="form-group">
                    <select class="form-control" id="currency" name="currency" placeholder="Currency" value="<?php echo $edit[0]['currency']; ?>">
                        <option value="ILS">ILS</option>
                        <option value="USD">USD</option>
                    </select></div>
                <div class="form-group">
                    <input type="text" id="transaction" name="transaction" class="form-control input-lg" placeholder="Transaction ID" value="<?php echo $edit[0]['transaction']; ?>">
                </div>
                <div class="form-group">
                    <input type="text" id="buyer" name="buyer" class="form-control input-lg" placeholder="Buyer" value="<?php echo $edit[0]['buyer']; ?>">
                </div>
                <div class="form-group">
                    <input type="text" id="email" name="email" class="form-control input-lg" placeholder="Email" value="<?php echo $edit[0]['email']; ?>">
                </div>
                <div class="form-group">
                    <input type="text" id="invoice" name="invoice" class="form-control input-lg" placeholder="Invoice" value="<?php echo $edit[0]['invoice']; ?>">
                </div>
                <div class="form-group">
                    <input type="text" id="date" name="date" class="form-control input-lg" placeholder="Date" value="<?php echo $edit[0]['date']; ?>">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-lg btn-block" type="submit" value="updateId" name="updateId">Update Payment</button>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <button type="button" class="btn btn-default btn-lg btn-block" data-dismiss="modal">Cancel</button>
            </div>  
        </div>
    </div>
</div>

Answer 1

Model is not appearing because function is called before html element loaded on the page. Either use ajax or use document.ready function.

Answer 2

As suggested by Shukla you have to use $(document).ready(function{}); ie:

<script type="text/javascript">
    $(document).ready(function{
     $('#editId').modal('show');
    });
</script>