Wie man JQuery DatePicker arbeiten nach dynamisch geladen wird, in einer teilweisen Ansicht?

Ihre Herangehensweise in #3 sieht für mich aus wie es sollte gearbeitet haben, so scheint es, müssen Sie etwas Debuggen. Versuchen Sie dies:

1. Holen Sie sich die Firebug-Erweiterung, wenn Sie Firefox verwenden (Chrome dev-tools integriert)
2. Hinzufügen debugger Zeile, um Ihren code (siehe Beispiel unten)
3. Laden Sie Ihre Seite mit Chrome oder Firebug/Firefox (oder anderen browser dev tools)

Was passieren sollte ist, dass Ihr browser wird angehalten, an diesem Punkt. Jedoch, wenn Dinge nicht so funktionieren wie Sie es erwarten, ist es vielleicht nicht schlagen, dass der code an alle, und dann würden Sie bekommen keine pause.

Wenn Sie nicht bekommen, eine pause, die Konsole zu untersuchen, den Wert von $("#date_start"); es ist möglich, dass der jQuery-Selektor nicht greifen, was Sie denken, es ist.

Hier ein debugger Beispiel mit dem code:

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

In meinem Fall die Id von dem Feld Datum, dass ich versuchte, hook up der datepicker war nicht das, was ich dachte, es war. Ich bin mit ViewModels und die id bekam, mit dem Präfix ViewModel name des partiellen view.

machineghost Antwort legte mich auf Sie.

So, ich nutze jetzt Charly ' s Antwort, aber anstelle von #Geburtstag habe ich #IdentityModel_BirthDate:

<script>
  $(document).ready(function () { 
      $(document).on('focus', '#IdentityModel_BirthDate', function () {
          $(this).datepicker({
              format: 'MM/dd/yyyy',
              changeMonth: true,
              changeYear: true,
              yearRange: "-90:+0"
          });
      });
  });
</script>

Nach dem Aufruf von ajax -, hookup Ihre jquery, um die 'ajaxStop" - Veranstaltung. (SIEHE: "@Abschnitt Skripte' )

$(document).ajaxStop übernimmt die post ajax jquery-Aufruf und jetzt datapicker funktioniert nach ajax-call(s). ja...

Hinweis: $(document).fertig... behandelt das erstmalige laden der Seite datapicker Dekoration, aber nach ein ajax-Formular neu laden, datepicker jquery nicht ausgeführt wurde...

@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>}

Scheint, wie #3 zu arbeiten. Aber vielleicht können Sie versuchen, ein hacky Art und Weise, wie diese:

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

Mein Verdacht ist, dass dein JS ausgeführt wird, aber Sie haben falsch referenziert jquery-ui. Ich empfehle das hinzufügen von jquery-Bibliotheken auf einer höheren Ebene als eine Teilansicht. Versuchen Sie, die <script src="jquery-ui.js"> tag entweder in die Seite oder das layout, nicht die eingeschränkte Sicht. Wenn dies nicht beheben, versuchen Sie alert("test"); im javascript-code, um sicherzustellen, dass er ausgeführt wird.

Ich hatte das gleiche problem, gelöst mit einer früheren version von JQuery-UI. In meinem Fall geht die version verwenden 1.9.2 und 1.10.3 zu JQuery version 1.10.1. Kenne den Grund, aber ich denke die neuesten Versionen bringen einige Probleme, die Kompaktheit, also wählte ich immer rückwärts in die Vergangenheit.
Ich hoffe, es wird nützlich sein,

Hallo: Sie setzen Sie folgenden code in der load-Dokument event-script-tag in Ihre Teilansicht :

$(function(){

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

})