javascript - 为 jQuery 工具提示加载 AJAX 数据

Question

我有一些通过 AJAX 加载的内容；带有 li 项的 UL 元素。每个 li 元素都有一个工具提示。我已经设法实现了这一点。

我正在尝试通过 AJAX 为每个 li 元素加载工具提示内容。我该如何处理？

这是我通过 AJAX 加载 li 元素的调用:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip();
            }
        },
        'html'
    );

我现在如何调用 AJAX 函数来为每个工具提示加载数据？我在 <a> 的 id 属性中设置了一个值。每个 li 中的元素我想将其作为参数传递给加载工具提示内容的 AJAX 函数的元素。

这是由 AJAX 加载的用于用 li 项填充 ul 元素的 HTML 部分:

<?php
    foreach($this->related_queries_data as $o){
?>
<li><a href="#" title="<?php echo htmlspecialchars($o['oQuery']->getTitle()) ?>" id="id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" ><?php echo htmlspecialchars($o['oQuery']->getTitle()); ?></a></li>
<?php
    }
?>

Answer 1

我通过使用 this 关键字解决了这个问题，因为 this 指的是当前的 <a>用户悬停的元素。使用它我能够引用 id 中的唯一值每个 <a> 的属性元素。然后我发出一个 jQuery get 请求来检索该特定工具提示的内容。

这是我最终的 javascript 代码的样子:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip({
                    content: function(callback){
                        //console.log(this.id);

                        var query_id = this.id.substring('id_'.length)
                        var tooltip_content_ajax_action = 'get-query-info';
                        var tooltip_content_ajax_params = { 'query_id' : query_id}

                        // get html partial for given query_id
                        $.get(
                            bs_url + '/ajax/' + tooltip_content_ajax_action + '/', // server side script
                            tooltip_content_ajax_params,
                            function(data, textStatus) {
                                if (data) {
                                    callback(data);
                                }
                            },
                            'html'
                        )

                    }
                });
            }
        },
        'html'
    );

更新 虽然这实现了我想要的，但我意识到这不是加载数据的最有效方式，因为每次触发工具提示时，它都会对工具提示内容发出 AJAX 请求，这会导致显着(2-3 秒)延迟在加载工具提示内容之前。因此，我在加载 <li> 的初始 AJAX 请求中加载了工具提示内容。元素，内容在默认隐藏的div中，然后我在tooltip插件的回调内容函数中指定这个内容。这是它现在的样子:

    //start AJAX request
    $.get(
        bs_url + '/ajax/' + ajax_action + '/', // server-side script
        ajax_params, // data for server-side script
        function(data, textStatus) {
            //alert("Response Data Loaded"); //

            $("li", list_elm).remove();
            $("div#related_questions_container").hide("slow");
//          console.log(data);
            if (data) {
                $("div#related_questions_container").show("slow");
                list_elm.append(data);

                // add the tooltip to AJAX loaded content
                $("ul#related_questions li a").tooltip({
                    content: function(callback){
                        //console.log(this.id);

                        var tooltip_content_div = $("div#query_" + this.id);
                        callback(tooltip_content_div.html());

                    }
                });
            }
        },
        'html'
    );

AJAX请求加载的html片段:

<?php
    foreach($this->related_queries_data as $o){
?>
<li>
    <a href="#" title="<?php echo htmlspecialchars($o['oQuery']->getTitle()) ?>" id="id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" ><?php echo htmlspecialchars($o['oQuery']->getTitle()); ?></a>
    <div id="query_id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" class="query_tooltip_content"><!-- set to display:none by default -->
        <div id="query_info">
            <div style="width:50%; float:left;">
                <ul>
                    <li><b>Raised by: </b><?php echo htmlspecialchars($o['oQuery']->getRaisedUser()->getName())?></li>
                    <li><b>Raised on: </b><?php echo htmlspecialchars($o['oQuery']->getRaised()->format('d-m-Y H:i:s'))?></li>
                </ul>
            </div>

            <div style="width:50%; float:left;">
                <ul>
                    <li><b>Assigned to: </b><?php $oUser = $o['oQuery']->getAssignedUser(); echo htmlspecialchars(is_null($oUser)?'-':$oUser->getName());?></li>
                    <li><b>Status: </b><span class="<?php echo $o['oQuery']->getPriority()->getName() ?>"><?php echo htmlspecialchars($o['oQuery']->getStatus()->getDisplayName())?> <?php echo (!is_null($o['oQuery']->getDateQueryClosed()) ? ' on '.$o['oQuery']->getDateQueryClosed()->format('d-m-Y') : '') ?></span></li>
                </ul>
            </div>

            <div style="clear:both;"></div>
        </div></div></li>
<?php
    }
?>