jquery .click function not working in c# mvc3 w/ Razor

Question

For far too long I've been stumbling around trying to make a simple .click jquery method work in my c# site. I just want it to call to a function in my controller, but I can't seem to get any button click to register. The calls in it are very similar to a .change() function for another control that works just fine.

JQuery method in question:

$('#addUserButton').click(function () {
            var e = document.getElementById('searchDDL');
            var itemText = e.options[e.selectedIndex].text;
            var url = encodeURI('@Url.Action("AddUser")' + "?User=" + itemText);
        });

HTML of button that is intended to trigger the above function:

<button id="addUserButton" type="button" value="addUser">&gt;</button>

Some things I've researched and tried already:

Changing from a .click() method to a .live("click", etc) method made no difference.
I saw that setting the button type="submit" would be a problem, so I changed it to "button."
I made sure to include it in document.ready() - I was already doing this before researching other problems.

I have created a jsfiddle for the problem here. I had to remove a lot of sensitive information so the page is not fully fleshed out. It is for an internal application and only has to work with IE.

EDIT: Below I am adding the function I am trying to call in my controller; other posters have verified that the jquery is working as expected, so I'm inclined to believe it is something to do with my c#.

public ActionResult AddUser(string User)
    {
        //numUsers = App.NumberUsers + 1;
        selectedUsers.Add(User);
        return RedirectToAction("ApplicationForm");
    }

Your jsfiddle contains @Url.Action() references in the JavaScript. Can you at least confirm that these are populated with proper URLs when you're running this in your live environment? — Adrian Wragg
– Adrian Wragg, Commented Jul 8, 2013 at 14:36
@AdrianWragg - I added alerts and verified that, yes, the @Url.Action() references are populated with URLs. Relative URLs, but valid URLs. — rgreasons
– rgreasons, Commented Jul 8, 2013 at 15:12

Louis Ricci · Accepted Answer · 2013-07-08 14:25:20Z

1

Did you try debugging your function or even putting alerts in it to flesh out whats happening.

$('#addUserButton').click(function () {
alert("FUNCTION IS GETTING CALLED ON CLICK EVENT");
            var e = document.getElementById('searchDDL');
alert(e);
            var itemText = e.options[e.selectedIndex].text;
alert(itemText);
            var url = encodeURI('@Url.Action("AddUser")' + "?User=" + itemText);
alert(url);
        });

Doesn't look like your function makes an AJAX request after getting the URL.

answered Jul 8, 2013 at 14:25

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

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

3 Comments

rgreasons Over a year ago

I did add alerts to debug and verified that the function is getting called and accessed as expected. As you pointed out, I never made a call with the url; I added $("contentDiv").load(url); like in my other function. Unfortunately it still isn't firing off the function. Thanks for the help.

Louis Ricci Over a year ago

@rgreasons - $("#contentDiv").load(url); you need a # before your ID

rgreasons Over a year ago

^sure enough. I would have swore I put one in there since it was copy and paste. ugh. Thanks.

Fiona - myaccessible.website · Accepted Answer · 2013-07-08 14:59:32Z

0

It's not something silly like the extra closing > bracket on this?

<button id="addUserButton" type="button" value="addUser">></button>

answered Jul 8, 2013 at 14:59

Fiona - myaccessible.website

15k17 gold badges85 silver badges118 bronze badges

1 Comment

rgreasons Over a year ago

Sorry, I forgot to update that after another commenter mentioned the issue, but it appears he deleted his comment. But no, it wasn't the issue.

Praveen · Accepted Answer · 2013-07-08 15:12:10Z

0

From your JSFiddle, it seems you're not including the jQuery.

Which is at the top-left corner of JSFiddle.

I've updated fiddle working fine. Remember you're including jQuery, so try to make use of its feature and leave Javascript.

answered Jul 8, 2013 at 15:12

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Collectives™ on Stack Overflow

jquery .click function not working in c# mvc3 w/ Razor

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related