Fire javascript after a partial view loads

Question

I have a view which loads a partial on the change event of several dropdowns:

I have some javascript that calls an action:

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

Then this returns a partial:

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>

I am using jQuery Datetimepicker which need to fire after the partial has loaded:

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 });
    });
}

I have tried all of the following in both the parent view and the partial where 'expcalfilterdiv' is the main container in the partial view:

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

This hits but only on initial load not after the partial has been changed.

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

This doesn't hit at all.

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

Is there a way I can catch the Ajax success when doing it how I am?

Live is deprecated, don't use it.

kemicofa
– kemicofa

2015-11-10 14:39:49 +00:00
Commented Nov 10, 2015 at 14:39 — kemicofa
– kemicofa, Commented Nov 10, 2015 at 14:39

JotaBe · Accepted Answer · 2015-11-10 14:43:26Z

1

If you see $.load() docs, you'll find that this function receives 3 parameters. The third one is complete, and this is a callback which will run once the load request has fulfilled. I.e. modify your load code adding a third parameter which can be a function definition, or the name of an existing function, that will be executed when load finishes:

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

or

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

NOTE: in the docs the second parameter is dentoed as optional sith square brackets, so you can omit it and specify the third one directly

answered Nov 10, 2015 at 14:43

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam.C · Accepted Answer · 2015-11-10 14:40:01Z

0

Load has a second parameter that is called once the AJAX call is completed, like below.

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

answered Nov 10, 2015 at 14:40

Sam.C

1,62113 silver badges17 bronze badges

Collectives™ on Stack Overflow

Fire javascript after a partial view loads

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related