1

投稿のコメントだけのカスタム ページ タイプを読み込んでいます。これは、複数のループ投稿が 1 つのページにある場合に、使いやすくするために Disqus スレッドを使用できるようにするためです。

次の構造で をロードするiFrameと、この構文エラーが発生し続けます。私のエスケープ文字は間違っていますか?

$(".boxyComments a").click(function (event) {
                    event.preventDefault();
                    var post_id = $(this).attr("rel");
    $(".commentsIframeBig")
    .get(0).contentWindow.location.href =
        $("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id);

何が起こっているかはget、Wordpress フックを取得してサイトの URL を出力することです (この場合、最初の呼び出しで出力http://whateverdomainex.comされ、2 番目の呼び出しで出力され/ajax-post-fold/、最後の呼び出しで投稿 ID が出力されるため、URL 全体がhttp://whateverdomanex.com/ajax-post-fold/2825.

代わりに、Chrome コンソールに次のメッセージが表示されます。

Uncaught Error: Syntax error, unrecognized expression: /ajax-post-fold/

アップデート

この変数を所定の位置に配置し、参照$("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id);としてではなく呼び出しました。get

var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);

そのように実装されています：

$(".boxyComments a").click(function (event) {
                    event.preventDefault();
var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);
                    var post_id = $(this).attr("rel");
    $(".commentsIframeBig")
    .get(0).contentWindow.location.href = postLink;

次のChromeメッセージが表示されます。

Uncaught Error: Syntax error, unrecognized expression: http://www.theciv.com/ajax-post-fold/28448

srcの属性にあるはずの URL はiFrame問題ないように見えるのに、この構文エラーがまだ出力されているのはなぜですか?

アップデート

var postLink = "<?= site_url('\/ajax-post\/'); ?>"+post_id;

$(this).closest(".boxy").find(".commentsIframeBig")
.css("display","block")
.animate({height:  "100%"}, 500)
.get(0).contentWindow.location.href = postLink;

上記の適切な構造により、カスタム ページが iFrame に読み込まれるようになりました。ただし、投稿の ID を含む属性を含む追加の構成要素が+page_id正しくrel読み込まれていません。

さらに、元のカスタム ページ テンプレートとして新しい URL を呼び出す場合、投稿の ID を追加しても、投稿 ID を含む正しいページが読み込まれません。まだ混乱していますか？もう一度読んでください。その文を書くのにしばらく時間がかかりました。

いずれにせよ、カスタムページを追加するときに投稿IDをロードpost_idし、iFrameのURLが正しくロードされるように追加された文字列としてロードすることが私の使命です。

アップデート

Disqus コメントを同じページに疑似的に複数回ロードするための最終的な作業コードを次に示します。

基本的に、これはpost idカスタム ページ タイプの最後に a をプッシュすることであり、その結果、投稿のコンテンツと属性要素がカスタム ページ テンプレートに読み込まれます。

そのカスタム ページ テンプレートを削除してページのコメントのみを表示する場合は、ロード/アンロード リアクションを作成して、Disqus を 1 回だけ呼び出し、そのインスタンスを削除してLoad Comments、その後ロードされた投稿内で別のボタンがクリックされたときに再度ロードすることができます。同じぺージに。わーい。最小限の Ajax 読み込みで 1 つのページにコメントする複数の Disqus。

これが私のためにほとんど働いている構造などです。残ったバグは 2 つだけです。最初は空にするときの 2 次読み込みで、次にコールバック関数を使用して新しい Disqus ページを Ajax 要素に再読み込みし.ajaxComplete()ます。

現在起こっていることは、コールバックが基本的にまったく起動されていないことです。私の知る限り。ただし、もう一度クリックすると、電話がかかります。elseただし、これはステートメントのクラス パラメータが満たされているためです。

残っている 2 番目のバグは、他の要素を同じサイズのままにして、適切な要素を拡大する方法を理解するのに苦労していることです。

// Load comments and/or custom post content
    $(".boxyComments a").click(function (event) {
        event.preventDefault();
        $.ajaxSetup({cache:false});
        var post_id = $(this).attr("rel");      var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
        var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
        var postWidth = $(this).closest('.boxy').find('.articleImageThumb').width();

            // close other comments boxes that may already be open
            if($('.commentsOpen').length ) {
                console.log('comments are open');

                $('.bigBoxy').closest('.boxy')
                    .animate({height:(postHeight + excHeight)}, 500);

                $('.showComments')
                    .removeClass('bigBoxy')
                    .removeClass('commentsOpen');

                $('.commentsAjax')
                    .empty(function(){

                        $(this).closest(".boxy").find(".showComments")
                            .addClass("commentsOpen")
                            .addClass("bigBoxy");

                        $(".bigBoxy").find(".commentsAjax ")
                            .css("display","block")
                            .animate({height:  "500px"}, 500)
                            .load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});

                        $(this).closest(".boxy")
                            .ajaxComplete(function() {
                                var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
                                    .height();
                                var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
                                    .height();
                                $(this).closest(".boxy").animate({height:  (postHeight + excHeight)}, 500)
                    });
                });

            } else {

                $(this).closest(".boxyComments").find(".showComments")
                    .addClass("commentsOpen")
                    .addClass("bigBoxy");

                $(this).closest(".boxy").find(".commentsAjax")
                    .css("display","block")
                    .animate({height:  "500px"}, 500)
                    .load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});

                $(this).closest(".boxy")
                    .ajaxComplete(function() {
                        var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
                            .height();
                        var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
                            .height();
                        $(this).closest(".boxy").animate({height:  (postHeight + excHeight)}, 500)
                    });
            }

        });
4

3 に答える 3

1

さて、ここにあなたが望むことをするための完全なコードがあります。実際のコードでは、いくつかのプレースホルダーを交換する必要があります。

<script>
  jQuery(document).ready(function($){$(".boxyComments a").click(function (event) {
event.preventDefault();
    var post_id = $(this).attr("rel");
var postLink = "<?= site_url('/path/'); ?>"+post_id;
    $("#myFrame").attr('src', postLink);
});
});
</script>

サンプルの div と iFrame:

<div class='boxyComments'>
<a href='#' rel='some-url'>test link</a>
</div>

<div class=".commentsIframeBig">
<iframe id='myFrame' height="500px" width="800px" src=''>     
    </iframe>
</div>

ローカルでテストしたところ、問題なく動作しました。iFrame に正しくアクセスできないという問題が発生している可能性があります。iFrame に ID を付けて簡単にできる場合。

于 2013-07-29T18:48:56.483 に答える
0

更新 2

結局、文字列を に含めるべきではないよう<?= get_site_url() ?>です。

代わりに、それに影響を与えるいくつかの変数を作成しました。以下のコードが回答とともに更新されました。

var postDir = "\/ajax-post-fold\/";
var postLink = "<?= get_site_url(postDir); ?>"+"\/ajax-post-fold\/"+post_id;
于 2013-07-28T00:04:12.307 に答える