DatePicker не работает после того, как Ajax вызова в нокауте

Question

Я использовал нокаут Datepicker, как указано ниже

<input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11"> 

DatePicker выталкивает Callender для первой загрузки и значок мыши. После вызова ajax календар не выставляется на значок.

Аякса вызов

self.Save = function(VAL, eventType) { 
     if (data == true) { 
      if (value == 'Submit') { 
       $.ajax({ 
        url: renderurlpath, 
        contentType: 'application/json; charset=utf-8', 
        cache: false, 
        type: 'GET', 
        success: function(result) { 
         $('#divContentPlaceHolder').innerHTML = ''; 
         $('#divContentPlaceHolder').html(result); 
         debugger 

         $('#image_loading').modal('hide'); 
        }, 
        error: function(xhr, status, error) { 
         $('#image_loading').modal('hide'); 
         alert("AJAX Error!"); 
        } 

       }); 
      } 

Парциальное Просмотр я загрузки в #divContentPlaceHolder является

<fieldset id="fieldset" style="clear:both;display:none"> 

<div id="CollapseReason" class="panel-collapse collapse in" data-bind="with:$root.PQCCDA"> 
           <div class="panel-body" style=" background: #F7F7F7; border: solid 1px #ccc;" data-bind="with:$data.PQCCDAROV"> 
            <!---new code--> 
            <div class="col-xs-6 no-padding"> 
             <div class="col-xs-12 pq-txt">Reason </div> 
             <div class="col-xs-12"> 
              <textarea placeholder="Reason for " class="col-xs-12" data-bind="value:$data.ReasonforVisit" rows="4" cols="50"></textarea> 
             </div> 
            </div> 
            <div class="col-xs-6 sub-title-pq"> 
             <div class="col-xs-12 pq-txt">date </div> 
             <input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11"> 
            <!---new code--> 
            <div class="vspace10 col-xs-12">&nbsp;</div> 

           </div> 
          </div> 

          </fieldset> 


          <script src="~/js/knockout-3.2.0.js"></script> 
     <script src="~/js/knockout-jquery-ui-binding.js"></script> 
     <script src="~/Scripts/PortalScripts/jquery-ui.js"></script> 
     <script src="~/Scripts/PortalScripts/PQCCDA.js"></script> 

HTML-код #divContentPlaceHolder является

@Scripts.Render("~/bundles/jquery") 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/bootstrap") 

<div id="divContentPlaceHolder" class="col-sm-12 no-padding"> 

</div> 

заранее спасибо

Answer 1

Так что здесь несколько вещей. Во-первых, вы загружаете файлы Javascript из своего Parital, это может привести к нескольким странным исполнениям Javascript, перезаписанным переменным Javascript, уже активным в DOM, и кто знает, что еще. Это не имеет значения, потому что вы делаете это неправильно.

Вы скрипт скрипты как ~/js/knockout-3.2.0.js должны быть в вашем _Layout.cshtml или в View.cshtml, что вы загружаете ваше частичное или в части вас пакеты сценариев, и связки должны быть в _Layout.cshtml, но они могут быть в представлении, если это единственное где вы собираетесь их использовать, но все пакеты, отображаемые в вашем коде, должны быть, вероятно, в _Layout.cshtml. Вы неэффективны или получаете более быстрое время загрузки страницы в большинстве интернет-каналов в мире, пытаясь загрузить эти файлы Javascript на лету, по мере необходимости, через Partial view, если это ваше мышление.

Только один вы должны изменить и никогда не делать этого, никогда не загружать Javascript-библиотеки из частичного, Ajax, загруженного в DOM, или @ HTML.Partial ASP.NET. И это все равно не устранит вашу проблему.

Где-то вы вызываете ko.applybindings. Это касается содержимого на загружаемой странице. Вы должны вызвать ko.applybindings снова, и вы можете использовать обещание JQuery Ajax возвращаемое через цепочку, чтобы сделать это:

$.ajax({ 
       url: renderurlpath, 
       contentType: 'application/json; charset=utf-8', 
       cache: false, 
       type: 'GET', 
       success: function(result) { 
        $('#divContentPlaceHolder').innerHTML = ''; 
        $('#divContentPlaceHolder').html(result); 
        debugger 

        $('#image_loading').modal('hide'); 
       }, 
       error: function(xhr, status, error) { 
        $('#image_loading').modal('hide'); 
        alert("AJAX Error!"); 
       } 

      }) 
.then(function() { 

    ko.applyBindings(AppViewModel, document.getElementById("divContentPlaceHolder")); 


}); 

Кроме того, любые пакеты загружаемые в View.cshtml, должны быть в @section scripts{} на вашем взгляде .cshtml, а затем прямо над вашим тегом </body в вашем _Layout.cshtml, вы должны указать @Section.Render("scripts"). Таким образом, ваш код чище, ваши файлы Javascript загружаются последним, как и следовало ожидать, единственное предостережение здесь - иногда ваш jQuery lib должен находиться в вашем <head></head>, потому что со временем вы просто начинаете использовать jQuery так быстро при загрузке страницы, а его еще нет, потому что это прямо над элементом </body>. Это просто предостережение и происходит с некоторыми более сложными веб-приложениями.

Answer 2

В соответствии с Брайаном Огден сообщение я сделал эти изменения в частичном виде

<fieldset id="fieldset" style="clear:both;display:none"> 

<div id="CollapseReason" class="panel-collapse collapse in" data-bind="with:$root.PQCCDA"> 
           <div class="panel-body" style=" background: #F7F7F7; border: solid 1px #ccc;" data-bind="with:$data.PQCCDAROV"> 
            <!---new code--> 
            <div class="col-xs-6 no-padding"> 
             <div class="col-xs-12 pq-txt">Reason </div> 
             <div class="col-xs-12"> 
              <textarea placeholder="Reason for " class="col-xs-12" data-bind="value:$data.ReasonforVisit" rows="4" cols="50"></textarea> 
             </div> 
            </div> 
            <div class="col-xs-6 sub-title-pq"> 
             <div class="col-xs-12 pq-txt">date </div> 
             <input type="text" data-bind="datepickertext:[], value:[], disable:$root.Isdisable" id="date" class="col-xs-11"> 
            <!---new code--> 
            <div class="vspace10 col-xs-12">&nbsp;</div> 

           </div> 
          </div> 

          </fieldset> 


         @* <script src="~/js/knockout-3.2.0.js"></script> 
     <script src="~/js/knockout-jquery-ui-binding.js"></script> 
     <script src="~/Scripts/PortalScripts/jquery-ui.js"></script> *Commented Scripts In partial View* *@ 
     <script src="~/Scripts/PortalScripts/PQCCDA.js"></script> 

В BundleConfig.cs

public class BundleConfig 
    { 
     // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 
     public static void RegisterBundles(BundleCollection bundles) 
     { 

      bundles.Add(new ScriptBundle("~/bundles/jqueryuiknock").Include(
         "~/Scripts/PortalScripts/jquery-ui.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.validate*")); 

      bundles.Add(new ScriptBundle("~/bundles/Knockout").Include(
         "~/js/knockout-3.2.0.js", "~/js/knockout-jquery-ui-binding.js")); 


     } 
    } 

И В макете я вынес сценарии, которые объявлены в BundleConfig.cs

@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/bootstrap") 
*@Scripts.Render("~/bundles/jqueryuiknock") 
<div id="divContentPlaceHolder" class="col-sm-12 no-padding"> 

</div>