-1

I want to add the counter timer script, using jQuery. right after the id="counter" pargraph so instead of this code:

<body>

<p> beginning of site</p>

<table id="timer_table">
    <tbody>
        <tr>
            <td>
                <p id="counter"  style="color: red;"> Here's the counter: </p>

            </td>
        </tr>
    </tbody>
</table>

<p> rest of site...</p>

</body>

i'll get this code:

<body>

<p> beginning of site</p>

<table id="timer_table">
    <tbody>
        <tr>
            <td>
                <p id="counter"  style="color: red;"> Here's the counter: </p>
                <script>
                    var myCountdown1 = new Countdown({time:316});
                </script>
            </td>
        </tr>
    </tbody>
</table>

<p> rest of site...</p>

</body>

I do it by using the firebug console, I'm running this: (AS WRITTEN IN Can't append <script> element, tough, it STILL does NOT work well)

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "js_folder/js1.js";
$('#counter').after(script);

js1.js is simplly:

var myCountdown1 = new Countdown({time:316});

It doesn't work well. instead of getting this outcome: http://bit.ly/19Ve9oM I get this one: http://postimg.org/image/np8y4spbx/

And when i try to check the page source I get nothing.

To sum it up: Which jquery commnad do should i use to insert the 

                <script>
                    var myCountdown1 = new Countdown({time:316});
                </script>

right after the id="counter" paragraph? and that it would work as if the original html had this line already written in it

Thank you

Community
  • 1
  • 1
Roko
  • 1,233
  • 1
  • 11
  • 22

1 Answers1

0

Where a script is initialized should be of little importance, if the script is written properly. Most scripts should be loaded at the bottom of a page, to speed up the time it takes for the browser to render the DOM, since script tags are blocking unless they have the async attribute set to true.

To load a script with jQuery you use the jQuery.getScript method inside a jQuery.ready handler to make sure that the code is not executed until the DOM is ready. In your case it would look like this:

// This is a shorthand for jQuery.ready
$(function(){
    $.getScript("js_folder/js1.js");
});

The above snippet should be added to a script tag at the bottom of the document (due to the reasons I've already stated), but will work from anywhere.

However, considering the content of js_folder/js1.js you should rather put that inside the .ready handler instead. Such as this:

$(function(){
    var myCountdown1 = new Countdown({time:316});
});
mekwall
  • 28,614
  • 6
  • 75
  • 77
  • I thank you for your efforts, I understand I wasn't clear enough. I'll ask again, differently. And I did read http://stackoverflow.com/questions/610995/jquery-cant-append-script-element before posting this question, I mean.. I did do what was written there.... It does work for a simple script, like adding

    hi

    But not for adding a countdown.     – Roko Jun 21 '13 at 01:00