Bootstrap Modal Popup not working on PHP Page | Console Shows No Error

Question

All other JS functions work properly except the Modal Popup. The Modal is not working even on windows load.

If I create a new page with the scripts, the modal popup function and no code within the body. The Modal works, so I think the correction is in the code within the <body> tag

The console shows no error.

My Code

<html>
<head>

<title>Ready</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  


           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script src="https://code.jquery.com/jquery-latest.js"></script>

     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

   <script type="text/javascript">
function getPackageforCourier(val) {
    $.ajax({
    type: "POST",
    url: "latest_rts_pkr.php",
    data:'courier_name='+val,
    success: function(data){
        $("#latest_rts").html(data);
    }
    });
}

    function markRTS()
    {
        document.getElementById('readytoship').style.display = 'none';
        document.getElementById('awb').style.display = 'none';
        $.ajax({
        type: "POST",
        url: "pickrr_rts.php",
        data:'airwaybill='+$("#awb").val(),
        success: function(data){
                $("#readytoship").html(data);
                document.getElementById('readytoship').style.display = 'block';
                document.getElementById('awb').style.display = 'block';
                setTimeout(function() {
            $("button").removeAttr("disabled");   
            $("input").removeAttr("disabled");
            document.getElementById('awb').value = "";
        document.getElementById("awb").focus();
        }, 50); 



        }
        });
    }

$(window).on('load',function(){
        $("#pro_popup").click();
    });


   // DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND

    $(function() {
    $("button").click(function() {
        $("button").attr("disabled", "disabled");
        $("input").attr("disabled", "disabled");
       // document.getElementById('resendbutton').style.display = 'none';

    });
});


function getSKUMapping(val)
    {
        var sku_id = $("#check_sku").value;
        if(sku_id!='')
        {
        $.ajax({
        type: "POST",
        url: "check_sku_mapping.php",
        data:'skuID='+val,
        success: function(data){
            if(data!=''){
                $("#mapping_result").html(data);
                document.getElementById('mapping_result').style.display ='block';
                $("#check_sku").value="";
            }
        }
        });
        }
        else
        {
            document.getElementById('mapping_result').style.display ='none';
        }
    } 


</script>


</head>
<body>
<h2>Ready to Ship<h3>
     <div id="readytoship" class="animated tada bounceInRight" style=
    "padding:auto 1%;box-shadow:0px -1px 1px rgba(0,0,0,0.5);cursor:pointer; background-color:rgba(255,255,255,0.1); border-radius:6px; display:none;margin:2% auto;width:80%;">
    </div>

<div id="rts_form">
<form id="rts" method="POST" action="">
<input class="input" type="text" maxlength="20" name="awb" placeholder="Scan Airway Bill Barcode" id="awb" autofocus autocomplete="off">
<button type="submit" id="submit" onclick="markRTS();">Mark Ready to Ship</button>
</form>

</div>
<div id="latest">
<?php
$con = mysqli_connect("localhost","admin","xxx1xxx!","admin_db");//database connection
$result = mysqli_query($con, "SELECT rts.courier, rts.status FROM `oc_shipping_pickrr` AS rts WHERE rts.status='0' GROUP BY rts.courier");
echo '
<select class="input" name="courier_name" id="courier_name"  onChange="getPackageforCourier(this.value);" required="required">
<option value="">Select Courier</option>';
while($row = mysqli_fetch_array($result)) {
    echo '<option value="'.$row['courier'].'">'.$row['courier'].'</option>';
}
echo '</select></label>';
mysqli_free_result($result);

?>
</div>
<div id="latest_rts">

</div>
<div id="mapping">
<form id="sku_mapping_check" method="" type="POST">
<input class="input-sku" type="text" name="check_sku" id="check_sku"  required onkeyup="getSKUMapping(this.value);" placeholder="Scan SKU Barcode">

</form>
<p style="font-weight:800;" id="mapping_result">

</p>
</div>

</body>

</html> 


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="pro_popup" data-toggle="modal" data-target="#myModal" style="display:none;top:0;left:0;">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" onclick="ScrollToTop();" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" style="font-weight:600; text-align:center;">Package Details</h4>
      </div>
      <div class="modal-body">
      <div id="new_pop_data">
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="ScrollToTop();" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

I've tried everything, but nothing works. I removed the php cache code also, tried in Incognito also.

I checked with the Javascript Syntax Validator also, but it shows the code is fine.

Answer 1

You need at least to put your modal and button code before the </body> closing tag.

Update:

Found it, you need to move your code $("#pro_popup").click(); from window on load event to jQuery dom ready event:

$(window).on('load',function(){
    //$("#pro_popup").click();
});

And

$(function() {
    $("#pro_popup").click();
    $("button").click(function() {
        $("button").attr("disabled", "disabled");
        $("input").attr("disabled", "disabled");
       // document.getElementById('resendbutton').style.display = 'none';
    });
});

Answer 2

I found the solution, as the problem was in the below code

// DISABLE BUTTON ONCE CLICKED, FOR 1 SECOND

$(function() {
$("button").click(function() {
    $("button").attr("disabled", "disabled");
    $("input").attr("disabled", "disabled");
   // document.getElementById('resendbutton').style.display = 'none';

});

});

It was fiddling with my Trigger button unnecessarily!

Thanks folks!

Bootstrap Modal Popup not working on PHP Page | Console Shows No Error

Question

2 answers

solution1
1 2018-04-06 17:53:38

solution2
0 2018-04-06 18:05:48

Bootstrap Modal Popup not working on PHP Page | Console Shows No Error

Question

2 answers

solution1 1 2018-04-06 17:53:38

solution2 0 2018-04-06 18:05:48

solution1
1 2018-04-06 17:53:38

solution2
0 2018-04-06 18:05:48