2

長いタイトルで申し訳ありませんが、問題の適切な表現です。

WordPress Web サイトで AJAX を使用して内部ページをロードしようとしています。この機能は機能していますが、内部ページをロードするときに、これらの内部ページでロードして実行することを意図した Javascript/jQuery が実行/ロードされていません。

問題を確認してから再現するには、次の 2 つの手順があります。

1st - このページを見てください: http://www.trekradio.net/dev/schedule - このページにはスケジュールが含まれています - 日はタブで、スケジュール項目をクリックすると、jQuery ポップアップが開きます。Javascript は右側のサイドバーでも使用されています。「support us」ウィジェットでは、ドロップダウンは JS ベースであり、Twitter フィードは Twitter API スクリプトを使用して読み込まれます。ご覧のとおり、すべてのスクリプトが存在し、正常に動作しています。

2 番目 - http://www.trekradio.net/dev/ - メイン ページに移動し、メイン メニューの [スケジュール] をクリックします。AJAX を使用してスケジュール ページをロードしますが、ページ上のすべてのスクリプトが見つからないか、実行されていません。

これを解決するために多くのことを試しました.スケジュールページでは、いくつかのスクリプトがページ自体に埋め込まれています.ヘッダーがリロードされないため、スクリプトが実行されることを期待して、これらをヘッダーに移動しようとしました. - 彼らはしませんでした。

また、ここに記載されている解決策を試みました: Executing <script> within <div> received by AJAX - 動的スクリプト パターンの使用について説明していますが、正しく機能させる機能がないか、機能しません。私が達成しようとしていることの文脈で適切に。

ここで提案されているソリューションも使用してみました.jquery html()はスクリプトタグを取り除きますが、やはり動作しませんでした.

ajax機能を強化している私のajax.jsの内容は次のとおりです。

jQuery(document).ready(function($) {
    var $mainContent = $("#ajax-content-container"),
        siteUrl = "http://" + top.location.host.toString(),
        url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
        location.hash = this.pathname;
        return false;
    }); 

    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 

    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 

        if (!url) {
            return;
        } 

        url = url + " #main-content-container"; 

        $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
            $mainContent.animate({opacity: "1"});
        });
    });

    $(window).trigger('hashchange');
});

Google で調べたところ、多くの人が AJAX Web サイトでこの種の問題を抱えており、読み込まれたページでスクリプトを実行するのに苦労しています。私は自分のウェブサイトに申請できますが、他の人も自分のウェブサイトで使用できます。

人々が回答にコードを含めるか、少なくとも必要なことを達成するためにコードを変更する方法を明確に説明していただければ幸いです。私はまだjQuery/AJAXを学んでいるので、おそらく私は愚かで比較的単純な解決策を見落としていますが、十分に文書化された回答は、私だけでなくコミュニティ全体にも高く評価されると思います.

4

3 に答える 3

2

これは、URL の一部としてセレクター式を指定したためです。

http://api.jquery.com/load/

ドキュメントごと：

ただし、次の場合、#b に読み込まれるドキュメント内のスクリプト ブロックは取り除かれ、実行されません。

$('#b').load('article.html #target')

URL にはセレクターがあります。

url = url + " #main-content-container";
于 2012-05-24T18:28:12.430 に答える
2

私はこれを自分で解決したと思います-それが最もエレガントな解決策かどうかはわかりませんが、うまくいくようです。

基本的に、内部ページにロードするすべてのスクリプトを取得し、「inner-scripts.js」というファイルに入れ、ajax.js を次のように変更しました。

jQuery(document).ready(function($) {
    var $mainContent = $("#ajax-content-container"),
        siteUrl = "http://" + top.location.host.toString(),
        url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
        location.hash = this.pathname;
        return false;
    }); 

    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 

    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 

        if (!url) {
            return;
        } 

        url = url + " #main-content-container"; 

        $mainContent.animate({opacity: "1.0"}).html('<div id="loading">Loading the next page for you.  Please stand by!</div>').load(url, function() {
            $mainContent.animate({opacity: "1"});
            $.getScript('http://www.trekradio.net/dev/wp-content/themes/tr2012/js/inner-scripts.js', function() {});
            $.getScript('http://ui.jquery.com/latest/ui/effects.core.js', function() {});
            $.getScript('http://twitter.com/javascripts/blogger.js', function() {});
        $.getScript('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=trekradio&include_rts=1&count=3&callback=twitterCallback2', function() {});      
        });
    });

    $(window).trigger('hashchange');
});
于 2012-05-27T16:58:33.023 に答える
1

自分で質問に答えたことは知っていますが、別の方法があります。

wordpress で ajax リクエストを作成する従来の方法は、http: //codex.wordpress.org/AJAX_in_Pluginsに記載されているように admin-ajax インターフェイスを使用することです。

これにより、関数を ajax リクエストにアタッチすることができ、関数は多かれ少なかれ WordPress のコンテキストで実行されます。したがって、次のように大まかに書くことができますfunctions.php：

add_action('wp_ajax_trekradio_get_ajax_page', 'trekradio_get_ajax_page');
add_action('wp_ajax_nopriv_trekradio_get_ajax_page', 'trekradio_get_ajax_page');

function trekradio_get_ajax_page() {

    $page_id = $_POST['page_id']; // send this in the ajax request

    if ( the page is a certain page that needs scripts ) {
        print_relevant_script_tags();
    }

    print_page_content( $page_id );

    die(); // you have to do this at the end
}
于 2012-05-31T10:25:14.703 に答える