MVC4 view is not detecting JQuery

Question

I have a @Html.DropDownList which calls a jquery function. But it failed to call the function. I have tried-

$(document).ready(function () {
    $('.test').change(function () {
        alert("1");            
    });
});

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { @class="test"})

and

function test() {
        alert("1");
    }

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { onchange="test();"})


@Scripts.Render("~/bundles/jqueryval") is also included in the view

Whats wrong here?

What's the error? Do you see any error in console? Are you include jQuery in your page? — user1823761
– user1823761, Commented May 15, 2013 at 9:35
Also you must write $('.test') instead of $('test'). Because you want to access elements with test class. — user1823761
– user1823761, Commented May 15, 2013 at 9:37
@Mojtaba- I have updated my question. Actually I tried with $('.test'). I am not getting any error. Its not invoking the function! — Sandy
– Sandy, Commented May 15, 2013 at 9:41
Confirm that jQuery actually shows up in view source - if you have a folder physically named the same as your bundle path, bundling won't work. — ScottE
– ScottE, Commented May 15, 2013 at 11:17

Kenneth · Accepted Answer · 2013-05-15 11:12:00Z

4

Your jQuery selector is wrong, use the id-selector instead:

$(document).ready(function () {
    $('#PropertyContent').change(function () {
        alert("1");            
    });
});

A few more possible errors:

jQuery is not referenced in the page. To check this, open firebug, chrome dev tools or IE dev tools and check whether you have any errors
A common error is to include the $(document).ready inside the view, and only reference jQuery at the bottom. This will generate an error because at that point $ is not known. Possible solutions:
1. Move the code to an external file and reference that file after the jQuery inclusion
2. Move your jQuery declaration to the head-section (not recommended as it will slow down the page load)

edited May 15, 2013 at 11:12

answered May 15, 2013 at 9:35

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sandy Over a year ago

no, its my fault when I copied to stack overflow, actually . is there.

Kenneth Over a year ago

Do you see any errors in the console log? Are you including jQuery before the call to $(document).ready ?

Sandy Over a year ago

I am not getting any error in console and I already included @Scripts.Render("~/bundles/jqueryval")

Kenneth Over a year ago

Check the edit to my answer. If you're including the script inside the view, it's probably executed before jQuery is loaded. You either need to move it after jQuery or move jQuery to the head so it's loaded before your script

Kenneth Over a year ago

Could you post the result HTML (relevant parts) so I can have a closer look at what's going on?

|

Vond Ritz · Accepted Answer · 2013-05-15 09:37:16Z

3

$(document).ready(function () {
    $('.test').change(function () {
        alert("1");            
    });
});

$('.test').change(function () { // on this part u need to add '.' in test

u forgot that it is a class.

answered May 15, 2013 at 9:37

Vond Ritz

2,01215 silver badges15 bronze badges

1 Comment

Sandy Over a year ago

I have updated my question. actually I tried with $('.test')

Vishal Gavle · Accepted Answer · 2013-05-15 11:14:18Z

1

You can also use following code.

$(document).ready(function () {
    $(".test").live("change",function () {
        alert("1");            
    });
});

answered May 15, 2013 at 11:14

Vishal Gavle

3672 silver badges5 bronze badges

Comments

score 0 · Accepted Answer · 2013-05-15 10:50:33Z

0

Working FIDDLE Demo

$(function () {
    $('#PropertyContent').change(function () {
        alert("1");
    });
});

edited May 15, 2013 at 10:50

answered May 15, 2013 at 9:46

user1823761

4 Comments

user1823761 Over a year ago

Would you write the generated code for your @Html.DropDownList?

user1823761 Over a year ago

The @Html.DropDownList syntax will generate some HTML for you. I want that HTML to debug the problem.

Sandy Over a year ago

This is the generated code of @Html.DropDownList-

<select name="PropertyContent" id="PropertyContent"><option value="442071">MBS</option> <option value="44050">MM</option> </select>

user1823761 Over a year ago

So you haven't class for it at all. Use the id instead. I've updated my answer.

Umar F Khawaja · Accepted Answer · 2013-05-15 11:38:14Z

0

Add the following line somewhere in the view or the layout:

@Scripts.Render("~/bundles/jquery")

Also your selector is not correct. You have no HTML element with class="test".

Try $('#PropertyContent') instead.

edited May 15, 2013 at 11:38

answered May 15, 2013 at 11:32

Umar F Khawaja

3,9971 gold badge34 silver badges53 bronze badges

Comments

Norrj · Accepted Answer · 2014-05-23 13:56:03Z

0

Please try to get the dropDownList by its Id like the code below. I got a working example for you: http://jsfiddle.net/pzzQu/

$(document).ready(function () {
    $('#PropertyContent').change(function(){
        alert('1');
    });
});

answered May 23, 2014 at 13:56

Norrj

1246 bronze badges

Collectives™ on Stack Overflow

MVC4 view is not detecting JQuery

6 Answers 6

10 Comments

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related