Как активировать диалоговые окна jquery, возвращаемые внутри виджета вкладок, сгенерированного событием ajax datepicker? - PullRequest
Новая
       21

Как активировать диалоговые окна jquery, возвращаемые внутри виджета вкладок, сгенерированного событием ajax datepicker?

0 голосов
/ 04 апреля 2011

Должно быть простое решение, которое уклоняется от меня. Однако я очень плохо знаком с jquery, поэтому уверен, что это часть проблемы.

У меня есть экземпляр datepicker, который отправляет дату через ajax и возвращает xhtml через виджет tabs. Я пытаюсь создать диалоговые окна в этих возвращенных вкладках, которые объясняют, что представляет собой каждый из различных продуктов изображения, которые могут быть возвращены. Может быть любое количество возвращаемых вкладок в зависимости от количества событий обработки изображений, которые произошли в определенный день. И каждая или эти вкладки будут иметь разные изображения, но объяснение «типа» изображения одинаково. У меня сейчас около 9 разных «типов» изображений, но это может измениться в любой момент, поэтому я должен быть гибким. Например, изображение температуры поверхности моря будет отображаться практически на каждой вкладке. Изображение с хлорофиллом будет возвращено только в дневное время. На разных вкладках будет много изображений одного и того же «типа» (разных изображений), но мне нужно только одно диалоговое объяснение для каждого «типа».

В настоящее время я использую диалоговые окна jquery на странице, но, поскольку они созданы в onLoad (), проблем с ними нет. например:

// Диалоговое окно

$ ( '# Dialog_tip'). Диалог ({
autoOpen: false,
ширина: 600,
кнопки: {
"ОК": функция () {
$ (Это) .dialog ( "закрыть");
},
}
});

// Dialog Tip Link
$ ( '# Dialog_tip_link'). Нажмите (функция () {
. $ ( '# Dialog_tip') диалог ( 'открытый');
вернуть ложь;
});
* +1010 *

Я могу контролировать вывод запроса ajax на стороне сервера, когда пишу оба конца. Фактический оригинальный документ xhtml написан на стороне сервера для начала. minDate и maxDate анализируются при первоначальном запуске серверного сценария, чтобы убедиться в наличии допустимого диапазона дат данных.

Вот текущее содержимое этого события, и оно отлично работает.

$ ( '# Datepicker'). DatePicker ({
встроенный: правда,
changeMonth: true,
changeYear: true,
minDate: " minDate ",
maxDate: " maxDate ",
defaultDate: " maxDate ",
onSelect: function (dateText, inst) {
// предупреждение (dateText);
дата = dateText;
$ .Ajax ({
dataType: "html",
Тип: "POST",
URL: "http://HOST/cgi-bin/image_data",
данные: "рои = SITE & дата =" + дата,
успех: функция (данные) {
. $ ( "# Pagetabs") HTML (данные);
// узнаем, сколько вкладок присутствует
last_tab = $ ('# tabs li'). длина - 1;
$ ('# tabs'). tabs ({selected: last_tab});
screenshotPreview (); // сделано так, чтобы я смог сделать
// JS работает для большего
// миниатюры всплывающие (работает)
// tab_dialogs (); ожидать, что я должен позвонить здесь, чтобы
// инициализируем диалоги
} //
успеха и }); // Ajax
} // inst
}); // DatePicker

Однако я не могу понять, как эффективно создавать диалоговые окна, чтобы их можно было скрыть, а затем открыть. Я знаю, что должен вызвать его в событии datepicker. Проблема в том, что я не уверен, что поместить в вышеупомянутую функцию tab_dialogs. Я не могу дать всем изображениям определенного типа один и тот же идентификатор, который нарушил бы DOM. И похоже, что виджет диалога использует идентификатор для ввода.

например, "$ ('# dialog_tip_link'). Click (function () {"

Я могу дать им одинаковый класс для каждого типа изображения.Я не хочу создавать 54 скрытых диалога, для которых действительно есть только 9 уникальных экземпляров.В идеале, для каждого типа изображения должен быть класс.И, надеюсь, я могу выполнить цикл через теги a.product_info (просто имя), чтобы заставить это работать.Очевидно, я не могу не использовать существующий javascript, который есть в onload, поскольку событие ajax ничего не меняет.

Есть какие-то мысли, которые мне очень понравились, мои мысли, похоже, ушли на день / неделю?

PS, следующим шагом будет размещение вкладок в виджете «Аккордеон», чтобы сначала отображались ежедневные изображения, а затем составные изображения в разделе нижнего аккордеонного стиля.

1 Ответ

0 голосов
/ 05 апреля 2011

Это вроде работает для tab_dialog, за исключением того, что теперь у меня есть несколько обработчиков событий для каждой ссылки, поэтому нужно как-то подумать об использовании .one ()?

function tab_dialogs () {

$ ("div.product_info a"). Each (function () {
var className = $ (this) .attr ('class'); {
var $ linkclassName = className + '_link'; {
var $ divlinkclassName = "div." + className + '_link'; {

$($divlinkclassName).dialog({
 autoOpen: false,
 width: 600,
 buttons: {
  "Ok": function() { 
  $(this).dialog("close"); 
  }, 
 }
});


$(this).click(function(){
 $($divlinkclassName).dialog('open');
 return false;
});

}); }

...