可能在Bootstrap对话框js插件显示页面的一部分

Question

Plugin on Github: https://github.com/nakupanda/bootstrap3-dialog

有关JS:

        $(".dialog-launch").on("click",function(e){
            e.preventDefault();
            BootstrapDialog.show({
                title: 'Basic Title',
                message: $('<div></div>').load('some-page.php'),
                buttons: [{
                    label: 'Cancel',
                    cssClass: "btn-danger",
                    action: function(dialogItself){
                        dialogItself.close();
                    }
                }, {
                    label: 'Continue',
                    cssClass: 'btn-primary',
                    action: function(){
                        // Continue Function;
                    }
                }]
            });
        });

这个js的作用是打开一个Bootstrap对话框，其中包含some-page.php的内容。

我想做的是只加载some-page.php的一部分，如下所示:

<!-- LOAD THIS -->
<div class="first-section-to-load">...</div>
<!-- END FIRST LOAD -->
<!-- LOAD SECOND -->
<div class="second-section-to-load">...</div>
<! END SECOND SECTION -->

原因是因为我需要一个模态，有一个形式在多个部分。它在启动时加载步骤1，一旦用户按下继续按钮，它就会删除步骤1并加载步骤2。

到目前为止，似乎很容易通过按钮操作来操纵模态中的数据，甚至改变它加载some-page.php的消息。我可以很容易地把每一步放在一个单独的文件中，只是改变消息和改变它正在加载的页面，但如果我能把我想要的所有表单内容放在some-page.php中，然后使用按钮来操作向用户显示的内容和时间，那么这似乎效率较低。

这可能吗?我已经加载了一个小提琴实验:http://jsfiddle.net/qyamk5m4/

Answer 1

我明白了:

    $(".dialog-launch").on("click",function(e){
        e.preventDefault();
        BootstrapDialog.show({
            title: 'Basic Title',
            message: $('<div></div>').load('some-page.php #section-one-id'),
            buttons: [{
                label: 'Cancel',
                cssClass: "btn-danger",
                action: function(dialogItself){
                    dialogItself.close();
                }
            }, {
                label: 'Continue',
                cssClass: 'btn-primary',
                action: function(dialog){
                    dialog.setMessage($('<div></div>').load('some-page.php #section-two-id'))
                }
            }]
        });
    });