jQueryUi вкладки динамически загружаются в jQueryUi диалог не работает

Question

У меня есть приложение Ruby and Rails.

Я загружаю форму с помощью Ajax. Форма представляет собой вид рельсов. Форма, в свою очередь, содержит вкладки jQueryUi.

К сожалению, вкладки не отображаются, когда форма загружается в диалоговом окне jQuery.

Вот код DialogBox

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').tabs(); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

Как ни странно, если изменить код, как следующие, вкладки появляются, но только тогда, когда я нажимаю на вкладках.

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').live('click', function(){ 
      $(this).tabs() 
     }); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

Answer 1

У вас есть проблема с синхронизацией. Порядок исполнения, вероятно, будет что-то вроде этого:

1. new_candidate_dlg.load(url)
2. new_candidate_dlg.dialog(...).
3. new_candidate_dlg.dialog('open').
4. .load(url) заканчивает и загружает HTML в new_candidate_dlg.

Итак, когда open обратного вызова для диалога выполняется, нет #tabs элемента доступен и $('#tabs').tabs() вызова не делает ничего. Вы хотите связать ушки послеload загрузил HTML и load имеет функцию обратного вызова, который можно использовать только для этой цели:

new_candidate_dlg.load(url, function() { $('#tabs').tabs() }); 

, а затем удалить open обратного вызова из вашего new_candidate_dlg.dialog({ ... }) вызова.

Этот обратный вызов работает:

open: function() { 
    $('#tabs').live('click', function() { 
    $(this).tabs() 
    }); 
} 

, потому что вы используете live для события щелчка (так #tabs не должен существовать, когда вы звоните $('#tabs').live()), и вы не будете нажав ничего, пока не будет на странице и готов к работе.

Answer 2

Я новичок в кодировании, но я сделаю снимок. Вы либо пропустили что-то в своей функции закрытия, чтобы идентифицировать элемент (# для id attr), либо вы неверно указали переменную, которую вы ранее объявили.

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

Обычно я вижу e.preventDefault(); в верхней части функций события. Ваш вызов метода open должен быть в двойных кавычках.

Ваш второй пример работает, когда вы щелкаете вкладками, потому что он запускает метод .tabs() как обработчик события щелчка. (live() устарел, если вы используете jQuery новее, чем 1.7)

Можете ли вы разместить html в своем диалоговом окне? Это поможет мне попытаться дать лучший ответ.