In this question, all code has been generalized.
As the question title has explained, I have a jQuery function:
$(document).ready(function() {
if (something) {
// This does something
} else if (something else) {
// This does something else
} else {
// And this does something else
}
});
In this function, when the page loads, it checks for information that's on the web page.
I have a hidden input with a value that I check. This works.
I have 2 Drop down lists with two IDs (for the sake of argument): ddl1, ddl2
In MVC 4, they will look like this:
@Html.DropDownListFor(model => model.SelectedValue, Model.List1, new { id = "ddl1" })
@Html.DropDownListFor(model => model.SelectedValue, Model.List2, new { id = "ddl2" })
Next, I have two On Change jQuery methods, accordingly:
$("#ddl1").change(function () {
// Does something when the index of the first drop down changes
});
$("#ddl2").change(function () {
// Does something when the index of the second drop down changes
});
When I change the index on the page, these methods fire. Now, Here's where my question comes into play.
In my $(document).ready()
function, I call those On Change function from this method, it does not fire...
$(document).ready(function() {
if (something) {
if (condition for ddl1) {
$("#ddl1").change(); // Does not fire.
} else {
$("#ddl2").change(); // Does not fire.
}
} else if (something else) {
// This does something else
} else {
// And this does something else
}
});
To me, this makes no sense why those functions are not firing.
It's a direct method call.
If someone can shed some light on this matter, i'll be thankful.
Cheers.
The proper way to trigger a change method using jQuery, is using trigger function, this way:
$(document).ready(function() {
if (something) {
if (condition for ddl1) {
$("#ddl1").trigger("change"); // TRIGGER change event
} else {
$("#ddl2").trigger("change"); // TRIGGER change event
}
} else if (something else) {
// This does something else
} else {
// And this does something else
}
});
More info here: http://api.jquery.com/trigger/
I modified my code to do the following (I went with just plain javascript, since I don't have the time to figure out why this is an issue):
1) I removed my on change jQuery method to a plain javascript function: From:
$("#ddl1").change(function () { /*code*/ });
To:
function changeDdl1 () { /*code*/ }
2) I took out the triggers to simply add a javascript call: From:
$("#ddl1").trigger("change");
To:
changeDdl1();
3) I added the @onchange MVC 4 attribute to my Drop Down Lists:
@Html.DropDownListFor(model => model.SelectedValue, Model.List1,
new { id = "ddl1", @onchange = "changeDdl1();"})
Thank you everyone who has provided help and hints.
Cheers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.