部分视图加载后触发 javascript

Question

我有一个视图，它加载了几个下拉菜单的更改事件的一部分：

我有一些 javascript 调用一个动作：

$("#filterdd").on('change', function () {
    var datefrom = $('#fromdt').val().replace("/", "-").replace("/", "-");
    var dateto = $('#todt').val().replace("/", "-").replace("/", "-");      
    $("#partialexpcal").load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto);
});

然后这个returns部分：

public ActionResult experienceCalendarFilter(string fromdt = "", string todt = "")
    {
        myModel model = new myModel();
        model = gd.getstuff(fromdt, todt);

        if (Request.IsAjaxRequest())
        {
            return PartialView("_expcalendar", model);
        }
        else
        {
            return View(model);
        }
    }

<div id="partialexpcal">
    @Html.Partial("_expcalendar", Model)
</div>

我正在使用 jQuery Datetimepicker，它需要在部分加载后触发：

function afterload() {
    $(".datefield").datepicker({ dateFormat: "dd/mm/yy", changeYear: true });

    $(function () {
        $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            var ok = true;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
                ok = false;
            }
            return ok;
        });
        $(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true });
    });
}

我在父视图和局部视图中都尝试了以下所有方法，其中 'expcalfilterdiv' 是局部视图中的主容器：

$('#expcalfilterdiv').ready(function () {
    alert("hit1");
    afterload()
});

这只在初始加载时命中，而不是在部分更改之后。

$('#expcalfilterdiv').live(function () {
    alert("hit1");
    afterload()
});

这个根本打不中

$('#expcalfilterdiv').livequery(function () {
    alert("hit1");
    afterload()
});

有没有什么方法可以让我在做这件事时获得 Ajax 成功？

Answer 1

Load 有第二个参数，在 AJAX 调用完成后调用，如下所示。

$("#partialexpcal").load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto,function( response, status, xhr ){
//.. check for error here ...
afterload();
});

Answer 2

如果您查看 $.load() 文档，您会发现此函数接收 3 个参数。第三个是 complete，这是一个回调，一旦加载请求完成，它就会运行。 IE。修改您的加载代码，添加第三个参数，该参数可以是函数定义或现有函数的名称，将在加载完成时执行：

$("#partialexpcal")
  .load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto, 
  function() { /* */});

或

$("#partialexpcal")
  .load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto,
  functionToInvoke);

注意：在文档中第二个参数被定义为可选的方括号，所以你可以省略它并直接指定第三个

部分视图加载后触发 javascript

Fire javascript after a partial view loads

javascript

ajax

asp.net-mvc

jquery

partial-views