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.
1 Answers :
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.
@brothers28 Any idea?