PHPへのAJAX呼び出しでqTipプラグインを適用する際に問題が発生しました。過去にgetJSON呼び出しを行ったことがあります。PHP側ではなく、JSに問題があります。これが基本です。rel属性を持つ数百のリンク(アンカー)があります。各rel属性には、HTMLまたはJSON(機能するものは何でも)を返すPHPコードへのAJAX呼び出しのURLが含まれています。
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を使用してrelURLを取得し、それをダンプすることはできますが、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();
});
});