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.

do you call the append() in a DOM-ready state? i.e. in $(function (){ [ ... ] }); ? Otherwise the element you'd like to append nodes to might not exist, when you call append() — HBublitz
– HBublitz, Commented Sep 5, 2011 at 14:49

Brian Glaz · Accepted Answer · 2011-09-05 14:47:12Z

2

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>');
});

answered Sep 5, 2011 at 14:47

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

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

2 Comments

numbers1311407 Over a year ago

the append is happening after an ajax call

Brian Glaz Over a year ago

@marcioAlmada yes, I think we would need to see the $.ajax() block.

genesis · Accepted Answer · 2011-09-05 14:43:57Z

1

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

answered Sep 5, 2011 at 14:43

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Comments

marcio · Accepted Answer · 2011-09-05 14:57:03Z

0

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;"

answered Sep 5, 2011 at 14:57

marcio

10.6k13 gold badges58 silver badges86 bronze badges

Comments

Rajat · Accepted Answer · 2011-09-05 15:09:26Z

-1

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!

answered Sep 5, 2011 at 15:09

Rajat

1

Collectives™ on Stack Overflow

JQuery append not working?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related