Question

我有一个Bootstrap模式，它有一堆链接，每个链接触发AJAX调用。用户可以单击这些链接继续进行模态的其他工作。期望AJAX成功回调将自动修改父HTML文档中的其他DOM元素。

我能够成功加载Modal，调用AJAX调用并修改底层DOM以显示必要的信息。但是，只要修改了DOM，模态就会从屏幕上消失，并且屏幕处于禁用状态。我检查了HTML并看到模态不可见但是主体的类设置为modal-open

不确定我的错误是什么，但感谢您的帮助。下面是用户单击元素内部内容时显示AJAX调用的代码片段

$(document).on('click', '.link', function() { //this is when the user clicks on a link in the modal
            if ( $( this ).hasClass( 'linked' ) ) {
                $( this ).removeClass( 'linked' );
            } else {
                $( this ).addClass( 'linked' );
            }
            $.ajax({ 
                url: '/cake/mycontroller/link/' + $(this).parents('div#link-row').data('object-id') + '/' + objId,
                type: 'POST',
                cache: false,
                success: function(response) {
                    var res = $.parseJSON(response);
                    if (res.success) {
                        alert('success'); 
                        //this second ajax call is to refresh the contents of a particular DIV in the screen
                        $.ajax({
                            url: '/cake/candidatesjobs/index/' + jobId,
                            type: 'ajax',
                            success: function(data) {
                                $('.links').html(data.content);
                            }
                        });
                    } else {
                        //fail
                    }
                }
            });
        });

Answer 1

好的解决了。

问题是我在DIV中的模态代码被第二次AJAX调用刷新了 - 换句话说，Modal的底层代码被第二次AJAX调用消灭并重新加载。为了解决这个问题，我将模态代码从DIV移动到主<body>标记，问题就解决了。

通过AJAX回调修改DOM时，Bootstrap Modal消失

1 个答案: