2011-02-04 6 views
4

更新パネルからのポストバック後にJSファイルを登録しようとしています。私はポストバックの後にAddThis.comを働かそうとしています。 multiview.activeviewindexを1に設定すると動作します。ただし、ビュー1からビュー2に移動すると機能しません。AddThis.com - ScriptManager

ここにプロジェクトのサーバーサイドコードがあります。ここで

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
'ScriptManager.RegisterStartupScript(Me, Me.GetType, "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", False) 
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "Test1", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", True) 

MultiView1.ActiveViewIndex = 0 
End Sub 

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click 
    MultiView1.ActiveViewIndex = 1 
End Sub 

は、ASPXコードです:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication6._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b"></script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     </asp:ScriptManager> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> 
        <asp:View ID="View1" runat="server"> 
         <asp:Button ID="Button1" runat="server" Text="Button" /> 
        </asp:View> 
        <asp:View ID="View2" runat="server"> 
        <!-- AddThis Button BEGIN --> 
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"> 
<a class="addthis_button_preferred_1"></a> 
<a class="addthis_button_preferred_2"></a> 
<a class="addthis_button_preferred_3"></a> 
<a class="addthis_button_preferred_4"></a> 
<a class="addthis_button_compact"></a> 
</div> 

<!-- AddThis Button END --> 

        </asp:View> 
       </asp:MultiView> 
      </ContentTemplate> 
     </asp:UpdatePanel> 

    </div> 
    </form> 
</body> 
</html> 

私はのScriptManagerに起動スクリプトを登録しようとしています。

誰でもこの方法を知っていますか?

ありがとうございます!

+0

多分私は誤解していますあなたの意図した結果は何ですか?「View 1からView 2に移行する」と言うと、View2にはAddThisのマークアップがないので、予想通りです.AddThisのボタンを常に表示させようとしていますか?どのビューがアクティブであっても関係なく表示されますか? –

+0

混乱してごめんね。この場合、ビューの名前を使用している場合、ビュー2からビュー1に移動することを意図しています。 AddThis Markupを2番目のビューで表示したいだけです。何かもっと説明できるかどうか教えてください。 – Jeff

答えて

3

AddThisはウィンドウやドキュメントの読み込み中にしか動作しないため、ここで少しトリックが必要です。基本的には、最初のビューでAddThis divをレンダリングし、javascriptフィールドに取り込んでから2番目のビューで提供されたdiv内に表示するよりも、アイデアがあります。

まず、スクリプトブロックではなく、ファイル全体を含めるため、サーバーサイドコードを変更する必要があります。また、PageLoadメソッドの間だけそれを行う必要があります(私はc#を使用しているので、以下の呼び出しを書き直す必要があります)。

ScriptManager.RegisterClientScriptInclude(this, GetType(), "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b"); 

また、単に(あなたが行ったように)あなたのhtmlヘッダにそれを置くことができ、その場合には不要であるのScriptManagerコールを取り除きます。 あなたは少し

<asp:View ID="View1" runat="server"> 
    <asp:Button ID="Button1" runat="server" Text="Button" /> 
    <div style="left:-2000em; position:absolute;"> 
     <div class="addthis_toolbox addthis_default_style addthis_32x32_style" id="addThis"> 
      <a class="addthis_button_preferred_1"></a> 
      <a class="addthis_button_preferred_2"></a> 
      <a class="addthis_button_preferred_3"></a> 
      <a class="addthis_button_preferred_4"></a> 
      <a class="addthis_button_compact"></a> 
     </div> 
    </div> 
</asp:View> 
<asp:View ID="View2" runat="server">         
    <div id='addHere'></div> 
</asp:View> 

これを行うには、私はタスクを処理し、簡単なJavaScriptのモジュールを書いたあなたのマルチビューの内容を変更することが持っているよりも。

PageModules = {}; 
PageModules.AddThis = function() 
{ 
    var $addThis; 

    function takeAddThis() 
    { 
     setTimeout(function() 
     { 
      $addThis = $('#addThis'); 
      $addThis.remove(); 
     }, 100); 
     Sys.Application.remove_load(takeAddThis); 
    } 

    function fixAddThis() 
    { 
     var $addHere = $('#addHere'); 
     if ($addHere.length) 
     { 
      $addHere.html($addThis); 
     } 
    } 

    Sys.Application.add_load(fixAddThis); 
    Sys.Application.add_load(takeAddThis); 
}(); 

PageModulesは、グローバルスコープの混乱を避けるために名前空間の役割のみを果たします。 AddThisモジュールは自己初期化され、一種のシングルトンです。また、jQueryを参照するか、内部メソッドの本体を再作成する必要があります。 AddThis divを追加の "hidden" divで囲み、ユーザーに表示しません。

http://msdn.microsoft.com/en-us/library/bb383829.aspx

MSDNの参照に応じて、すべてのスクリプトがロードされた後add_load方法が発射されると、すべてのオブジェクトが作成された後、私たちは、私が最初の呼び出しの後に、このメソッドをバインド解除するように、1回のみ起動されるtakeAddThisを必要としています。追加のタイムアウトは、AddThisロジックが適切に実行されることを保証するキューの最後に論理をシフトします(私はここでもjQueryから$(document).readyを使用できますが、一貫性を維持したいと思いました)。

+0

あなたのソリューションを見つけましたが、これは一度しか機能しません。 addThisが削除されたためにブレークします。他の解決方法がありますか – btevfik

+0

DOMから削除されますが、変数内にまだ記憶されています。そこにはポストバックがないのですか?あなたはまだjavascriptモジュールを見ることができますか? – Damian

関連する問題