Question

我在我的控制器上有这个动作

public ActionResult Absent()
    {
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
        Response.Cache.SetNoStore();
        return PartialView();
    }

我有这个javascript来调用上面的视图。

   $('li.special > a').on('click', function (e) {
             e.preventDefault();
                $('#loading-min').show();
                $.ajax({
                    url: $(this).attr('href'),
                    type: 'GET',
                    success: function (result) {

                        $('#loading-min').hide();
                        document.getElementById('row-report').innerHTML = result;

                    }
                });

            });

我在_layout上有这个页面将会显示

<div id="row-report">
            @RenderBody()
            </div>

假设我的页面上有这些内容，包括引用的脚本

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
    <script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src ="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<h2>Absent</h2>
@using (@Html.BeginForm("PreviewAbsent", "Report", new { ReportID = "Absent" }))
{


    @Html.ValidationSummary(true)
    <div class="editor-label">
        @Html.LabelFor(m => m.DateFrom)
    </div>
    <div class ="editor-field">

        @Html.TextBoxFor(m => m.DateFrom, new {@class = "datepicker form-control", @style= "width:200px; height:30px"  })
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.DateTo)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.DateTo, new { @class = "datepicker2 form-control",@style ="width:200px; height:30px" })
    </div>
    <br /> <p><input type="submit" class ="btn btn-primary" value= "Print Report"/></p>
}

@section scripts {


    <script>
            $(function () {
                $('.datepicker').datepicker({
                    showOn: "both",
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear:true
                })


            });

            $(function () {
                $('.datepicker2').datepicker({
                    showOn: "both",
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear: true
                })
            });




 </script>


}

my datetimepicker wont work on textbox on the rendered partialview, but if i will not use ajax to render the view and change the controller to return a View() it works.. is there any issue when rendering a partialview using javascript/ajax?

Answer 1

我过去如何做Brendan的答案是将代码放入函数

function Pickers(){
    $('.datepicker').datepicker({
        //...
    });
}

然后在您加载部分的ajax调用成功时，调用函数

.success(result){
    Pickers();
}

在加载部分之后调用该函数，然后您的代码就可以工作。

为什么脚本引用渲染的partialview不起作用，我使用ajax渲染局部视图，我的datetimepicker不会工作

1 个答案: