Other jQuery Uses
We traditionally think that jQuery’s selector engine can only select elements/information off of the document that we are working on. And AJAX’s only use is to process web forms without the page needing to reload. While both of these are common uses, they are not the only uses. In this tutorial I’m going to show you a not-so-mainstream use of jQuery, but a very useful one all the same.
Take this standard web page. It pulls the latest news items from a database and displays them like so. That is the basic DOM of the page.
<head> <title>Latest News</title> </head> <body> # More Header, sidebar code here # <p class="latest">Employees at the Karate Bank are getting the chop</p> <p class="latest">NASA shares have sky-rocketed</p> <p class="latest">Investors at the Sushi Bank feel they are getting a raw deal</p> # More content, footer code here # </body> </html> </pre>
If we wanted to highlight all of the news items on this page we can use jQuery’s each method to iterate through them and modify their CSS.
$("p.latest").each(function(){
$(this).css({"background-color" : "yellow"});
});
But what if we wanted to pull that information from another page? Due to some restrictions in the software the website is using, mayby they can’t display the latest posts on every page that they want to. To get this information we would need to do 2 things. The first is to pull the latest news page itselfand the second is to parse that page and only show the latest news (not the header, sidebar etc.)
Ajax
First of all we want to pull the page using AJAX and save it in a variable. To do this we use jQuery’s $.get method. We specify the page and since we are not sending any data (like information from a form) we don’t need to specify anything else. We then save the contents of latestnews.html into the variable content. This is important.
$.get('http://urlto.com/latestnews.html' ,function(content) {
});
Narrowing Our Search
At this stage we cannot simply document.write(content) as it contains all of the header, footer, sidebar and text in there. We need to select the latest news paragraphs that we want. For this we use jQuery’s standard selector. We don’t need to use a special plugin or write our own function. The only thing we need to change is to pass an extra parameter into the selector. This parameter tells jQuery’s selector engine where it look for the pattern/rule. If it isn’t specified (it usually isn’t in standard codes) then jQuery assumes you mean the current page’s source (DOM) however by specifying this we can narrow our search. In the code below we pass the content variable (which contains the entire source of latestnews.html) into the selector. jQuery will then look for all paragraphs with a class of latest inside the content variable.
$.get('http://urlto.com/latestnews.html' ,function(content) {
$("p.latest", content).each(function(){
});
});
Displaying the data
Since we have matched the URLs, we can display the content as we please.
If we wanted to highlight the latest news paragraphs on that page then we would:
$.get('http://urlto.com/latestnews.html' ,function(content) {
$("p.latest", content).each(function(){
$(this).appendTo("#latest");
});
});
More
Using the information you’ve learnt, you can apply this to other situations. For example you can parse RSS feeds and reflect live updates of the RSS feed on the website straight away. These techniques are especially useful in remotely hosted software systems where you have no control over the source code. Or if PHP coding isn’t your strong point, but you know a little bit of jQuery, you can easily modify some of your website content this way.
Subscribe to feeds
