Bootbox 对话框中的表单
Form in Bootbox Dialog
我想显示一个包含 "OK" 按钮的引导框对话框。当用户单击 "OK" 按钮时,它应该 POST 返回消息 ID,以确认用户已查看该消息。 Bootbox对话框就是这种形式。我没有看到一种方法可以使对话框按钮成为带有隐藏字段的提交表单,我认为这是实现我的目标的正确方法。
感谢 Isabel Inc and Mistalis 的有用评论,我有了一个可行的解决方案。
针对我的实施的说明:
- 消息包含需要响应的图像,因此我为每个图像添加适当的 Bootstrap 类
- 消息可能有 links。单击 link 相当于在对话框
上单击 "OK"
而 JavaScript 让它成为现实...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from <a href="https://whosebug.com/users/244826/sonny">Sonny</a>.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));
我想显示一个包含 "OK" 按钮的引导框对话框。当用户单击 "OK" 按钮时,它应该 POST 返回消息 ID,以确认用户已查看该消息。 Bootbox对话框就是这种形式。我没有看到一种方法可以使对话框按钮成为带有隐藏字段的提交表单,我认为这是实现我的目标的正确方法。
感谢 Isabel Inc and Mistalis 的有用评论,我有了一个可行的解决方案。
针对我的实施的说明:
- 消息包含需要响应的图像,因此我为每个图像添加适当的 Bootstrap 类
- 消息可能有 links。单击 link 相当于在对话框 上单击 "OK"
而 JavaScript 让它成为现实...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from <a href="https://whosebug.com/users/244826/sonny">Sonny</a>.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));