JQuery append not working?

Question

I have a PHP template that is compiled with Smarty. In this code I have embedded div sections, similar to this:

 <div>
 <div id="services" style="margin-top: 5px; width: 100%; display:none;">
 <div id='blocking' style="float: left; width: 100%;">
    <div id="div1" ...>
    </div>

    <div id="div2" style="float: left; height:100px; width: 100%; margin-top: 4px; margin-bottom:4px;">
    <table id="list" width="100%">
    <thead>
    <tr> 
      <th width="30%" class="tablaIzq">Lists</th> 
      <th width="70%" class="tablaIzq">Description</th> 
    </tr>
    </thead>
    <tbody id="LBBody">                 
    </tbody>
    </table>
    </div>
</div>
</div>
</div> 

A webservice es called using ajax+json... and I would like to put some of the data that I receive in the tbody LBBody but when I try using jquery's append nothing is appended.

It's done like this:

$("#LBBody").append('<tr><td class="tablaIzq" style="font-weight: normal; height: 22;" colspan="3">Hi</td></tr>')

Am I using append wrongly?

Thanks and best regards.

Answer 1

Try including your append code in a $(document).ready() block like this

$(document).ready(function() {
    $("#LBBody").append('<tr><td class="tablaIzq" style="font-weight: normal; height: 22;" colspan="3">Hi</td></tr>');
});

Answer 2

Be sure you put your append code AFTER your actual elements. Otherwise it won't work

Answer 3

Have you tryed to inspect your DOM to see if the elements are being appended or not? I have a feeling that maybe the height property inside your style parameter is setting your new elements to be displayed with a 0 height.

To fix that, you should inform the corresponding value plus the unity:

style="height:22px;"

Answer 4

PHP and Javascript (or JQuery) do not work together. If you try to use them together, the entire Javascript stops running. So, the best way to avoid this is to use JQuery AFTER using your PHP. After you've finished your PHP code, end it with a "?>" tag and then use JQuery without using PHP's echo or print statement.

This is the wrong code and javascript won't work in this:

<?php
echo '<script type="javascript/text">...</script>';
?>

This is the correct implementation:

<?php
echo '...';
?>
<script type="javasrcipt/text">...</script>

Hope this helps!