0

ajax経由で更新するdivコンテナを持つMVCビューがあります。

<div id="PartialContainer"></div>

<script type="text/javascript">
$.ajax({
        url: '/my/partial_action',
        success: function(result) {
            $("#PartialContainer").html(result);
        }
    });

</script>

コントローラーのアクション コード:

public ActionResult partial_action()
{
    return PartialView("_MyPartial");
}

最後に、_MyPartial ビュー:

<input type="text" class="datepicker" />

<script type="text/javascript">
    $(function() {
        alert("before");
        $("input.datepicker").datepicker();
        alert("after");
    });
</script>

問題: これは Chrome で正常に動作し、datepicker ドロップダウンが正常に表示され、両方のアラート (前と後) が表示されます。ただし、FF と IE では、日付ピッカーが機能しません。両方のアラートを受け取りますが、datepicker の動作は受け取りません。firebug/F12 スクリプト エラーはありません。

部分ビューの外側に日付ピッカー入力を追加しようとしましたが、すべてのブラウザーで正常に機能しました。

jQuery ui 1.7.2、mvc 4 を使用しています。

なぜこれが起こっているのか誰にも考えがありますか？

編集:だから私は問題を解決しました.それはjavascriptの問題ではなく、スタイリングの問題でした. Twitterのブートストラップダイアログで日付ピッカーを使用していますが、日付ピッカーをカバーしていました。いくつかの z-indexed を変更すると、それが修正されました。

4

2 に答える 2

1

Bootstrap Datepicker v1.8.0 で同様の動作が発生していました。日付ピッカーは、部分ビューの最初の表示では期待どおりに機能しましたが、部分ビューが Ajax 呼び出しを使用して新しいデータで更新された場合、日付ピッカーは応答しませんでした。

部分ビューがリロードされた後、Ajax 成功でテキスト フィールドを日付ピッカーに再バインドすることで、問題が修正されました。

function editApplicant(id) {
var dataRow = {
    'applicant' : id
};
$.ajax({
    type: 'POST',
    url: "/Cases/GetApplicant",
    data: dataRow,
    success: function (data) {
        $('#applicantDetail').html(data);
        /* Rebind the date of birth field to a datepicker */
        $('#DOBString').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            orientation: 'bottom left'
        });
        showApplicantView();
    },
    error: function (data) {
        showApplicantView();
    }

});

}

于 2019-06-26T08:20:24.403 に答える