Adding countdown, using jquery. messes up the page. What am I doing wrong?

Question

First of all, I have read Can't append <script> element, After reading it, and utilizing what it said, I have reached a DIFFERENT problem: Yes, it showed me how to insert a script tag BUT when it does it "erase" the rest of the page:

I want to add the counter timer script, using jQuery. right after the id="counter" pargraph and by that insert a "counter" at that very spot: 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>

And where the script was added a new countdown will be shown. 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: How to use jquery for inserting the coundown right after the id="counter" paragraph? and that it would work as if the original html have had this line already written in it.

Also, I don't have access to the page's html source. If I had I would add it myself and it would work well, just as shown in the first pic link. Therefore I'm forced to use Jquery.

You can try yourself here (use the 2nd link for trying):
This is what i want: http://jsfiddle.net/JxLwM/
But doing it with jquery: http://jsfiddle.net/F5rwK/5/
Note, in 2nd link, try putting

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

in ss1, and see what happens. Thank you.

Maybe I'm overlooking something, but if you have access to javascript, and all you want to do is write in a script tag that has that one line in it - I have to ask why you don't just write in the contents of that js file to begin with instead of this workaround? By that I mean replace var script... with var myCountdown1... since it is all js anyhow? — Kai Qing, Jun 21 '13 at 01:39
It's not the problem, Even if I use this line: $('#counter').after(''); I'll get the same (bad) result. And the truth is my js file is much longer than that. I just shorten it into one line, for asking this question. It still get the same (bad) result. ty. — Roko, Jun 21 '13 at 01:49
That's not what I mean. What I'm saying is why try to write a script tag to the dom when you can just call the file itself from js. Maybe something like .getScript http://api.jquery.com/jQuery.getScript/ so you can just read the contents of the js file directly — Kai Qing, Jun 26 '13 at 18:14

Blair McMillan · Accepted Answer · 2013-07-03T01:25:15.117

2

Rather than trying to insert the script tag, use the code from the Countdown timer to insert it into the correct place. See http://jsfiddle.net/F5rwK/7/ for the working example.

The key parts are to add a container to your HTML (in the example, it's the div with an ID of target_location.

So HTML becomes (after running JS code to insert div)

<body>

<p> beginning of site</p>

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

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

</body>

And then the JS (that add the new div and then runs the countdown)

$('#counter').after('<div id="target_location"></div>');
var myCountdown1 = new Countdown({time:316, target:'target_location'});

edited Jul 03 '13 at 01:25

answered Jul 03 '13 at 01:00

Blair McMillan

5,299
2
25
45

To Blair McMillan: Thank you, that worked. Didn't understand completely why but ty. – Roko Jul 03 '13 at 01:14
Ye- i forgot about the no access to the html source, But maybe if i use jquery to first add this div id=target_location And then use that script, maybe that will work. i will try – Roko Jul 03 '13 at 01:22
Yes, that will work. Sorry, I forgot that too. I'll update my answer. – Blair McMillan Jul 03 '13 at 01:24
As to why it works, I figured that the Countdown source would have the ability to be told where to go, rather than having to be a ` – Blair McMillan Jul 03 '13 at 01:27

score 0 · Answer 2 · answered Jul 03 '13 at 01:17

Also, I don't have access to the page's html source.

Well that's a bummer. If you can't do what @Blair McMillan was suggesting, you could also go for a far less pretty/straightforward/versatile/useful approach that I thought of:

var html = $("body").html();
var str = html.split(/<p id="counter" style="color: red;"> Here's the counter:/g);
new Countdown({time:99999999});
$("body").prepend(str[0] + '<p id="counter" style="color: red;"> Here\'s the counter:');
$("body").append(str[1]);

Fiddle: http://jsfiddle.net/charlescarver/F5rwK/8/

What am I doing?

Capture the HTML of the page
Split it where you want the counter to appear. This is the really ugly part, as I'm matching the exact HTML of the container element as well as text. Basically, the element that appears right before it.
I then load the counter, which clears the HTML of the page
You prepend the first half of the HTML, as well as the string we matched in step 2
You append the second half, successfully encompassing the countdown with your original HTML

Drawbacks? Many. This is not versatile at all. You have to match the exact text of the location before where you want the countdown to appear, which only allows it to work under very specific circumstances. Also, I just remembered that jQuery autocompletes tags, so this will only wrap the counter in complete tags.

Hopefully this shows you that there are always alternate ways to do things, and you can improve upon this as well!

to Charlie: the link http://jsfiddle.net/charlescarver/F5rwK/8/ does not work. It happens to me a lot of times, it happens if you use the note, at the end of page, and then try to save the http://jsfiddle.net thingy. Thanks for your explanation though. It helped me understand some things — Roko, Jul 03 '13 at 01:32
I did press run, and the counter shows only zeroes, Did your counter show correct numbers? http://bit.ly/12cD6Dh — Roko, Jul 03 '13 at 01:41
Weird. Too bad, If I could use what you did, it would be awesome. — Roko, Jul 03 '13 at 02:42

Adding countdown, using jquery. messes up the page. What am I doing wrong?

2 Answers2