Trouble with jQuery selector using ASP.NET MVC

Question

Howdy.

I'm new to both ASP.Net MVC and jQuery and what I'm trying to do is make a form that either adds a new RockBand or updates an existing RockBand based on if the rockbandid is an empty guid or not. I figured now is a good time to get rolling with jQuery. So the first step is to make a list of bands and put an edit link next to it. If the user clicks on the edit link I want to alter the value of the input box and the hidden field. The code below is the first step, trying to set the value of the input box (with a fixed string for the moment but eventually would be whatever the band name is). However I get an Object Required Error when I do so. (The jQuery include is on the Site.Master)

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    function fillinbandname(thebandname) {
        $('#bandname').val(thebandname);
    }
</script>
<ul>
<%foreach (DomainModel.RockBand rockband in ViewData.Model) %>
<%{ %>
<li><%=rockband.BandName %> <a href='javascript:fillinbandname("somesamplevalue");'>edit</a></li>
<%} %></ul>

<%Html.BeginForm("MakeOrUpdateRockBand", "Bands", FormMethod.Post); %>
<input type="text" id="bandname" name="bandname" maxlength="30" />
<input type="hidden" id="bandid" name="bandid" value="00000000-0000-0000-0000-000000000000" />
<input type="submit" value="Add New Band" />
<%Html.EndForm(); %>

</asp:Content>

It feels like I'm soooo close...but am missing something fundamental.

Answer 1

I copied your HTML and JavaScript into a sample file; it worked for me. The only thing I'd suggest is changing your anchor to the following:

<a href='#' onclick='fillinbandname("somesamplevalue"); return false;'>edit</a>

Also, you don't necessarily need a function to do this, you can use jQuery directly in the onclick event. That's to your discretion though.

Do make sure that your HTML is generating as you expect, and also make sure you are generating unique IDs for each bandname and bandid. IDs cannot appear more than once in an HTML document.

Answer 2

Your code is fine. Your include for JQuery is probably wrong. Btw, google is providing free hosting for jQuery and other APIs. You can try to replace your jQuery include by this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;

But anyway ... check that its pointing to the right file.