Question

I am using this article to create a way for users to enter in multiple rows on a single entry form. The difference of what the author is doing and what I am doing is that I am putting my fields into a table. The problem I have is that I am not getting new rows inserted into my table. My guess is that the script isn’t finding #editorRows but since I am still only learning jQuery I am not 100% sure.

My HTML showing only relevant parts

<fieldset>
    <legend>Request Details</legend>
    <table>
        <tbody id="editorRows">
            <tr><th>Date</th><th>Time</th><th>Hours Requested</th><th>Request Type</th><th></th></tr>
            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

        </tbody>
    </table>

    <p><a href="/LeaveRequest/BlankRequestedDayRow" id="addItem">Add Day</a></p>
</fieldset>

My jQuery Code:

<script type="text/javascript">
    $(document).ready(function() {
        $("#addItem").click(function() {
            $.ajax({
                url: this.href,
                cache: false,
                success: function(html) { $("#editorRows").append(html); }
            });
            return false;
        });
        $("a.deleteRow").live("click", function() {
            $(this).parents("tr.editorRow:first").remove();
            return false;
        });
    });
</script>

The code in /LeaveRequest/BlankRequestedDayRow is being called, so my guess is that the code doesn’t know where to put it. BlankRequestedDayRow adds:

            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

The full code of BlankRequestedDay as requested:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EmployeePayroll.ViewModels.LeaveRequestRow>" %>
<%@ Import Namespace="EmployeePayroll.Helpers"%>

<tr class="editorRow">
    <% using (Html.BeginCollectionItem("requestedDays"))
       { %>
        <td><%= Html.HiddenFor(model => model.DaysRequested.RequestId) %><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.Date)%></td>
        <td><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.TimeOfDay)%></td>
        <td><%= Html.TextBoxFor(model => model.DaysRequested.HoursRequested, new { size = 6 })%></td>
        <td><%= Html.DropDownListFor(model => model.DaysRequested.RequestType, 
            new SelectList(Model.LeaveRequestType, "Value", "Text", Model.DaysRequested.RequestType), "(Select)")%></td>
        <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
    <% } %>
</tr>

Answer 1

Did you check if you’re ajax call returns something ?

With firefox, you can use firebug‘s console to inspect the call.