2012-01-03 12 views
2

FacebookのようなJQMとTwitterを統合しようとしています。 2番目のページは最初のページでアンカータグを使用してロードされ、2番目のページにはAJAXリクエストが使用されます。jQuery MobileとFacebook Like LikeとTwitterの統合

問題は、FacebookとTwitterのjavascriptスクリプトが2ページ目の読み込み時に読み込まれないということです。

私はAJAXをオフにすることができますが、私はトレードオフとしてこの機能を望んでいません。

JQMのAJAXリクエスト後に特定のページにjsスクリプトを再ロードする方法はありますか? (これはjQueryライブ関数と同様に動作するはずだと思います)。

私はCakephp 2.0.4を使用しています。

答えて

2

適切なページ標準を使用していますか? data-role="page"要素内にスクリプトをロードする必要があります。これは、JQMフレームワークがAJAX要求から抽出するものなのでです。

<div data-role="page"> 
    <!-- Scripts here --> 
</div> 

ドキュメント - http://jquerymobile.com/test/docs/pages/page-anatomy.html

+0

大丈夫です。私はdata-role = pageでdiv内にjsを追加しました。それはあなたに感謝しています!しかし、今問題は最初にロードしてから別のページに移動してからこのページに戻ったときです... lol –

+0

JQMフレームワークには、ページのロードと初期化のための一連のイベントがあります等々。任意のJSを実行する必要がある場合は、コードをそこに置く必要があります。 – JohnP

+0

JQMのドキュメントに従ってpageinit機能を試しましたが、最初の実行後にスクリプトをロードしませんでした。 –

0

ここでは、第2ページのdivにはiframeを作成し、ソリューションです。 そして、iframeのsrcは、つぶやきや好きなものを表示するページになります。

このようにして、iSafeがリロードする必要はありません。iframeは好き嫌いやツイートのコードをリロードします。

私はあなたの問題を解決することを願っています。

1

私はこれに2つの解決策があると思います。まず、ハイパーリンクに 'data-ajax = "false"'を追加して、リンクされたページのAjaxページ遷移をオフにします。これは、バックボタンに同じコンテキストを保持するかどうかによって、あなたにとって適切な場合とそうでない場合があります。通常はそうしているため、2番目の解決策を試すことができます。

これは、ページに複数の「いいね」ボタンがあるときに使用するものです。ページが作成されたとき(JQMobileページのイベントを作成する)、すべてのfbのようなボタンを見つけてそれらの処理をトリガーします。私はあなたに完全な例を与えることはできませんが、このようなものは、(私はあなたがXFBML形式を使用していると仮定していますのでご注意「< FBを:ような.../>」):

  1. が好きなすべてのあなたのFBを探しますjQueryセレクタを使用して
  2. トリガーそれらのようなもの使用して:それらすべてがフルのLikeボタンに拡張されることになります

    $('fb\\:like').each(function() { FB.XFBML.parse(this); }); 
    

を。

私はこれのセレクタ部分をテストしていませんが、XFBML.parseビットは私が使用しているものであり、動作することに注意してください。私はTwitterでも同じことをしていませんが、同等のコードを見ることに興味があります。

このコードを一度解析すると、fb:like要素がHTMLに存在しなくなるため、このコードを複数回実行することは安全です。

2

私は同じ問題を抱えていたし、私はそれをこのように解決:

1:あなたのhtmlに

<div data-role="page" class="page-class" id="page-id"> 

2あなたのページのdivにタグまたはIDを作成します。コードは、ツイッターで提供されますと、それをjqueryの構文を使用するように変更してください。

$('.page-class').live('pageinit',function(event){ 
    d = $(document)[0]; 
    s = "script"; 
    id = "twitter-wjs"; 

    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (!d.getElementById(id)) { 
     js = d.createElement(s); 
     js.id = id; 
     js.src = "//platform.twitter.com/widgets.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    } 
}); 

私は可能な限り最小限のtwitterのコードを変更しました。おそらく同じことをするより良い方法があります。

Facebookの場合、同じアプローチを使用することができます。

誰もが同じ問題に直面しているのを助けてくれることを願っています。

3

ツイートボタンの埋め込みコードには、 'twitter-wjs'というIDの要素をチェックするif文があります。ページが読み込まれる前にこの要素を削除すると、ツイートボタンが機能します。

$(document).bind('pagebeforeload', function(){ 
    $('#twitter-wjs').remove(); 
}); 

これは、facebookのようなボタンを修正します。私はそれがなぜ機能するのか完全にはわかっていないが、FacebookのAPIと関係がある。

$(document).bind('pageshow', function() { 
    try{ 
     FB.XFBML.parse(); 
    } catch(err){} 
});