Please help me fetch specific text from within a web page, then repeat every 60 seconds.
April 1, 2010 1:46 PM Subscribe
Javascript gurus, please help me do something - fetch a specific piece of text within a web page.
If you go to www.wfpk.org, you'll see that we have a real-time playlist ("Now playing," top-right corner). Well, we want to include that info on the pop-up window that you get when you click "Listen Live" - but since that pop-up is something that people keep open for an extended session, we want it to auto-refresh every minute without reloading the whole page.
Answers to my previous question inform me that the refresh part can be done via setInterval, but I don't really know how to execute it ... and more importantly, I don't know how to do the logic to extract the song title from the HTML.
I do know that it's always surrounded by the same stuff. Pasting code here is a pain, but this is what the HTML looks like.
So, in human language, I could describe the needed process as "Fetch everything inside the unordered list that immediately follows the unique phrase "Now Playing" inside an H2 tag, strip it of leading and trailing spaces, and display the result." But I don't know how to do that in Javascript. Can you help?
If you go to www.wfpk.org, you'll see that we have a real-time playlist ("Now playing," top-right corner). Well, we want to include that info on the pop-up window that you get when you click "Listen Live" - but since that pop-up is something that people keep open for an extended session, we want it to auto-refresh every minute without reloading the whole page.
Answers to my previous question inform me that the refresh part can be done via setInterval, but I don't really know how to execute it ... and more importantly, I don't know how to do the logic to extract the song title from the HTML.
I do know that it's always surrounded by the same stuff. Pasting code here is a pain, but this is what the HTML looks like.
So, in human language, I could describe the needed process as "Fetch everything inside the unordered list that immediately follows the unique phrase "Now Playing" inside an H2 tag, strip it of leading and trailing spaces, and display the result." But I don't know how to do that in Javascript. Can you help?
If that's always the first li element, you could do:
(This uses jQuery which is already included on your site. See the jQuery API.)
This searches for any items of the class "sidebar", looks for descendants with the tag li which are the first child of their parent and looks for ul elements. It sets the text of this element to "asdf". (BTW, the inner ul element should not be a ul element since its child is text and not an unordered list.)
To run the code every five seconds, use:
A cleaner way of doing this would be to give the text you want to change an class or id. For example,
<span id="now_playing">Some song</span>
which could be accessed using:
posted by null terminated at 2:05 PM on April 1, 2010
$('.sidebar li:first-child ul').text('asdf');(This uses jQuery which is already included on your site. See the jQuery API.)
This searches for any items of the class "sidebar", looks for descendants with the tag li which are the first child of their parent and looks for ul elements. It sets the text of this element to "asdf". (BTW, the inner ul element should not be a ul element since its child is text and not an unordered list.)
To run the code every five seconds, use:
setInterval(function(){
$('.sidebar li:first-child ul').text('asdf');
}, 5000);
A cleaner way of doing this would be to give the text you want to change an class or id. For example,
<span id="now_playing">Some song</span>
which could be accessed using:
$('#nowplaying')posted by null terminated at 2:05 PM on April 1, 2010
If you haven't read through it yet, JQuery in Action is a great book to start thinking in the Javascript/JQuery mindset ... especially when it comes to manipulating and selecting the DOM. It at least will get you to where you can start using the JQuery docs to figure this sort of stuff out.
Personally, I think it would be better practice to do a getJson request with polling to do this sort of thing, that way if your designer decides to come along and change things your selectors won't rewriting.
posted by geoff. at 2:10 PM on April 1, 2010
Personally, I think it would be better practice to do a getJson request with polling to do this sort of thing, that way if your designer decides to come along and change things your selectors won't rewriting.
posted by geoff. at 2:10 PM on April 1, 2010
Given that the aim of the exercise is to let your users navigate away from your main page while leaving the player pop-up running, I don't see why you're trying to extract anything at all from the main page.
And if you're talking about fetching only the main page's HTML from within the pop-up, why? Why not implement a URL that your pop-up can use to fetch exactly and only the text you want to display, with no client-side HTML scraping required?
Then, any script you use in the pop-up to fetch and display that stuff could also be re-used inside the main page, giving you a main page that also auto-updates its "now playing" span without needing the whole thing refreshed.
posted by flabdablet at 5:32 PM on April 1, 2010
And if you're talking about fetching only the main page's HTML from within the pop-up, why? Why not implement a URL that your pop-up can use to fetch exactly and only the text you want to display, with no client-side HTML scraping required?
Then, any script you use in the pop-up to fetch and display that stuff could also be re-used inside the main page, giving you a main page that also auto-updates its "now playing" span without needing the whole thing refreshed.
posted by flabdablet at 5:32 PM on April 1, 2010
This thread is closed to new comments.
Following a tutorial like this is basically what you'll want to do.
From the tutorial, the url variable should be set to the page with the data, and it would return all of the HTML from the page. Then, you'd need to do various operations to get just the text you want. If you're guaranteed that it never changes, you could simply do a string replacement of the extraneous HTML tags to an empty string.
posted by jangie at 2:00 PM on April 1, 2010