8

このシナリオでは、jqueryのdatepicker機能が失われました...

1-元々、私は通常のビューを持っていましたが、これは正常に機能し、日付入力用のこのコードを持っていました...

<input type="text" name="date_start" id="date_start"
                       value="@(Model.TimeStart)" />
<script language="javascript" type="text/javascript">
    $("#date_start").datepicker();
</script>

2-次に、動的にロードされる部分ビューにそのビューを変換しました...

$('#TargetEmptyDiv').load("/MyController/MyAction");

3-部分ビューは正常にロードされます。データは（手動で）入力でき、すべて問題ありません。唯一の問題は、jquerydatepickerが機能しなくなったことです。これを使って、ロード後に割り当ててみました...

$('#TargetEmptyDiv').load("/MyController/MyAction",
                          function () { $("#date_start").datepicker(); });

それはうまくいきませんでした。

4-後で、jqueryが「現在および将来」ロードされる要素にjavascriptコードをアタッチできるlive（）およびdelegate（）関数を提供することを学びました。だから、私はこれをドキュメントの初期化で試しました...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").live("click", function () { $(this).datepicker(); });
    });
</script>

そして後でまた...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").delegate("click", function () { $(this).datepicker(); });
    });
</script>

「クリック」イベントを直接参照しているためか、いずれも機能しませんでしたが、日付ピッカーは要素全体に「アタッチ」されています（これが適切な用語である場合）。

したがって、質問は次のとおりです。動的ロード後にロードされた要素でjquery datepickerを機能させる方法は？

御時間ありがとうございます！

解決済み：問題は、_Layout.cshtmlの下部にこの行があることでした...

@Scripts.Render("~/bundles/jquery")

..jqueryライブラリの縮小バージョンをロードします（すでに自分で参照しています）。そのため、ライブラリが2回ロードされて無効になり、「datepicker（）は関数ではありません」というエラーが発生しました。

その行にコメントまたは削除するだけで、すべて正常に機能します。

4

14 に答える 14

3

＃3のアプローチはうまくいくはずだったので、デバッグを行う必要があるようです。これを試して：

  1. Firefox を使用している場合は、Firebug 拡張機能を入手してください (Chrome には開発ツールが組み込まれています)。
  2. コードに行を追加debuggerします (以下の例を参照してください)。
  3. Chrome または Firebug/Firefox (または他のブラウザーの開発ツール) でページを読み込みます。

その時点でブラウザが一時停止するはずです。ただし、期待どおりに動作しない場合は、そのコードにまったくヒットしていない可能性があり、一時停止することはありません。

一時停止した場合は、コンソールを使用して$("#date_start");の値を調べます。jQueryセレクターがあなたが思っているものをつかんでいない可能性があります。

コードのdebugger例を次に示します。

$('#TargetEmptyDiv').load("/MyController/MyAction", function () {
    debugger;
    $("#date_start").datepicker();
});
于 2012-12-28T20:27:58.743 に答える
3

部分ページで「/MyController/MyAction」と言います。

部分ページ コード:

<div>
    <form>
        <!--Other Elements-->
        <input type="text" id="adate" name="adate" title="date" />
    </form>
    <script type="text/javascript">
        $(document).ready(function(){    
            $( "#adate" ).datepicker();
        });
     </script>
</div>

フルページ (Ajax リクエストを呼び出しているページ) コード:

<div id="TargetEmptyDiv"></div>
<script type="text/javascript">
function abc(){
$.ajax({
        type: "POST",
        url: "/MyController/MyAction",
        success: function(response)
        { 
            $("#TargetEmptyDiv").html(response);
        }
 });
}
</script>

関数 abc を呼び出すと完了です。すべての jquery ファイルが既にロードされていると仮定します。

于 2013-01-09T14:33:07.113 に答える
1

ajax を呼び出した後、jquery を「ajaxStop」イベントに接続します。(参照: 「@section スクリプト」)

$(document).ajaxStop はポスト ajax jquery 呼び出しを処理し、datapicker は ajax 呼び出しの後に機能するようになりました。はい...

注: $(document).ready... は最初のページ読み込みの datapicker 装飾を処理しますが、ajax フォームのリロード後、datepicker jquery は実行されませんでした...

@model Q_Admin.Models.AllQAViewModel

