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

Question

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:

Replacing the html variable in the script to '<tr><td>Hello!</td></tr>': that works.
Removing all and tags, leaving the plain and contents: that did NOT work.
Added $(document).ready() to the beginning of the script: No change

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?

You're missing a <table> element. That might be the problem. — Frédéric Hamidi
– Frédéric Hamidi, Commented Mar 21, 2011 at 19:34
Do You have $(document).ready(function() {//script here?...}) — user370306
– user370306, Commented Mar 21, 2011 at 19:34
As Frederic says, the html you are trying to insert is not valid without a table element, hence why a plain string works but this doesn't — Adam Hopkinson
– Adam Hopkinson, Commented Mar 21, 2011 at 19:37
Hehe - the table is elsewhere on the page. I didn't think to include that, since I mentioned that adding just a plain '<tr><td>Hello!</td></tr>' works. I'll update the question to show it, however. — morganpdx
– morganpdx, Commented Mar 21, 2011 at 19:51

morganpdx · Accepted Answer · 2011-03-21 22:14:08Z

1

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.

answered Mar 21, 2011 at 22:14

morganpdx

1,8763 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

morganpdx Over a year ago

The answer I posted worked for me and resolved the problem I stated above...perhaps there is a difference in the issue that you are encountering? Reading the comments posted to the original question might provide some guidance.

vlr Over a year ago

You are right. I did not use append() properly. I am using after() now, and it works properly.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related