我在使用带有AJAX调用PHP的qTip插件时遇到了一些问题。我过去做过getJSON调用。我遇到了JS的问题,而不是PHP方面。这是基础知识。我有几百个具有rel属性的链接(锚点)。每个rel属性都包含对PHP代码的AJAX调用的URL,该代码将返回HTML或JSON(无论什么工作)。
http://craigsworks.com/projects/qtip2/
CodeIgniter代码的链接如下所示(https):
<a rel="https://domain/cataloguers/ajax_detail/144969" class="title_dialog title_color" href="#">A Strange and Wonderful Prophet ... May 30th 1803. A.L. 5803... [A Manuscript...</a>
Javascript是我的问题所在。
$(document).ready(function()
{
$('a.title_dialog[rel]').click().qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('rel'),
type: 'GET',
data: {},
dataType: 'json',
success: function(data) {
// Set the content manually (required!)
console.log(data);
this.set('content.text', 'Successful!');
}
},
title: {
text: 'Catalogue Item Details:',
button: false
}
}
})
});
我可以使用console.log获取rel URL并将其转储出去,但我似乎无法获得任何类型的AJAX成功输出(数据)。我确信我可以通过PHP代码生成HTML或JSON;它已经过测试。我是否需要某种.each()或回调函数来解决这个问题?
工作解决方案:
/*
* ToolTip - qTip v2
* For Title Details
*/
$(document).ready(function() {
$('a.title_dialog[rel]').each(function() {
var ajaxUrl=$(this).attr('rel');
$(this).qtip({
content: {
text: $(this).attr('rel'),
ajax: {
url: ajaxUrl,
type: 'GET',
data: {},
dataType: 'json',
success: function(result) {
this.set('content.text', result.content);
}
},
title: {
text: 'Catalogue Item Details:',
button: true
}
},
position: {
at: 'bottom center',
my: 'top center',
viewport: $(window),
effect: false
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'qtip-light qtip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) {
event.preventDefault();
});
});
答案 0 :(得分:3)
循环元素以初始化插件,以便您可以将每个元素视为单个实例。在插件中this
可能无法访问,而在each
循环内则可以访问。因此,您需要使用所需数据创建变量,并将该变量传递给插件
$('a.title_dialog[rel]').each(function(){
var ajaxUrl=$(this).attr('rel');
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url:ajaxUrl,
..........
})
})
您想查看options/show
将点击设为事件以打开提示