2

AJAXとShadowboxを使用してコンテンツをロードしたい

基本的に、javascriptがオフになっている場合に備えて、ユーザーにページに移動してもらいたいと思います。だからこれが私がやりたいことです：-

1）クリックイベントをキャンセルします。つまり、ユーザーは別のページに移動してはなりません。

2）jQueryのajax関数を使用してコンテンツをロードする

3）シャドウボックス内にコンテンツを表示する

私のコードは、ajaxを使用してコンテンツをロードするまでは問題なく機能しますが、シャドウボックスが表示されず、URLが更新されます。おそらく、すべてが空白になります。

jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "/ajax-post.php?p="+id, 
            success: function(data){
                Shadowbox.open({
                    content:    data,
                    player:     "html",
                    height:     350,
                    width:      350
                });
            }
         });
        return false;
    });

更新1

このコードを試してみましたが、シャドウボックスが読み込まれるとすぐに、ドキュメントが再読み込みされて白くなります。

Shadowbox.init({
    skipSetup: true,
    players: ["html"]
});


  // LOAD
jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('.post h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id, 
            success: function(data){
                show_box(data);
            }
         });
        return false;
    });

});

// shadowbox関数show_box（html）{Shadowbox.open（{content：html、player： "html"、height：350、width：350}）; }

更新2

さて、prbolemを取得しました。ajaxを介して取得しているhtmlには、JavaScriptが含まれているため、ページがリロードされます。

なぜこうなった ？何か案は ？

4

2 に答える 2

1

JavaScriptエラーが発生しないので、それを分解してデバッグしてみてください。

クリックイベントへのバインドとオーバーライドが正しく機能していることを確認します。

$('h2 a').bind('click', function() {
    alert('click even fired');
    return false;
});

それが機能する場合は、ajaxリクエストが返すデータを確認してください。

$('h2 a').bind('click', function() {
    var id = $(this).attr('id');
    $.ajax({ 
        url: "ajax-post.php?p="+id, 
        success: function(data){
           alert(data);
        }
     });
    return false;
});

コードは機能するように見えるので、他の場所で何か問題があるか（この場合、最初のテストは失敗する可能性があります）、または非常に奇妙なデータが返されると思います。

于 2010-02-03T13:50:10.660 に答える
1

実行する必要があります

Shadowbox.setup('h2 a');

これにより、再初期化され、ajaxがロードされたコンテンツにバインドされます

于 2012-08-28T21:05:08.957 に答える