Open Bootstrap Modal on history.go(-1) in onClick

Question

I have a bootstrap modal that needs to be opened when the user would want to go back to the previous page. Basically the first step in the process is that a user would click a button and a modal will popup and then after entering values in the modal, the user would then want to proceed to the next step where another modal will appear to basically confirm what the user has entered on the previous modal. If it happens that the user would want to change his/her answer, it can go back to the previous page and then update his/her answer. The problem in my code is that it can go back to the previous page but the modal isn't opening.

HTML CODE ON THE FIRST PROCESS (FIRST MODAL):

<div class="modal fade bs-example-modal-lg" id="modal_insert" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
        <h4 class="modal-title" id="myModalLabel">Update Hearing Details</h4>
        </div>
            <form id="update_memo" class="form-horizontal form-label-left calender" name = "update_memo" enctype="multipart/form-data" method="post" role="form" novalidate>
                <div class="modal-body">
                    <div class="d item form-group">
                    <label class="col-sm-2 control-label">Hearing Number</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="hearing_number" name="hearing_number" readonly="readonly"/>
                        </div>
                    </div>
                        <div class="d item form-group">
                            <label class="col-sm-2 control-label">Attendance<span class="required">*</span> </label>
                            <div class="col-sm-8" style = "margin-top: 7px;">

                                <input type="radio" id = "both_attendance"  name="attendance" value="2" checked > Both Parties Showed Up <br />
                                <input type="radio" id = "resp_attendance" name="attendance" value="0" > Respondent Did Not Show Up <br />
                                <input type="radio" id = "comp_attendance"  name="attendance" value="1" > Complainant Did Not Show Up <br />

                            </div>
                        </div>
                        <div class="m item form-group">
                            <label class="col-sm-2 control-label">Memo <span class="required">*</span></label>
                            <div class="col-sm-8">
                                <textarea rows="4" class="form-control" id="memo" name="memo" required="required"/></textarea>
                            </div>
                        </div>

                </div>
                <div class="modal-footer" style="margin:0;">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 4px;">Close</button>
                    <button id="send" type="submit" class="btn btn-success" name="update_memo">Save Record</button>
                </div>
            </form>
        </div>
    </div>
</div>

2ND MODAL:

<?php
include 'config.php';
if(isset($_POST['update_memo'])){
    $id = isset($_GET['id'])? $_GET['id'] : "";
    $hearingNo = $_POST['hearing_number'];
    $memo = $_POST['memo'];
    $attendance = $_POST['attendance'];

 ?>

<div class="modal fade bs-example-modal-lg" id="modal_confirm" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #f0ad4e; color:#fff">
                <h4 class="modal-title" id="myModalLabel">Memo Confirmation </h4>
            </div>
            <form id="update_memo" class="form-horizontal form-label-left calender" name = "update_memo" enctype="multipart/form-data" method="post" role="form" novalidate>
                <div class="modal-body" style="display:none">
                    <div class="d item form-group">
                        <label class="col-sm-2 control-label">Hearing Number</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="h_num" name = "h_num" value="<?php echo $hearingNo; ?>" readonly="readonly"/>
                        </div>
                    </div>
                </div>              
                <div class=" item form-group">
                    <label class="control-label col-md-5 col-sm-5 col-xs-12" style="left:20px;" ><h4><b>Do you wish to continue with the memo?</b></h4></label>
                    <div class="col-sm-8"></div>
                </div>
                <div class=" item form-group">
                    <label class="control-label col-md-1 col-sm-1 col-xs-12"></label>
                    <div class="col-sm-10">
                        <blockquote style="font-size: 18px; right: 30px; text-align: justify"><?php echo $memo; ?></blockquote>
                    </div>
                </div>

                <div class="modal-footer" style="margin:0;">
                    <button type="button" style="margin-top: 6px;" class="btn btn-dark" name="return" onClick="javascript: history.go(-1); showModal(); ";><i class="fa fa-arrow-circle-o-left m-right"></i>  Return</button>
                    <button id="send" type="submit" class="btn btn-success" name="memo_confirm"><i class="fa fa-check m-right"></i>  Proceed</button>
                </div>
 <?php

  }
  ?>
            </form>
        </div>
    </div>
</div>

Javascript code to call the first modal: (it is like this because when the user clicks this it passes a value in data-id; this is working)

$(document).ready(function(){
    $('#modal_insert').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');
        //alert(id);
        $("#hearing_number").val(id);
});

2ND MODAL:

$(document).ready(function(){
    $('#modal_confirm').modal('show');
});

FUNCTION THAT TRIES TO CALL THE MODAL AFTER HISTORY.GO(-1)

        //not working
        $(document).ready(function(){
            function showModal() {  
            $('#modal_insert').modal('show');
            }
        });
        //alert("OPEN"); 

</script>

How can I achieve this? Which part of my code should be changed or tweaked? Thank you so much in advance for your help!!!

Answer 1

When opening bootstrap modal change hash value of url. Also trigger modal opening depending on hash

<script>
// use these codes inside $(document).ready...
$(_modal_id_).on('show.bs.modal', function (e) {
   window.location.hash = "open_modal";
})
if(window.location.hash == "#open_modal") { // edited: "open_model" to "#open_modal"
   var hash = window.location.hash;
   $(_modal_id_).modal('show');
}
</script>

So if user go one page back (eg http://domain.co/page.php#open_modal ) .modal('show') will trigger