When I clone row autocomplete is not working and when I postback it doesn't se the new row

Hi again
I have a table with a row for entering an agents name and more details
</tr>        

                  @{ int i = 0;   

             <tr class="tr_clone">                                  

                <td class="td-label">
                     @Html.Label("Agent Name")
                </td>
                <td class="td-data" colspan="1">
                    @Html.TextBox("mytxtbox1",null, new { @class = "AgentName" })  
                   @* @Html.HiddenFor(model => model.merchantpercentages[1].AGENT_ID, new { @class = "Agent", @id="txtAgent1" })*@
                    @Html.TextBoxFor(model => model.merchantpercentages[i].AGENT_ID,new { @class = "Agent"})
                </td>
                 <td colspan="3">
                     @Html.TextBoxFor(model => model.merchantpercentages[i].FIRST_YEAR, new { @class = "year1"})
                     @Html.TextBoxFor(model => model.merchantpercentages[i].SECOND_YEAR, new { @class  "year2" })
                     @Html.TextBoxFor(model => model.merchantpercentages[i].THIRD_YEAR, new { @class = "year3" })
                     @Html.TextBoxFor(model => model.merchantpercentages[i].FOURTH_YEAR, new { @class = "year4" })
                     @Html.TextBoxFor(model => model.merchantpercentages[i].FIFTH_YEAR, new { @class = "year5" })
                 </td>   
                  <td>
                       <button type="button", id="Add", class="AddRow">Add</button>
                  </td>
                 </tr>
    i++;
                  }  

        </table>

Open in new window


and jquery which is supposed to clone the last row
 $('table').on("click", ".AddRow",CloneRow) 

    function CloneRow()
    {
        var clone = $(this).closest('.tr_clone').clone()
        $(this).closest('.AgentName').autocomplete('destroy')         
        clone.insertAfter(".tr_clone:last");   
        $(clone).find(".AddRow").remove();
        clone.closest('.AgentName').addClass('.AgentName')
 
    }

Open in new window


When I clone the last row the autocomplete does not work anymore. Also once I got the autocomplete to work, but I can't remember what I did, but when I pressed to save the data, when it was posted back it seemed like it didn't see the new row of data.
Any help is greatly appreciated,
Thanks in advance
Niall292Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Niall292Connect With a Mentor Author Commented:
I changed the jquery again, now it copies the last row and it saves all data to the Server.
$(this).closest('.AgentName').autocomplete('destroy')

        var merID = $('#txtMerID').val()       

        var itemindex= $("#tableAgent > tbody > tr").length

        var newItem = $("<tr><td><label>Agent Name</label></td><td><input type='text' id='myTextbox'" + itemindex + " class='AgentName' /><input id='hidMerchantID_[" + itemindex + "]' name='merchantpercentages[" + itemindex + "].MERCHANT_ID' class='hidMerID'/><input id='merchantpercentages_['" + itemindex + "']__AGENT_ID name='merchantpercentages[" + itemindex + "].AGENT_ID' class='Agent' type='hidden' /></td><td><input type='text' id='merchantpercentages_[" + itemindex + "]__FIRST_YEAR' class='year1' name='merchantpercentages[" + itemindex + "].FIRST_YEAR' /><input type='text' id='merchantpercentages_[" + itemindex + "]__Second_YEAR' class='year2' name='merchantpercentages[" + itemindex + "].SECOND_YEAR' /><input type='text' id='merchantpercentages_[" + itemindex + "]__THIRD_YEAR' class='year3' name='merchantpercentages[" + itemindex + "].THIRD_YEAR' /><input type='text' id='merchantpercentages_[" + itemindex + "]__FOURTH_YEAR' class='year4' name='merchantpercentages[" + itemindex + "].FOURTH_YEAR' /><input type='text' id='merchantpercentages_[" + itemindex + "]__FIFTH_YEAR' class='year5' name='merchantpercentages[" + itemindex + "].FIFTH_YEAR' /></td></tr>");

        $("#tableAgent").append(newItem);

        $('#tableAgent').last("tr").find(".hidMerID").val(merID)

        ApplyAutoComplete(".AgentName");   

Open in new window

Now when I actually figured it out It is pretty easy to explain. the newitem variable is the HTML for the new row making sure you put the name in for any fieldyou want to save to the database. The name should be the class name . Fieldname
0
 
Niall292Author Commented:
What would be the best way to go about this jquery or HTML helper. I have never created a HTML helper but I'm reading up about them presently
0
 
Niall292Author Commented:
Now I look at it with a fresher head (After going away from it for a day I can see so many reasons why it's not working I got the Jquery to work by changing the CloneRow function to

function CloneRow()
{
var clone = $(this).closest('.tr_clone').clone()
$(this).closest('.AgentName).autocomplete('destroy')
clone.insertAfter('tr_clone:last');
$(clone.find('AddRow').remove(); //removes the button from the cloned row.
$(clone).find('AgentName').val(); //Clear the agent name box in the cloned row; TODO clear all in row
ApplyAutoComplete('.AgentName') // Earlier destroyed autocomplete but now with a new row I want to activate it again

Open in new window


I am now working on getting it to see all rows to be saved, will let you know how I get on
0
 
Niall292Author Commented:
I finally figured it out.
0
All Courses

From novice to tech pro — start learning today.