Question

我有一个包含AJAX加载内容的对话框。

我想在对话框上有两个按钮：next和previous，它们会将新的AJAX内容加载到对话框中。

重新使用当前是否更好对话框，或销毁它并创建一个新的？

当我尝试重新使用对话框时（通过使用新的AJAX内容更新内部div），对话框不希望显示它。

当我尝试销毁并创建一个新的时，它通常会显示两个对话框（新旧）。

有什么想法吗？

Answer 1

对话框可能很难理解如何重复使用它。

尝试这样的事情：

var cur = 1;
$("#dialog").load('ajax/content'+cur+'.html').dialog({
    buttons: {
        Next: function() {
            cur++;
            $(this).load('ajax/content'+cur+'.html');
        },
        Previous: function() {
            cur--;
            $(this).load('ajax/content'+cur+'.html');
        }
    }
});

应该帮助你得到你想要的东西。

Answer 2

感谢petersendidit。我使用了类似的想法，但我不得不为我的动态php和AJAX驱动的网站重做它。

让它工作的关键是动态创建div，而不是使用DOM中的现有div。当用户单击下一个或上一个时，将破坏该对话框并再次动态创建一个新对话框。

在下面的示例中，我需要一个对话框来浏览不同的学生。 students_ids变量作为字符串从php传递。例如。 stuid1 | stuid2 | stuid3。 current_student是其中一个ID。例如。 stuid2。

function opendialog_student(url, title, current_student, students_ids) {
var $dialog = $('<div></div>');
$dialog.load(url + '&student_id=' + current_student);
$dialog.dialog({ title: title, modal: true, draggable: false, resizable: false, closeOnEscape: false, position: 'top', width: 800, height: 600,
    buttons: { "Next Student": function() { 
        students = students_ids.split('|');
        for (var i = 0;i<students.length;i++) {
            if (students[i] == current_student) {
                var next_student = students[i+1];
            }
        }
        if (!next_student) {
            next_student = students[0];
        }
        opendialog_student(url, title, next_student, students_ids);
        $dialog.dialog('destroy');
    }, "Previous Student": function() { 
        students = students_ids.split('|');
        for (var i = 0;i<students.length;i++) {
            if (students[i] == current_student) {
                var previous_student = students[0];
            }
        }
        if (!previous_student) {
            previous_student = students[0];
        }
        opendialog_student(url, title, previous_student, students_ids);
        $dialog.dialog('destroy');
    } },
    close: function() { 
        $dialog.dialog('destroy');
    }
});

}

分页按钮和重用Jquery对话框

2 个答案: