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.
2 answers
solution1
2 ACCPTED 2013-07-03 01:00:53
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'});
solution2
0 2013-07-03 01:17:45
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.