ajax append html 怎么写,ajax - jQuery .append(html) command appending incorrectly - Stack Overflow...

I am using a jQuery/Ajax call to append a partial view to a table. When the page loads, the partial view is created correctly. However, once the use attempts to append another item to the table, the formatting is incorrect despite the exact same partial view being used.

Here is the table. When this loads, the items are loaded onto the page correctly as the picture below illustrates:

State CodeAgent ID

@foreach (var item in Model.BankListAgentId)

{

if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))

{

@Html.EditorFor(model => item, "FixedPartialView")

}

}

Add Another

Once you click the Add another link, this jQuery/Ajax call is activiated

$(document).ready(function () {

$(".addFixed").click(function () {

//alert('test');

event.preventDefault();

$.ajax({

url: '@Url.Action("BlankFixedRow", "BankListMaster")',

cache: false,

success: function (html) { $("#fixedRows").append(html); }

});

});

$("#addVariable").click(function () {

event.preventDefault();

$.ajax({

url: '@Url.Action("BlankFixedRow", "BankListMaster")',

cache: false,

success: function (html) { $("#variableRows").append(html); }

});

});

});

That jQuery calls this method from the controller

public ViewResult BlankFixedRow()

{

SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });

ViewBag.StateCodeList = tmpList;

return View("FixedPartialView", new BankListAgentId());

}

Which calls this partial view

EDIT(a couple people noticed the id tag missing from the

, this was just a copy/paste error for this post, the actual code has the id tag)

@model Monet.Models.BankListAgentId

@{

Layout = null;

}

@using (Html.BeginCollectionItem("BankListAgentId"))

{

@Html.DropDownListFor(model => model.StateCode,

(SelectList)ViewBag.StateCodeList, Model.StateCode)

@Html.EditorFor(model => model.AgentId)

@Html.ValidationMessageFor(model => model.AgentId)

delete

@*

Delete*@

}

This is the same partial view that is called when the page first loads, which part of why I'm confused that the end result after hitting the Add another link turns out looking like this

EDIT

If you hit the Add another link twice, this is the result

EDIT

I've tried the following jQuery sucess commands with no luck

success: function (html) { $("#fixedRows > tbody:last").append(html); }

success: function (html) { $("#fixedRows tr:last").after(html); }

success: function (html) { $("#fixedRows > tbody").append(html); }

Here is the HTML that is rendered after the Add another link is clicked. I included the opening

tag for the form below it to show that the new rows are nowhere to be found.

Stat(s) Fixed

State Code	Agent ID
HI AL .. WY		delete
HI AL .. WY		delete
GA AL .. WY		delete

Add Another

Add Another

EDIT

Here is a screen shot of the table in Chrome's debugger after the Add Another link is clicked. As you can see, the data pulled from the table is loaded properly in respective

tags, however the empty row (which is sent via the same partial view as the rest) doesn't have any of the same table elements. The screen shot below that shows Response, however, which does include the tags

EDIT

I put a console.log(html) line in the success Ajax function so it now reads

success: function (html) {

console.log(html);

$("#fixedRows > tbody").append(html);

}

Here is the console output (state edited for readability)

AL

..

WY

delete