CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvcpartial-views
Scott
Scott

Reputation: 91

Fire javascript after a partial view loads

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?

Upvotes: 1

Views: 5013

Answers (2)

JotaBe
JotaBe

Reputation: 39004

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

Upvotes: 1

Sam.C
Sam.C

Reputation: 1621

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

Upvotes: 0

Related Questions