如何让 ajax 进入 jQuery UI 对话框？

Question

我有一些工作代码，在单击各种链接时使用 ajax 重写一些 html。我希望它做的是在悬停事件中即时创建一个对话框，而不是在单击事件中即时重写一些 html 。这是有效的点击代码：

<html>
  <head>
    <script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
  </head>
    <script language="javascript" type="text/javascript" src="/wp-content/themes/spacious/jquery-ui/jquery-ui.js"></script>
  <body>


<div id="book001">
  <a href="javascript:{}" class="citation"><span class="book">I, Robot</span><br>
  <div id="author001"></div>
</div>
<div id="book002">
  <a href="javascript:{}" class="citation"><span class="book">Stranger In A Strange Land</span><br>
  <div id="author002"></div>
</div>

<script id="source" language="javascript" type="text/javascript">

  var $j = jQuery.noConflict();

  $j( ".citation" ).click(function ( )
  {
    event.preventDefault();
    var get_book = $j(this).find('span.book').html();
    var divName = $j(this).parent().attr('id');
    $j.ajax({                                      
      url: 'book_api.php',       
      data: {
        book:get_book,
      },
      dataType: 'json',    
      success: function(data)
      {
        var content = data[4];
        $j('#'+divName.replace('book','output')).html(content);
      } 
    });
  }); 

  </script>
</body>
</html>

我打算使用 jQuery UI 创建对话框。我对如何获取 ajax 代码来影响对话框内容有点模糊。该页面上将有数百个此类链接，因此我不想预先填充数百个对话框。

Answer 1

用户可以快速触发许多悬停事件，因此将 ajax 调用绑定到每个悬停事件可能不是您的最佳策略。在生产中，您的列表将从数据库中填充，因此如果您获取所需的信息（假设这是 json 的一小部分）以及标题列表，您可以构建 html 这样的json 位于锚标记的数据属性中。然后您可以使用 jQuery 来填充您的工具提示，而不会出现任何延迟或额外调用。

<a data-info="<some data about this book>">I, Robot</a>

$j(".citation").hover(function() {
  event.preventDefault();
  console.log($j(this).data('info'));
});

Answer 2

原来答案很简单。只需为每个作者替换重复的 divs，例如：

<div id="author002"></div>

只有一个 div 作为对话框的容器：

<div id="dialog"></div>

然后只引用 $j( "#dialog" ).html 而不是 $j('#'+divName.replace('book','output')).html。

如何让 ajax 进入 jQuery UI 对话框？

How do I get ajax into a jQuery UI dialog?

jquery

jquery-ui

jquery-dialog