How to run LoadPartial function for first item in dropdown list when loaded?


Questions › How to run LoadPartial function for first item in dropdown list when loaded?
3 Vote Up Vote Down
Danieboy Asked

I have a function which when the dropdown is changed - it loads a partial view. Code:

Html:

<p>
    @Html.LabelFor(m => m.SelectedCustomerId, new { @id = "dropdownlabel" })
    @Html.DropDownListFor(m => m.SelectedCustomerId, Model.CustomerIDItem, new { @id = "customId" })
</p>

Javascript:

<script type="text/javascript">
        $(function() {
            $("#customId").change(function() {
                var id = $(this).val();
                $('#divValues').load('@Url.Action("DefaultValuesPartialView", "DefaultValues")?selectedCustomerId=' + id, function (response, status, xhr) {
                    $("#divValues").html(response);
            });
        });
    });
</script>

Which works perfectly. It loads the partial view (updates a table on the page when the dropdown is changed without reloading the entire page. What I want to do is that when the dropdown is loaded it should load the item selected first as well.

My first thought was that it would be something like this:

<script type="text/javascript">
            $(function() {
                $("#customId").onload(function() {
                    var id = $(this).val();
                    $('#divValues').load('@Url.Action("DefaultValuesPartialView", "DefaultValues")?selectedCustomerId=' + id, function (response, status, xhr) {
                        $("#divValues").html(response);
            });
        });
    });
</script>

But obviously it didn't work, any ideas?

Thanks in advance.

Comments :
Danieboy replied

@brothers28 Any idea?


1 Answers :
3 Vote Up Vote Down
Satpal answered

Just trigger change event on page load

$(function() {
    $("#customId").change(function() {
        var id = $(this).val();
        $('#divValues').load('@Url.Action("DefaultValuesPartialView", "DefaultValues")?selectedCustomerId=' + id);
    }).change(); //trigger change event on page load
});

Note: You don't need to use $("#divValues").html(response) as .load() function already does it for you.