【发布时间】：2023-03-24 23:32:01
【问题描述】：
我是 bootstrap 的新手，我遇到的问题是我无法在用户调用对话框之前更新模态框内的文本框。我已经尝试了一切，从通过 javascript 甚至通过服务器端语言 c# 更新文本框，但似乎没有任何东西可以更新里面的文本框。
这是我的代码：
<head id="Head1" runat="server">
<script type="text/javascript">
function func(name)
{
//triggered when modal is about to be shown
$('#edit').on('show.bs.modal', function (e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="mohsintext"]').val(bookId);
});
}
</script>
</head>
<body>
<!--/#middle-->
<section id="middle">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Your Cases</h4>
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>Case Title</th>
<th>Case Description</th>
<th>Origin</th>
<%--<th>Email</th>
<th>Contact</th>--%>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<asp:Repeater ID="repPeople" runat="server" >
<ItemTemplate>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td><%# Eval("Title") %></td>
<td><%# Eval("Description") %></td>
<td><%# Eval("Origin") %></td>
<%--<td><%# Eval("First Name") %></td>
<td><%# Eval("First Name") %></td>--%>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><asp:LinkButton id="LinkButton1" runat="server" data-id="ISBN-001122" class="open-AddBookDialog btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></asp:LinkButton></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete"><asp:LinkButton ID="LinkButton2" runat="server" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></asp:LinkButton></p></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id="my_modal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<asp:TextBox runat="server" class="form-control " type="text" id="mohsintext" name="mohsintext"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
<div id="myDialogText"></div>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="H1">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</section>
<!-- Back To Top -->
<script type="text/javascript">
jQuery(document).ready(function () {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function (event) {
event.preventDefault();
jQuery('html, body').animate({ scrollTop: 0 }, duration);
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</form>
</body>
</html>
我使用了几种 javascript 方法来尝试更新文本框元素，但没有任何效果。请注意，我已经删除了上面一些不必要的代码以使其更具可读性，例如引导 css 文件的链接等。
【问题讨论】：
标签： javascript c# asp.net twitter-bootstrap