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

【问题标题】：How do I get ajax into a jQuery UI dialog?如何让 ajax 进入 jQuery UI 对话框？
【发布时间】：2015-04-20 01:14:37
【问题描述】：

我有一些工作代码在单击各种链接时使用 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 代码影响对话内容有点模糊。该页面将包含数百个此类链接，因此我不想预先填充数百个对话框。

【问题讨论】：

book_api.php 返回了多少数据？或者要显示的数据是多行还是只有几行？也许你可以使用 jquery ui 工具提示或类似的。或者肯定你必须使用对话框？
只有几行，所以工具提示可能很好，但我仍然会遇到同样的问题，即不希望预先填充每个工具提示的权重。将有数百个。

标签： jquery jquery-ui jquery-dialog

【解决方案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'));
});

【讨论】：

有一种方法可以停止悬停事件，对吧？我的意思是只有在他们悬停 2 秒或类似的情况下才会触发事件。
我不担心延迟或额外调用，我担心在不需要大部分工具提示数据时页面加载时间过长。
你可以试试hoverIntent 这样的插件，这可能就是你所需要的！
虽然 hoverintent 非常漂亮，但似乎没有人关注这个问题。我要问的是如何在事件中动态创建内容，而不是如何将“点击”更改为“悬停”。

【解决方案2】：

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

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

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

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

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

【讨论】：