相同的模態在頁面上失敗,然后在同一頁面上工作

[英]Same modal fails on page once then works later on same page


I am using the same modal code at the top and bottom of a page. Both show the button correctly.

我在頁面的頂部和底部使用相同的模態代碼。兩者都正確顯示按鈕。

When Rendered:

  • The first button will go straight through as if the submit button were pressed, without waiting.
  • 第一個按鈕將直接通過,就像按下提交按鈕一樣,無需等待。

  • The second one will work as expected...
  • 第二個將按預期工作......

Any ideas how to figure out how to get the first button to act correctly would be appreciated.

任何想法如何弄清楚如何讓第一個按鈕正確行動將不勝感激。


Here is my code:

這是我的代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<link href="/Content/css/bootstrap.min.css" rel="stylesheet">

<script src="/Content/js/jquery-2.2.0.js"></script>
<script src="/Content/js/bootstrap.min.js"></script>
<script src="/bundles/livevalidation.js"></script>
<script src="/Content/bootstrap-confirmation.min.js"></script>

</HEAD>
<body>

<!-- ########### FIRST TIME ############### -->

<form id="normal" action="/dev/clientEntry.do" method="post" name="UpdateClient">
        <input name="cID" type="hidden" value="360" form="normal"  />

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>        
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ FIRST INSTANCE FINISHED ############## -->
<b>or </b>

<br><button type="submit" value="NewCustomer" name="DO_ME" form="special"> ADD ANOTHER NEW ENTRY </button></center><br>

<h4><span style="display:inline-block; width: 25pt;"></span>
ID : 360
<span style="display:inline-block; width: 25pt;"></span>
<font color="#ff4444"><B>*</B></font>
Company : <font color="#2222ff"><b>SLATE GRANITE<input name="cCompany" id="cCompany" type="hidden" value="SLATE GRANITE" form="normal"  /></b></font></h4>
<span style="display:inline-block; width: 60pt;"></span>Notes:<span style="display:inline-block; width:78pt;"></span><font size="2">Lifetime Account Value: <b>$0.00</b> (spent so far) </font><br>
<span style="display:inline-block; width: 60pt;"></span> <textarea cols="90" rows="10" name="cNotes" form="normal" ></textarea><br>
<span style="display:inline-block; width: 60pt;"></span><font size="2">Client Since: 2016-01-31 19:21:38.403&nbsp;&nbsp;|&nbsp;
  Last Modified: 2016-01-31 19:21:38.403&nbsp;&nbsp;| 
  &nbsp;&nbsp;Available Balance: <b>$0.00</b> as of (2016-01-31 19:21:38.403) </font><br>
<span style="display:inline-block; width: 60pt;"></span><b>Add to Balance</b>: $<input maxlength="12" name="crAmt" size="12" type="text" value="0" form="normal" /> (amount being deposited) <br>

<hr>

<!-- ############ REPEATING ############## -->

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>         
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ SECOND INSTANCE FINISHED ############## -->

<script src="http://mistic100.github.io/Bootstrap-Confirmation/dist/bootstrap-confirmation2/bootstrap-confirmation.min.js"></script>
<script>
    \$('[data-toggle=confirmation]').confirmation();
    \$('[data-toggle=confirmation-singleton]').confirmation({ singleton:true });
    \$('[data-toggle=confirmation-popout]').confirmation({ popout: true });
</script>

</body>
</html>

1 个解决方案

#1


0  

You have repeated a lot of the code twice. Also repeating id's for elements, and repeating the actual js-code. This will probably lead to interference of some kind.

你重復了很多代碼兩次。同時重復元素的id,並重復實際的js-code。這可能會導致某種干擾。

Try to write functions to achieve this instead of repetitive code, and you'll probably have more luck...

嘗試編寫函數來實現這個而不是重復的代碼,你可能會有更多的運氣......


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/01/31/c1bfffc555b77c3635d295ba6bcc3947.html



 
  © 2014-2022 ITdaan.com 联系我们: