JQuery selector issue using ASP.NET MVC
I'm new to ASP.Net MVC and jQuery and what I'm trying to do is a form that adds a new RockBand or updates an existing RockBand based on whether rockbandid is an empty director or not. I decided now was the right time to take a ride with jQuery. So the first step is to list the groups and add an edit link. If the user clicks on the edit link, I want to change the value of the input field and the hidden field. The code below is the first step that tries to set the value of the input field (fixed string for now, but will end up being any group name). However, when I do this, I get an object error. (JQuery is included on 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>
I feel like I'm shining ... but I missed something fundamental.
source to share
Your code is fine. Your inclusion in JQuery is probably wrong. Btw, google provides free hosting for jQuery and other APIs. You can try replacing your jQuery with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
But anyway ... make sure it points to the correct file.
source to share
I copied your HTML and JavaScript into the example file; it worked for me. The only thing I suggest is to change the binding to the following:
<a href='#' onclick='fillinbandname("somesamplevalue"); return false;'>edit</a>
Also, you don't necessarily need a function for this, you can use jQuery directly on the onclick event. It's up to you though.
Make sure your HTML is generated as you expect and also make sure you generate unique IDs for each name and band. IDs cannot appear more than once in an HTML document.
source to share