Generate HTML with JavaScript and jQuery - JavaScript not executing?

Question

Following to this post, I recreated the code with jQuery. jsFiddle says, that everything should be find and I can't find any mistakes either. Here's the Code:

function generatePost(title, time, text) {
var postCount = 0;

$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');

var paragraphs = text.split("||");

for (var i = 0; i < paragraphs.length; i++) {
    var paragraphCount = 0;
    $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
    paragraphCount++;
}

postCount++;
}

Now the problem might be that the JavaScript is not even executed, my HTML looks like this:

<head>
    <?php include 'components/_head.php';?>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/postGen.js"></script>
    <script type="application/javascript" src="postGen.js">
        document.addEventListener('DOMContentLoaded', function() {
            generatePost("Testing Title", "I don't know", "This is || a paragraph");
        }
    </script>
</head>
<body>
    <header>
        <?php include 'components/header.php';?>
    </header>

    <main>
        <?php include 'components/main.php';?>
        <div class="fullscreencontainer">
            <img class="background" src="img/background.jpg">
            <div class="title">
                <h2>Der Bürger als Edelmann</h2>
                <h4>von Moliére</h4>
            </div>
        </div>
        <div class="container">
            <div id="postcontainer">
                /* ? */
            </div>
            <div class="sidebar">

            </div>
        </div>
    </main>
    <footer>
        <?php include 'components/footer.php';?>
    </footer>
</body>

The structure of the files:

index.php
js/jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box

Inspector shows nothing new.
Console shows:

Syntax Error: Missing ) after argument list

EDIT: The final Code:

    <script type="application/javascript">
            $(document).ready(function() {
                function generatePost(title, time, text) {
                var postCount = 0;
                $('#postcontainer').append('<div id=' + "post_" + postCount + '></div>')
                $('#post_' + postCount).attr('class', 'content');
                $('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>');

                var paragraphs = text.split("||");
                for (var i = 0; i < paragraphs.length; i++) {
                    $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>');
                }
                postCount++;
            }

                generatePost("Testing Title", "I don't know", "This is || a paragraph");
                generatePost("Testing Title", "I don't know", "This is || a paragraph");
                generatePost("Testing Title", "I don't know", "This is || a paragraph");
                generatePost("Testing Title", "I don't know", "This is || a paragraph");
        });
    </script>

If that's all of your HTML, generatePost has nowhere to append the HTML it generates as the element you're trying to append to ('#postcontainer') doesn't exist. — Jeffwa
– Jeffwa, Commented Nov 19, 2015 at 21:20
As for your JavaScript, a few issues: if you have a src attribute in a script tag the code within the script tag itself will never run. — Jeffwa
– Jeffwa, Commented Nov 19, 2015 at 21:22
does it give you a 404 in the Chrome developer tool for the JS file? If not the only thing I can think of by looking at this is that the function itself is not being executed in the code. You just declared a function and thats it. — Rice Junkie
– Rice Junkie, Commented Nov 19, 2015 at 21:23
I forgot to post the HTML-Code with the #postcontainer, sure it's in. Second: Didn't know that, sadly didn't solve the Problem. I keep checking the Inspector which doesn't show anything, the only thing showing up in the console is: SyntaxError: missing ) after argument list — TheLexoPlexx
– TheLexoPlexx, Commented Nov 19, 2015 at 21:25
Then please edit your question with the proper code so we can help. — Jeffwa
– Jeffwa, Commented Nov 19, 2015 at 21:29

Paul G · Accepted Answer · 2015-11-19 22:46:43Z

Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..).

So I changed the HTML to:

<head>
</head>
<body>
    <main>
        <div class="container">
            <div id="postcontainer">

            </div>
        </div>
    </main>
</body>

And the jQuery to:

$(document).ready(function() {
        function generatePost(title, time, text) {
        var postCount = 0;
        $('#postcontainer').append('<div id=' + "post_" + postCount +  '></div>').attr('class', 'content');
        $('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
        $('#post_h3_' + postCount).append('<span>' + time + '</span>');
        var paragraphs = text.split("||");

        for (var i = 0; i < paragraphs.length; i++) {
            var paragraphCount = 0;
            $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
            paragraphCount++;
        }
        postCount++;
    }  
         generatePost("Testing Title", "I don't know", "This is || a paragraph"); 
});

Just calling the function at the end of the document.ready. Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation.

Cheers,

PG

OMG! It finally worked! The CSS doesn't apply yet but I got hinted to the wrong attr-function above, so I will fix that soon. Thanks a lot!
No problemo! Also, you can add the class "content" by just including it in the string where you give the divs their id's. ie: $('#postcontainer').append('<div id=' + "post_" + postCount + ' class="content"></div>')
I had that and jsFiddle reported an error in the lines where I had that but I'll try again.
It finally works, and it works good. There's only one problem: It takes forever for the page to load.

Collectives™ on Stack Overflow

Generate HTML with JavaScript and jQuery - JavaScript not executing?

1 Answer 1

4 Comments

Hot Network Questions