mvc 4 jquery functions with dropdownlist and window.onload issues

Question

I'm having an issue getting two sets of functions to work correctly. I have a change function that shows and hides a div that works as intended but can not get the window.onload function to correcly work when loading the page and not affecting how the .change functions work.

Function Script:

<script src="~/Scripts/jquery-2.0.3.js"></script>
<script>

    $(function () {
        window.onload = function () {
            if ($("#SelectedGenderId").val() == "3") {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if ($("#SelectedSettingId").val() == "1") {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });
</script>

The .change functions work as expected but the .onload does not. Am I using the .onload correctly?

score 1 · Answer 1 · answered Aug 31 '13 at 16:24

1

I'm pretty sure that the problem is due to your tests (if statements) being different in your onload() from the way you are handling it in the change() events.

In onload() you use the following test:

if ($("#SelectedGenderId").val() == "3")

with a string literal

but in the change() events you are using

if ($("#GenderId").val() == 3)

with an integer literal.

I am suspecting that even though the controls you are testing are different in each case, that you did not really intend to deal with the values in two different manners.

Hope that helps.

answered Aug 31 '13 at 16:24

David Tansey

5,813
4
35
51

There are so many different ways to handle dropdownlists, I settled on using a viewModel that passes in a SelectedGenderId as a string (can not use an int) and a selectList. This works very well with the .change function. I don't want to get into the pros and cons of how to implement a dropdownlist here. Is there a way to handle the the onload() function using the GenderId value that is currently sent in within the model? – jbolt Aug 31 '13 at 16:38
Is your `onload()` being called at all? Place an `alert()` in there. I am a little bit confused by the `window.onload` being specified inside of the `$(document).ready()` (in your case using the shorthand `$( function () {})`). Take a look at the accepted answer in this post: http://stackoverflow.com/questions/9095401/is-google-map-not-loading-if-i-have-a-javascript-error-on-page-google-maps-ap Hope that helps. – David Tansey Aug 31 '13 at 17:02
I placed an alert() inside the window.onload call and yes it is being called. and the .change functions are working. So the question becomes is how do I look at any data coming in from the model within that .onload function? – jbolt Aug 31 '13 at 17:56

score 0 · Accepted Answer · answered Aug 31 '13 at 21:31

Thanks to David Tansey for pushing me into the right direction. After looking further at the .onload function and trying to reconcile the difference between SelectedGenderId which needed to be a string for use with the dropdownlistfor html helper I came up with this solution for correctly identifying the state of the functions (using alert() to see when the IF statements would fire.

<script>
    $(function () {
        window.onload = function () {
            if (('@Model.Client.GenderId') == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if (('@Model.Client.SettingId') == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
           }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });

</script>

And for anyone trying to implement something similar here is the info:

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders, new { id = "GenderId" })
        @Html.ValidationMessageFor(model => model.Client.GenderId)
    </div>

    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.GenderDescription)
            @Html.ValidationMessageFor(model => model.Client.GenderDescription)
        </div>
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.SettingId, "Settings")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedSettingId, Model.Settings, new { id = "SettingId" })
        @Html.ValidationMessageFor(model => model.Client.SettingId)
    </div>

    <div class="setting-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.SettingDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.SettingDescription)
            @Html.ValidationMessageFor(model => model.Client.SettingDescription)
        </div>
    </div>

mvc 4 jquery functions with dropdownlist and window.onload issues

2 Answers2