正在为 jQuery 工具提示加载 AJAX 数据
Loading AJAX data for a jQuery tooltip
我有一些内容是通过 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 函数来为每个工具提示加载数据?我在每个 li
项目中的 <a>
元素的 id 属性中设置了一个值,我想将其作为参数传递给加载工具提示内容的 AJAX 函数。
这是由 AJAX 加载的 HTML 部分,用于用 li 项填充 ul 元素:
<?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
}
?>
我通过使用 this 关键字解决了这个问题,因为 this 指的是用户悬停在其上的当前 <a>
元素。使用它,我能够引用每个 <a>
元素的 id
属性中的唯一值。然后我发出了一个 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 中,然后我在回调中指定此内容工具提示插件的内容功能。这是它现在的样子:
//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
}
?>
我有一些内容是通过 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 函数来为每个工具提示加载数据?我在每个 li
项目中的 <a>
元素的 id 属性中设置了一个值,我想将其作为参数传递给加载工具提示内容的 AJAX 函数。
这是由 AJAX 加载的 HTML 部分,用于用 li 项填充 ul 元素:
<?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
}
?>
我通过使用 this 关键字解决了这个问题,因为 this 指的是用户悬停在其上的当前 <a>
元素。使用它,我能够引用每个 <a>
元素的 id
属性中的唯一值。然后我发出了一个 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 中,然后我在回调中指定此内容工具提示插件的内容功能。这是它现在的样子:
//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
}
?>