Пейджинговые кнопки и повторное использование диалоговых окон JQuery

Question

У меня есть диалоговое окно с загруженным контентом AJAX.

Я хочу иметь две кнопки в диалоговом окне: следующий и предыдущий, которые будут загружать новый контент AJAX в диалоговое окно.

ли лучше повторно использовать текущую диалогового окна, или уничтожить его и создать новую?

Когда я попытался повторно использовать диалоговые окна (путем обновления внутреннего div со свежим содержимым AJAX), диалоговое окно не хочет отображать его.

Когда я попытался уничтожить и создать новый, он будет часто показывать два диалоговых окна (новое и старое).

Любые идеи?

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. Когда пользователь нажимает следующее или предыдущее, диалоговое окно уничтожается, а новый динамически создается снова.

В приведенном ниже примере мне понадобилось диалоговое окно для просмотра через разных студентов. Переменная students_ids передается из php в виде строки. например. stuid1 | stuid2 | stuid3. Текущий_student является одним из этих идентификаторов. например. 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'); 
    } 
}); 

}