<div id="mainContent">

  @using (Ajax.BeginForm("EAAll","Answer",new AjaxOptions {
    UpdateTargetId = "mainContent",
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace
  }))

  for (int i = 0; i < Model.VMs.Count; i++)
  { 
   @switch (Model.QAVMs[i].qN.Node1.TypeAnswer.AnswerType.Trim().ToUpper())
   {
    case "DATETIME":
      @Html.TextBoxFor(m => m.VMs[i].CurrentNodeText, 
            new { @class = "datepicker", @id = "datepicker" });
      break;
    case "DROPDOWNLIST":
         @Html.DropDownListFor(m => m.QAVMs[i].AnswerRecord.AnswerID,
           new SelectList(Model.QAVMs[i].answerNodes, "ID", "NodeText.Text", Model.QAVMs[i].SelectedNodeID),
          "-- Select an Answer --",
           new { @onchange = "$(this).parents('form:first').find(':submit')[0].click();"   }) }
      break;
    default:
       break;
    }
  }
</div>

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
        // debugger;
        $("#datepicker").datepicker(
            {
                dateFormat: "mm/dd/yy",
                constrainInput: true
            });
    });
    $(document).ajaxStop(function () {
        // debugger;
        $("#datepicker").datepicker(
            {
                dateFormat: "mm/dd/yy",
                constrainInput: true
            });
    });
</script>}
于 2014-01-21T06:52:42.550 に答える
1

日付ピッカーを機能させるために必要なのは、ステップ 1 から 3 だけです。

サンプルは次のとおりです: http://jsfiddle.net/delrosario/Xd8py/

マークアップを動的にロードせずに datepicker が動作するようになり、動的バージョンの疑似コードはステップ 1 から 3 まで正常です。ここで確認する必要があるのは、メイン プログラムの前に依存関係が読み込まれていることを確認することです (この場合、リクエスト + 日付ピッカー セットアップを実行する前に、jquery と jquery ui が利用可能であることを確認してください)。

1) jquery をロードする 2) jquery ui をロードする 3) DOM の準備ができるか、ペイロードを含む要素の準備ができるまで待ちます 4) 説明のステップ 1 ～ 3 を実行するメイン アプリを実行します。

したがって、このようなものになります。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="path-jquery-ui-css" />
    <script src="path-to-jquery"></script>
    <script src="path-to-jquery-ui"></script>
    <script id="main_app">
      (function () {
        // wait till dom is ready before executing our code,
        // in this case steps 1-3.
      });
    </script>
  </head>
  <body>
    <div id="datepicker_target">datepicker target</div>
  </body>
</html>
于 2013-01-09T09:20:57.167 に答える
0

私はこれを機能させています

アクション方法:

public ActionResult GetControl()
{
    return View("_partial");
}

メイン ビュー:

<div id="TargetEmptyDiv"></div>

<script type="text/javascript">
    $(function () {
        $('#TargetEmptyDiv').load("/Home/GetControl");
    });
</script>

部分図:

@{
    Layout = "";
}

<input type="text" name="date_start" id="date_start" />

<script type="text/javascript">
    $(function () {
        $("#date_start").datepicker();
    });
</script>

もちろん、レイアウトに jquery-ui.js を含めることを忘れないでください。

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
于 2013-01-05T19:25:23.933 に答える
0

私の疑いでは、あなたの JS は実行されていますが、jquery-ui を不適切に参照しています。部分ビューよりも高いレベルですべての jquery ライブラリを追加することをお勧めします。<script src="jquery-ui.js">部分ビューではなく、ページまたはレイアウトにタグを配置してみてください。これで問題が解決しない場合はalert("test");、JavaScript コードを挿入して、実行されていることを確認してください。

于 2013-01-07T18:11:24.660 に答える
0

＃3が機能するようです。しかし、次のようなハックな方法を試すことができるかもしれません:

<script type="text/javascript">
    $(document).ready(function () {
        $(this).on("mousedown", "#date_start", function (e) { 
             $(this).datepicker(); e.preventDefault();$(this).click(); 
        });
    });
</script>
于 2013-01-02T18:56:25.790 に答える
0

私は以前にこの問題を抱えていました。私の状況<script src='jQueryUI.js'></script>では、ページの下部で参照していました。参照をページの上部に移動すると、修正されました。

于 2012-12-28T22:33:34.900 に答える
-1

こんにちは: 部分ビューのロード ドキュメント イベント スクリプト タグに以下のコードを挿入します。

$(function(){

$("#date_start").datepicker();

})
于 2015-07-24T18:31:36.057 に答える
-1 
<script type="text/javascript">$(function () {$("#datefield").datepicker();});</script>

ajaxでロードする必要があるコンテンツをこの行にロードするだけです

于 2014-08-09T07:18:06.780 に答える