Reputation: 4430
I have a dropdown in MVC5 "view" by changing the dropdown part of the page is going to show and hide. I like to call this function in page load but is not working properly it shows all the text boxes when page loads as I don't know how to send "e" to the page load and when I change the drop down it gave me this error:
Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined
This is my code:
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(
function toggleDIvDisplay(e) {
if (e == 1) {
$('#divAppName').hide();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 2) {
$('#divAppName').show();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 3) {
$('#divSSN').show();
$('#divAppName').hide();
$('#divRemref').hide();
}
if (e == 4) {
$('#divRemref').show();
$('#divSSN').hide();
$('#divAppName').hide();
}
and this is dropdown:
Search By: @Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new { @onchange = "toggleDIvDisplay(this.value)" })
thanks everyone for the answer. Solution is to add this lines:
$(document).ready(function () {
toggleDIvDisplay(1);
});
Upvotes: 1
Views: 1425
Reputation: 2835
assuming ddl
is the id
of your dropdown, you can try this.
EDIT: simplified your conditions.
$(function() {
$('#ddl').on('change', function() {
var value = $(this).val();
$('#divAppName, #divSSN, #divRemref').hide();
if (value == 2) {
$('#divAppName').show();
}
else if (value == 3) {
$('#divSSN').show();
}
else if (value == 4) {
$('#divRemref').show();
}
});
});
Upvotes: 0
Reputation: 153
You could write your function in a way that it gets the value of the dropdown inside the function itself:
function setDivVisibility() {
var e = $('#ddl').val();
if (e == 1) {
// Show/Hide elements
} else if (e == 2) {
// Show/Hide elements
}
// and so on...
}
Then call the function for the first time on document ready:
$(document).ready(function() {
setModeVisibility();
});
Bonus: For unobtrusive JavaScript, put this in the document ready as well so you don't need to the onchange
behavior mixed in with the html.
$('#ddl').change(function () {
setModeVisibility();
});
Upvotes: 0
Reputation: 1307
First I dont think you should create the function in document.ready, From this link
defining it outside the document.ready will make it accessible to your jS after your page has loaded.
Upvotes: 1
Reputation: 5862
Right after you define the function in $(document).ready()
, just call it:
toggleDIvDisplay(1);
The above assumes you want your page-load behavior to be when e
is set to 1
.
$(document).ready(
function toggleDIvDisplay(e) {
// ... your implementation, removed for brevity
}
toggleDIvDisplay(1);
);
Upvotes: 1