ajax调用中jquery对话框上未选中单选按钮

radio button not selected on jquery dialog box in ajax calls

本文关键字：单选按钮 对话框 调用 jquery ajax      更新时间：2023-09-26

我有一个问题。我有一个jquery模态对话框，上面有两个单选按钮。在我的代码中，我有jQuery ajaxStart和ajaxStop处理程序来检查Ajax请求（当有Ajax请求执行时，我还弹出了另一个jQuery对话框来显示Loading…消息或其他消息）。当我选择每个单选按钮时，就会发出一个ajax请求。我遇到的问题是，由于ajax事件（ajaxStart、ajaxStop），当我单击单选按钮时，它们没有被选中（尽管我得到了正确的单选按钮值）。知道是什么原因造成的吗？

你可以看到我用这个jsfiddle 看到的东西的插图

感谢

问题似乎来自#ajax-dialog对话框的modal: true选项。如果您将该选项设置为false，它将按预期工作。升级到jquery和jquery ui的最新版本似乎并没有解决这个问题。

解决方案1

将模态选项设置为false。

$('#ajax-dialog').dialog({
    autoOpen: false,
    modal: false, // set to false
    title: 'Loading...'
});

演示

解决方案2

您可以使用插件BlockUI，它允许阻塞整个页面或特定元素。它的工作原理是显示一个覆盖div（在页面或元素上），禁止与底层内容进行任何交互。您可以显示消息并自定义外观&感觉

阻止对话框内容（使用单选框）：

$("#ajax-dialog").ajaxStart(function() {
    $('#gender-dialog').block({ 
            message: '<h1>Loading...</h1>', 
            css: { border: '3px solid #a00' } 
        }); 
});
$("#ajax-dialog").ajaxStop(function() {
    $('#gender-dialog').unblock(); 
});

演示

阻止整页：

$("#ajax-dialog").ajaxStart(function() {
    $.blockUI({ message: '<h1>Loading...</h1>', baseZ: 2000 });  
});
$("#ajax-dialog").ajaxStop(function() {
    $.unblockUI();
});

请注意选项baseZ，在这种情况下，这是覆盖的z索引，默认值为1000。将其设置为比对话框更高的值以覆盖它。

DEMO

相关文章：