带有 Ajax 内容的 jQuery 弹出窗口

Question

我有一个 Rails 应用程序。我在页面上显示多行数据。对于每一行，我想创建一个按钮，该按钮将在该行的弹出窗口中显示一些额外的数据。

我检查了以下

1. jQuery ui 对话框 (http://jqueryui.com/demos/dialog/)

   • 不提供使用 ajax 查询获取数据的选项，
   • 我不想为每一行隐藏数据

2. jQPOOOP jQuery 插件 http://plugins.jquery.com/project/jQPOOOP

   • 看起来好像适用于 html 数据，我想要一些可能适用于 json 数据的东西

有没有办法只使用 jquery ui 对话框来构建一些东西，但它可以处理从 ajax 请求中检索到的 json 数据？

Answer 1

是的，不要认为它是能够使用 json 数据的对话框。这样做：

1. 启动你的 ajax
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" );
}

请注意，该示例中有很多伪代码/挥手，但它应该为您提供基本方法。