Question

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

我检查了以下

jQuery ui Dialog（http://jqueryui.com/demos/dialog/）
- 不提供使用ajax查询获取数据的选项，
- 我不希望每行隐藏数据
jQPOOOP jQuery插件 http://plugins.jquery.com/project/jQPOOOP
- 看起来像是在html数据上工作，我想要一些可能适用于json数据的东西

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

Answer 1

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

解雇你的ajax
在您的处理程序中准备并显示对话框
在对话框的按钮处理程序中，如果需要，可以触发更多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" );
}

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

带有Ajax内容的jQuery弹出窗口

1 个答案: