web-dev-qa-db-ja.com

jquery datepicker ms ajaxupdatepanelがポストバック後に機能しない

それで、私は関連する質問をいくつか読んで、いくつかの興味深いものを持っていましたが、私の答えは見つかりませんでした、少なくとも答えを理解していませんでした。

私は一般的にAJAX、javascript、sclientサイドスクリプトに非常に慣れていません。

私は少しの間C＃asp.netを使用していて、最近、ページが毎回再ロードされないようにユーザーコントロールとビットが更新されるようにスムーズにするために、いくつかの更新パネルを自分の側に追加しました。すべてが見事に機能し、JQueryを試してみることにするまではとても満足していました。

私はui.jquery.jsからdatepickerをピックアップしました。これはクールで、通常のページでうまく機能します。更新パネル内からポストバックを実行すると、問題が発生します。日付ピッカーが機能しなくなります。

私が読んだことから、ポストバックの後にこれを手動で配線する必要があります。

1）理由がよくわかりません。私のマスターページには：

<script type="text/javascript">
    $(function() {
        $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
    });
</script>

これは、mydatepickerclassが割り当てられた入力ボックスを取得します。そしてすべての作品。なぜこれがポストバックで機能しなくなるのでしょうか。

2）これを修正するにはどうすればよいですか....更新パネルでポストバックした後も機能するように配線するにはどうすればよいですか。

ポストバックでIDが変わる可能性があることは理解していますが、クラスを使用しているため、何が問題になっているのかわかりません。

編集

更新が行われているユーザーコントロールに次のコードがあります。

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server">
<ContentTemplate>
    <%-- Start of Company History section --%>
    <fieldset>
        <legend>Activity History</legend>

           <script type="text/javascript">
              $(function() {
              $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
              });
           </script>            

        <div>
            <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" />
            <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" />
            <label>Date To:</label><input class="mydatepickerclass" type="text" />
            <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" />
            <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" />
        </div>


    </fieldset>
</ContentTemplate>

更新パネル内のスクリプトは再配線しませんか？

ありがとう

ジョンホーキンス

c#jqueryasp.net-ajaxupdatepanel
14
Jon

更新パネルは、htmlのコンテンツをリロードします。日付ピッカーを完了して再作成するには、UpdatePanelをリッスンする必要があります。

これは非常に基本的なサンプルです。これは、ページ上の複数の更新パネルや、日付ピッカーを適切に破壊しないことによる潜在的なメモリリークを考慮していません。

ASP.NET AjaxとjQueryを混在させる場合は、どちらも異なるコンテキストで$を使用するため、注意が必要です。

<!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://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
            }

        });
    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
                onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
43
bendewey

私はこれが古いことを知っていますが...置き換えてみてください：

$(document).ready(function() {

と：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

9
Daniel Tilly

これを行う代わりに、簡単な代替手段があります。

更新パネルの要素のポストバックにこのコードを追加します

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();",   True)

そしてこれはjavascriptで

function getjquerydate() {

$(".datepicker").datepicker({
    numberOfMonths: 2,
    showButtonPanel: true,
    minDate: 1,
    dateFormat: 'dd/mm/yy',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

}

更新されたパネルで部分的にポストバックした後、再びdatepicker関数を呼び出します

5
Shreyas Maratha
$(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
        function EndRequestHandler(sender, args) {
            $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
        }
    });

あなたはこのようにすることができます。この場合、それは常に機能します;））

4
Guven Sezgin Kurt

"jQuery UI Datepickerはajaxの部分的なポストバック後に機能しません"

スクリプトマネージャと更新パネルをページに配置します。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp:UpdatePanel>

次に、updatepanelコントロール内にテキストボックスとボタンを配置します。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
     <div style="font-family: Arial; font-size: small;">
        Select Date :
        <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">           
        </asp:TextBox>
     </div>
     <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack"  
       OnClick="btnAjax_Click" />
  </ContentTemplate>
</asp:UpdatePanel>

次に、datepickerコントロールをテキストボックスにバインドします。

<script type="text/javascript" language="javascript">
$(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
}); 
<script>

次に、ボタンのサーバー側クリックを作成します。これにより、ajaxの部分的なポストバックが発生します。

protected void btnAjax_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(1000);
}

ページを実行すると、次のようなものが表示されます

Ajax PostBack

日付ピッカーをクリックします。日付ピッカーが開き、選択した日付がテキストボックスの値になります。次にボタンをクリックします。サーバー側のボタンクリックが呼び出され、次のように表示されます。

AJAX Postback2

日付ピッカーボタンがなくなりました。ajax内で機能させるために、今何をしますか。以下のコードを参照してください。

<script type="text/javascript" language="javascript">
function pageLoad(sender, args)
{
  $(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
  }); 
}
</script>

aSP.NET ajaxを使用している場合、pageLoad（）関数はJavaScriptで使用できます。 AJAXフレームワークは、pageLoad（）という名前のクライアント側関数をApplication.Loadハンドラーとして自動的に接続します

ソースリンククレジット

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

1
Krishna
Sys.Application.add_load(LoadHandler);

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() {
    $(document).ready(function () {
        $(".datepicker").datepicker({
            dateFormat: "M d, yy",
            changeMonth: true,
            changeYear: true,
            onSelect: function (dateText, ubst) { your code here... }
        }).val();
    });
}
0
Tony Dong

これが古い投稿であることは知っていますが、この問題が発生し、このスレッドで答えを見つけました。これに遭遇した人の助けになることを願っています。

コードビハインドにクライアント側のスクリプトを入れませんでした。私はこのコードを置くだけです：

       <script type="text/javascript">       
         Sys.WebForms.PageRequestManager.getInstance().add_pageL
              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

              function EndRequestHandler() {
                  $('.default-date-picker').datepicker({
                      format: 'dd-mm-yyyy'
                  });
              }

             });
             </script>

上記のコードは、ヘッドセクションではなく、ボディセクション内にある必要があります。スクリプトマネージャーの前後、またはUpdatePanelの内外に配置してみましたが、すべてのオプションで問題は見つかりませんでした。このコードがbodyセクションにある限り、それは私にとってはうまくいきます。

定義したdatetimepickerクラスを必ず変更してください。私の場合、jsファイルの「default-date-picker」です。

0
Koo SengSeng