编辑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>