Problem with .html() function in jQuery

Question

Can anyone explain why this jQuery .html() function is not outputting anything? I'm new too jQuery and cant seam to spot anything, if you can please tell me :D

I'll just include the html, nothing else:

 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo-1.4.2.js"></script>
    <script type="text/javascript">
        //when the DOM is ready 
        $(document).ready(function(){

            var like_count = <?php print "23"; ?>;
            //Scripts for getting number of comments for this post
            var comment_count = <?php print "12"; ?>

            var thumnail_path - "";
            var time_ago - "";


            //settings on top
            var doindex = 'comments.php?item_id=';
            var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
            //function that creates posts
            var postHandler = function(postsJSON) {
                $.each(postsJSON,function(i,post) {

                    //post url
                    var postURL  = '' + doindex + post.item_id;
                    var id = 'post-' + post.ID;
                    //create the HTML
                    $('<div></div>')
                    .addClass('post')
                    .attr('id',id)


                                //Script for getting the number of likes for this post




                    //generate the HTML
.html('<table width="244" height="121" border="0" cellpadding="0" cellspacing="2" ><tr><td height="24" colspan="2" bgcolor="#0270B7"><table width="410" border="0"><tr> <td width="404" height="20" class="username"><a href="../profile.php?user=' + post.username + '" class="username">&nbsp;' + post.username + '<span class="name">&nbsp;' + post.name + '</span></a></td></tr></table></td></tr><tr> <td width="51" bgcolor="#Edeff4"><span class="thum"><img src="' + thumnail_path + '" alt="" width="50" height="50" /></span></td><td width="355" height="50" bgcolor="#Edeff4" class="content">&nbsp;' + post.item_content  + '</td></tr><tr><td height="19" colspan="2" bgcolor="#Edeff4" class="content"><a href="comment.php?id=' + post.item_id + '"  class="post-title">&nbsp;<span class="post-title">comment </span></a><a href="#"  class="post-title">(' + likecount + '</a><a href="comment.php?id=' + post.item_id + '"  class="post-title"><span class="post-title">)</span></a> <span class="post-title"><a href="#"  class="post-title">likes (' + likecount + ') &nbsp;' + time_ago + '</a></span></td></tr><tr><td height="18" colspan="2" class="content">&nbsp;</td></tr></table>')

Thanks :))

What are you calling .html() on? Surely it must be something. — aroth
– aroth, Commented Mar 27, 2011 at 3:17
You need something to put the content into like $('#someDiv').html('<p></p>'); api.jquery.com/html — emco
– emco, Commented Mar 27, 2011 at 3:18
Javascript is supposed to manipulate the DOM, not create it. What exactly are you doing placing that much markup in a script method? — Brad Christie
– Brad Christie, Commented Mar 27, 2011 at 3:18
the input is working.. but i changed the '.html()' and now its not — user663049
– user663049, Commented Mar 27, 2011 at 3:20
@Brad Christie, I was under the impression that adding to the DOM is manipulating it. — The Muffin Man
– The Muffin Man, Commented Mar 27, 2011 at 3:21

user236139 · Accepted Answer · 2011-03-27 03:27:11Z

2

Assuming you haven't left out part of your script, it doesn't look like you're ever adding your div to the body somewhere.

After your html call, put .appendTo('body'). Example:

$('<div></div>').html("Some stuff...").appendTo('body');

Of course, you can use whatever function you want to place it in the document.

answered Mar 27, 2011 at 3:27

user236139

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

Comments

Jess · Accepted Answer · 2011-03-27 03:18:57Z

0

Why would it output anything? I'm not a jquery wizard, but I believe if you give .html information (as you are doing) it doesn't output anything, instead it loads that into the item specified. aka:

$('body').html('<h1>TEST</h1>');

if you want to retrieve the html don't put anything between the parenthesis

var body = $('body').html();

Note: Not tested

I would look up information about jquery on visualjquery.com and http://api.jquery.com/category/selectors/basic-css-selectors/

answered Mar 27, 2011 at 3:18

Jess

8,7306 gold badges51 silver badges68 bronze badges

Comments

Arun David · Accepted Answer · 2011-03-27 03:22:45Z

0

<div id='output'></div>
<script>
$('#output').html('<your content>');
</script>

answered Mar 27, 2011 at 3:22

Arun David

2,7843 gold badges18 silver badges18 bronze badges

Comments

Saurabh Gokhale · Accepted Answer · 2011-03-27 03:24:06Z

0

You must call the .html() function on something.

Check out this link :

.html()

answered Mar 27, 2011 at 3:24

Saurabh Gokhale

46.5k35 gold badges139 silver badges163 bronze badges

1 Comment

user663049 Over a year ago

Look at my edit above.. it is calling on something, i have prooved the function its calling on is working.. i changed the .html and now its not

Bene · Accepted Answer · 2011-03-27 04:05:54Z

0

I usually add HTML within a DIV by selecting it by its id. You might wanna try adding the html on another line, selecting the div by its id like that:

$('<div></div>').addClass('post').attr('id',id);
$('#'+id).html('blablabla');

I've not tested this. It it doesn't work, you can create an empty DIV like Arun David just said before and append the new DIV in.

answered Mar 27, 2011 at 4:05

Bene

1,92514 silver badges15 bronze badges

Collectives™ on Stack Overflow

Problem with .html() function in jQuery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related