jquery how to call a function on document ready

Question

Hi could someone help me out with this jQuery? I have:

$(document).ready(function () {

    window.refresh = function () { setorganisationddl; }

    var setorganisationddl = function () {
        if ($("#Invoice_AreaId option:selected").val() == "") {
            $("#Invoice_OrganisationId > option").remove();
            $("#Invoice_OrganisationId").append($("<option value=''>-- Select --</option>"));
            $("#Invoice_OrganisationId").attr("disabled", "disabled");
        }
        else {
            $.get('/Invoice/GetOrganisationSelectList/' + $("#Invoice_AreaId option:selected").val(), function (response) {
                $("#Invoice_OrganisationId").removeAttr("disabled");

                var organisations = $.parseJSON(response);

                var ddlOrganisations = $("#Invoice_OrganisationId");

                $("#Invoice_OrganisationId > option").remove();

                for (i = 0; i < organisations.length; i++) {

                    if (organisations[i].Value == $("#Invoice_OrganisationId option:selected").val()) {
                        ddlOrganisations.append($("<option selected='selected' />").val(organisations[i].Value).text(organisations[i].Text));
                    }
                    else {
                        ddlOrganisations.append($("<option />").val(organisations[i].Value).text(organisations[i].Text));
                    }
                }
            });
        }
    }

    $("#Invoice_AreaId").change(setorganisationddl);
});

So I have setorganisationddl being called when ddl with id Invoice_AreaId is changed. Great. However I also want it called when the page loaded.

As you can see I tried:

window.refresh = function () { setorganisationddl; }

which doesn't work.

Answer 1

you just need to re-arrange your code a bit.

put a call to setorganisationddl in your document ready, and in the .change handler.

$(document).ready(function () {

    setorganisationddl();



    $("#Invoice_AreaId").change(function(){
         setorganisationddl();
    });
});

function setorganisationddl() {
    if ($("#Invoice_AreaId option:selected").val() == "") {
        $("#Invoice_OrganisationId > option").remove();
        $("#Invoice_OrganisationId").append($("<option value=''>-- Select --</option>"));
        $("#Invoice_OrganisationId").attr("disabled", "disabled");
    }
    else {
        $.get('/Invoice/GetOrganisationSelectList/' + $("#Invoice_AreaId option:selected").val(), function (response) {
            $("#Invoice_OrganisationId").removeAttr("disabled");

            var organisations = $.parseJSON(response);

            var ddlOrganisations = $("#Invoice_OrganisationId");

            $("#Invoice_OrganisationId > option").remove();

            for (i = 0; i < organisations.length; i++) {

                if (organisations[i].Value == $("#Invoice_OrganisationId option:selected").val()) {
                    ddlOrganisations.append($("<option selected='selected' />").val(organisations[i].Value).text(organisations[i].Text));
                }
                else {
                    ddlOrganisations.append($("<option />").val(organisations[i].Value).text(organisations[i].Text));
                }
            }
        });
    }
}

Answer 2

Just call it in your .ready() handler:

var setorganisationddl = function () {
    ...
}
setorganisationddl();

If you really want it to be called when the page is fully loaded, and not just when it is ready, you'll need to define the function outside of any ready handler.

function setorganisationddl () {
    ...
}
$(window).load(setorganisationddl);
$(document).ready(function () {
    $("#Invoice_AreaId").change(setorganisationddl);
});

Answer 3

Could you just do -

$("#Invoice_AreaId").change(setorganisationddl).change();

at the bottom of your code, and remove the window.refresh call. That should bind the function then trigger the 'change' event.