CODEWITHSUNDEEP
jquery
morganpdx
morganpdx

Reputation: 1876

HTML string passed in to jQuery .append() function not displaying

I have an ajax call which returns the following HTML:

<form action="/Function.aspx/Add" method="post">
    <input id="Type" name="Type" type="hidden" value="Customer" />
    <input id="CustomerId" name="CustomerId" type="hidden" value="3" />


    <tr>
        <td>
            <input type="submit" value="Save" style="width:7em;" />
        </td>
        <td colspan="2">
            <select id="CustomerAppId" multiple="multiple" name="CustomerAppId">
    <option value="BA">Option 1</option>
    <option value="AB">Option 2</option>
    <option value="DC">Option 3</option>
       </select>
        </td>
    </tr>

</form>

The ajax script performs great, and my result looks good in the alert() call:

<table id="appTable">
<tr>
    <th></th>
    <th><label for="AppId">ID</label></th>
    <th><label for="AppName">Description</label></th>
</tr> 

<tr>

    <td>  
    <a href="/Function.aspx/Remove/221?reqId=3">Delete</a>
    </td> 

    <td>PSE</td>
    <td></td>
</tr>

</table>        

<a href="/Function.aspx/BlankEditorRow/3?type=Customer" id="addItem">Add another...</a>

<script type="text/javascript">
$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {

            alert(html);
            $("#appTable").append(html);
        },
    });
    return false;
});
</script>

However, my HTML never shows up.
I tried:

I've been staring at this HTML trying to figure out what it doesn't like, and I'm just not seeing it. Any ideas?

Upvotes: 0

Views: 6281

Answers (1)

morganpdx
morganpdx

Reputation: 1876

Apparently, in order to properly evaluate the data from an ajax call, you need to wrap the result in a $().

So, when I changed this line:

$("#appTable").append(result);

To this:

$("#appTable").append($(result));

The row was added successfully.

Upvotes: 1

Related Questions