1

jqueryajaxを使用して読み込まれているasp.netページを使用しています。このページでは、Gridviewを使用して次のように値のリストを表示しています

<asp:GridView ID="GVPrograms" runat="server" AutoGenerateColumns="false" 
        onrowcommand="GVPrograms_RowCommand" AllowPaging="true" BackColor="#f5f5f5"  BorderColor="#ffffff"
         PageSize="2" OnPageIndexChanging="GVPrograms_PageEventHandler" GridLines="None">
        <Columns>             

            <asp:TemplateField HeaderText="Video">
                    <ItemTemplate>                    

                     <div style="float: left; width: 120px" class="play-video"> 
                         <a href="Program.aspx?id=<%#Eval("ID") %>" id='<%#Eval("ID") %>'>                          
                         <img src='<%# GetUrl(Eval("ID")) %>' width='100' height='100' style="" alt="play" />

                         </a>

                       </div>
 </asp:TemplateField> 
 </Columns>

        </asp:GridView>

PageEventHandlerメソッドでページングを処理し、正常に動作しています。ただし、ページが最初に読み込まれ、グリッドビュー内のリンクをクリックすると、Program.aspxページが次のスクリプトを使用して読み込まれます。

$(".play-video a").click(function () {
              $("#content-placeholder").load(this.href);                
              //alert(this.id);
              return false;
          });

さて、問題は、次のページ（たとえば2ページ）をクリックしていずれかのリンクをクリックするたびに、Program.aspxが新しいウィンドウに表示されることです。では、上記のjqueryスクリプトを使用して、これを同じページにロードするようにするにはどうすればよいですか？

これに対する回避策があるかどうかを探していましたが、見つかりませんでした。私はあなたの助けに感謝します。

4

1 に答える 1

0

使用するときは、更新ごとUpdatePanelにこのコンテンツで動作する JavaScript を再初期化する必要があります。UpdatePanelこれは、Dom 構造体を変更し、以前の JavaScript が機能しなくなったためです。

これを行うには、UpdatePanel が提供する関数を使用します。コードは次のようになります。

<script type="text/javascript"> 
    // this is your function that we must call on page load 
    //  and after updatepanel updates.
    function InitMyLink()
    {
      $(".play-video a").click(function () {
        $("#content-placeholder").load(this.href);                
        return false;
      });
    }

    // now I capture the two functions that called when UpdatePanel is updated
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      
    }

    // this is called after update panel completes the update
    function EndRequest(sender, args) {
        InitMyLink();
    }

    // this is called on first page load
    $(document).ready(function() {
      InitMyLink();
    });
</script>
于 2012-07-04T07:53:17.673 に答える