Show/Hide part of the page based on dropdown choice in MVC 5

Question

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

Try something like `$(document).ready(function () { toggleDIvDisplay(whateveryouwantEtobe);});` if I understand you correctly. — dmeglio, Aug 18 '15 at 19:10
Instead of just saying `it is not working properly`, why can't you say the error you got ? — J Santosh, Aug 18 '15 at 19:25
I am assuming `e` is the value of your `dropdown` and you need to `toggle` div's based on the dropdown value. you can try something like this `$('#myDropDownID').on('change', function(){ if($(this).val() == 1){ // your code here and other conditions} });` — Sushil, Aug 18 '15 at 19:50
please check my answer @Alma. let me know if it works for you. — Sushil, Aug 18 '15 at 19:57

score 1 · Answer 1 · answered Aug 18 '15 at 19:10

1

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

answered Aug 18 '15 at 19:10

Thomas Stringer

5,682
3
24
40

it gave methis error when I try to change the dropdown - error: 'toggleDIvDisplay' is undefined – Alma Aug 18 '15 at 20:40

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

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.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 18 '15 at 19:17

mahlatse

1,322
12
24

score 0 · Answer 3 · edited Aug 18 '15 at 20:23

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

    });
});

score 0 · Answer 4 · answered Aug 18 '15 at 20:06

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

Show/Hide part of the page based on dropdown choice in MVC 5

4 Answers4