Append DOM to Another Page Using YQL

Apparently there is a data limit to how much we can fit into a content field on our CMS at work. The problem was that there is an incredibly long list of donors names, and when saving the edits to a page in the CMS, it just wouldn’t save past a certain point in the list.

So, I was a bit stumped on how best to workaround. So, I created another page with a good amount of the names in an unordered list. I then used YQL to create a REST query that would output only the HTML on the page that I wanted into and XML feed.

1

select * from html where url="http://www.a_web_page.com" and xpath='//*[@id="main"]/ul/li'

I’m not too sharp on my xpath selectors, but luckily it’s very easy to find an xpath using Chrome. Just right click on an element in the inspector, and the option is there. Huge timesaver!

Ok, now I had a REST query courtesy of YQL of the HTML elements that I wanted to take from that page.

Next was to load and append the data from the REST query onto the unordered list on the other page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function()
{
    $.ajax(
    {
        type: "GET",
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fintraweb.stockton.edu%2Feyos%2Fpage.cfm%3FsiteID%3D221%26pageID%3D271%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2F*%5B%40id%3D%22main%22%5D%2Ful%2Fli'&diagnostics=true",
        dataType: "text",
        cache: false,
        success: function(xml)
        {
            $(xml).find('li').each(function() { 
    			$("#main ul.append-list").append($(this));
			});
     }});
});

Using the jQuery library I was able to load view the ajax function the REST query. I had to choose the dataType of text not xml in this case. That way I was simply appending the results as they were in the REST query.

I can clean up the javascript a bit, and will work on that. However for now, I am able to add data from another page to work around the data limits of the CMS.