jQuery всплывающее окно с контентом Ajax

Question

У меня есть приложение Rails. Я показываю несколько строк данных на странице. Для каждой строки я хочу создать кнопку, которая будет отображать некоторые дополнительные данные во всплывающем окне для этой строки.

Я проверил следующее

1. JQuery UI Диалог (http://jqueryui.com/demos/dialog/)

   • Не дает возможность получать данные с помощью ajax-запроса,
   • Я не хочу скрытых данных для каждой строки

2. jQPOOOP Плагин jQuery http://plugins.jquery.com/project/jQPOOOP

   • выглядит как работает с HTML-данными, я хочу что-то, что может работать с данными JSON

Есть ли способ построить что-то, используя только диалог jquery ui, но который работает с данными json, полученными из запроса ajax?

Answer 1

Да, не думайте, что это диалоговое окно, в котором можно использовать данные json. Сделайте это:

1. стреляй в свой Аякс
2. в вашем обработчике подготовить и открыть диалог
3. в обработчике кнопок для диалогового окна, если хотите, запустите еще ajax, а затем обработайте результаты.

Ключ в том, чтобы думать о диалоге иначе, чем примеры, которые вы видите на веб-сайте jQuery UI. Заполните диалог динамически, просматривая возвращаемые значения JSON и используя селекторы jQuery, чтобы найти то, что вам нужно, создать больше и вставить новые элементы в содержимое диалога.

Вот более конкретный пример:

$( "#dialog" ).dialog({
modal: true,
buttons: {
      Ok: function() {
        fire_ok_ajax_with_handler(); //pretend the handler is ok_handler

    }
  }
});


// this method is called when the action the user takes wants to
// open the dialog. Note that it doesn't actually open the dialog
// but instead starts the ajax process of getting the data it needs
// to prepare the dialog
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
    fire_ajax_to_start_stuff();
    return false;
});

function fire_ajax_to_start_stuff(...) {
    // assume start_handler method
}

function start_handler(data) {
  //process data, which can be json if your controller formats it that way
  // use the data to dynamically setup the dialog,
  // show the dialog
  $( "#dialog" ).dialog( "open" );
}

function fire_ok_ajax_with_handler() {
  // this is where you set up the ajax request for the OK button
}

function ok_handler(data) {
  // handle possible errors messages
  // close the dialog
  $( this ).dialog( "close" );
}

Обратите внимание, что в этом примере МНОГО псевдокода / размахивания руками, но он должен дать вам базовый подход.