在淘汰赛中调用ajax后datepicker不起作用

Question

我使用了如下所述的淘汰日期选择器

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

datepicker 弹出调用者进行首次加载和图标点击。 ajax 调用后，日历不会在图标点击时弹出。

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>

#divContentPlaceHolder的html代码是

@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

所以这里有很多问题。首先，您正在从 Parital 加载 Javascript 文件，这可能会导致 Javascript 的多次奇怪执行，覆盖 DOM 中已经处于活动状态的 Javascript 变量以及谁知道还有什么。没关系，因为你做错了。

像~/js/knockout-3.2.0.js 这样的脚本脚本应该在您的_Layout.cshtml 或您加载部分或部分脚本包的View.cshtml 中，并且包应该在_Layout.cshtml 中，但它们可以在视图中如果这是您将要使用它们的唯一地方，但您在代码中显示的所有捆绑包可能都应该在 _Layout.cshtml 中。在世界上大多数互联网带宽中，如果您想动态加载这些 Javascript 文件，您并没有提高效率或获得更快的页面加载时间，如果这是您的想法，可以根据需要通过“部分”视图进行加载。

仅此一项，您必须更改并且永远不会再做，永远不要从部分加载 Javascript 库、加载到 DOM 中的 Ajax 或呈现的 @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 中加载的任何包都应该在 View.cshtml 中的 @section scripts{} 中，然后在 _Layout.cshtml 中的 </body 标记上方，您应该有一个 @Section.Render("scripts")定义。这样你的代码就更干净了，你的 Javascript 文件应该最后加载，这里唯一需要注意的是，有时你的 jQuery 库需要在你的<head></head> 中，因为随着时间的推移，你只是在页面加载时开始使用 jQuery 并且它不可用但是因为它就在</body> 元素的正上方。这只是一个警告，并且会发生在一些更复杂的 Web 应用程序中。

Answer 2

根据 Brian Ogden Post 的说法 我在局部视图中进行了这些更改

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