0

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();
    });
});
4

1 に答える 1

3

要素をループしてプラグインを初期化し、それぞれを個別のインスタンスとして扱うことができます。プラグイン内ではthisアクセスできない場合がありますが、eachループ内ではアクセスできます。したがって、必要なデータを含む変数を作成し、その変数をプラグインに渡します

$('a.title_dialog[rel]').each(function(){
    var ajaxUrl=$(this).attr('rel');
    $(this).qtip({
         content: {
            text: 'Loading...',
            ajax: {
                url:ajaxUrl,
          ..........

    })
})

options/showヒントを開くためのイベントとしてクリックを設定するために見たい

于 2013-02-06T04:15:25.697 に答える