模态仅显示第一个标签,但随后的HTML其余部分被截断

时间:2020-07-03 00:17:41

标签: javascript html twitter-bootstrap razor bootstrap-modal

编辑2:我找到了一种使其工作的方法,但是看来这不是它应该工作的方式。也许我已经习惯了C#,这对我来说很有意义,但这还不行。无论如何,我改变了我的JavaScript。如果这完全是愚蠢的,那就很高兴知道了。感谢SO一如既往地成为我的声音。 =)

    <script type="text/javascript">
    $(".btnModal").click(function () {
        var paymentId = $(this).data('id');//get the id of the selected item
        var phoneNumber = $(this).data('phone');//get the phone number of the selected item
        var locationNumber = $(this).data('locationNumber');//get the locationNumber of the selected item

        var modalDisplay = document.getElementById("modalPaymentId");
        
        modalDisplay.innerHTML += "Id: <label>" + paymentId + "</label><br />";
        modalDisplay.innerHTML += "Phone: <label>" + phoneNumber + "</label><br />";
        modalDisplay.innerHTML += "Number: <label>" + locationNumber + "</label><br />";
        modalDisplay.innerHTML += "Num2: <label>" + locationNumber + "</label>";
    });
</script>

编辑:我在这里遇到问题,但尚未找到解决方法。看来,当我在javascript中设置文字时,确实确实切断了所有内容。我正在尝试提出如何格式化此javascript。任何帮助表示赞赏。


唯一显示的是ID:[myIdNumber],此后什么也没有。所有字段都具有将被传递到其中的值。甚至没有显示位置号码和电话的标签。就像模态的其余部分在显示一些数据后就被切断(由于在调试时在开发人员工具中显示后什么也没有被截断,因此它被切断了)。您可以看到我已经更改了填充模态数据的方式,无论它在显示第一个值后会中断什么。 重要提示是,如果我注释掉第一个值,它将显示ID:电话:[myPhoneNumber]。因此,在开始显示我的值后,有什么东西杀死了模式div的其余部分。有什么想法在做什么?

HTML用于模式

@* Modal popup of product summary *@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Payment Summary</h4>
            </div>
            <div class="modal-body">
                <div>
                    Id:
                    <label class="modalPaymentId" type="text" name="paymentId" id="modalPaymentId" />
                    <br />
                    Phone:
                    <label class="modalPhone" type="text" name="phoneNumber" id="modalPhoneNumber" />
                    <br />
                    Location Number:
                    <label class="modalLocationNumber" type="text" name="locationNumber" id="modalLocationNumber" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

JavaScript用于模式

    <script type="text/javascript">
        $(".btnModal").click(function () {
            var paymentId = $(this).data('id');//get the id of the selected item
            var phoneNumber = $(this).data('phone');//get the phone number of the selected item
            var locationNumber = $(this).data('locationNumber');//get the locationNumber of the selected item
            //document.getElementById("modalPaymentId").innerHTML = paymentId;
            //document.getElementById("modalPhoneNumber").innerHTML = phoneNumber;
            $('.modalPaymentId').text(paymentId);//set the id to the input on the modal
            $('.modalPhone').text(phoneNumber);//set the phone number to the input on the modal
            $('.modalLocationNumber').text(locationNumber);//set the modalLocationNumber to the input on the modal
        });
    </script>

这是调用模式的按钮

     <button data-id="@item.PaymentId" data-phone="@item.Phone" data-locationNumber="@item.LocationNum" data-toggle="modal" data-target="#myModal" class="btnModal"> Summary </button>

0 个答案:

没有答案