jQuery .appendTo() usage in FF breaks formatting

153 Views Asked by At

I'm making a simple shopping cart for my site. On an item's description page, after clicking the 'add to cart' button, the item appears at the bottom of your list of items in your shopping cart. It works perfectly in Chrome and IE9 but Firefox (v6 in this case) breaks the nice formatting. The appendTo is able to make all the information appear, but in Firefox all the items in the cart (which are in an HTML table) lose there formatting. The text and pictures in the table move around (for all the items. not just the new one).

 $.post(
        'handlers/addToCart.php',
        {cartItem:"<?php echo $itemID; ?>"},
        function(data){             
            if(data.num > 0){$('#empty').hide();}
            //append new to item to bottom to cart
            $(data.insert).hide().appendTo('#contents').show(1200);
        },
        "json"
        );

this is the html that gets echoed to be appended to the table:

       <tr>
            <td>
            </td>
            <td>
                <a href=\"http://www.mysite.com/spotlight.php?itemNo=$cID\">
                    <img src=\"$cthumb\" width=\"40\" height=\"35\" />
                </a>
            </td>
            <td>
                <a href=\"http://www.mysite.com/spotlight.php?itemNo=$cID\">$cname</a>
            </td>
        </tr>
        <tr>
                <td>
                    <img src=\"img/delete_x.gif\" width=\"20\" height=\"20\" id=\"$cID\" alt=\"$cfname\" class=\"delx\" onclick=\"delCartItem(id,alt)\" />
                </td>
                <td colspan=\"2\" class=\"cartPrice\">
                    \$$cprice
                </td>
        </tr>
        <tr><td colspan=\"3\"><hr /></td></tr>

and this is the cart with 1 item already in it:

<table id="contents">
    <tr><td colspan="3"><hr /></td></tr>
    <tr>
        <td>
        </td>
        <td>
            <a href="http://www.mysite.com/spotlight.php?itemNo=981">
                <img src="thumb/pro.png" width="40" height="35" />
            </a>
        </td>
        <td>
            <a href="http://www.mysite.com/spotlight.php?itemNo=981">Product ABC</a>
        </td>
    </tr>
    <tr>
            <td>
                <img src="img/delete_x.gif" width="20" height="20" id="981" alt="ABC" class="delx" onclick="delCartItem(id,alt)" />
            </td>
            <td colspan="2" class="cartPrice">
                $40.00
            </td>

    </tr>
    <tr><td colspan="3"><hr /></td></tr>
</table>
1

There are 1 best solutions below

0
On

Try $('#contents').append(data.insert)