jquery - Extracting the content of an element from an external page

Question

We are quoting on a website rebuild that involves us taking a current website, doing a new design for it and then rebuilding it within Business Catalyst (Adobe's Content Management System).

Unfortunately the current website draws information from what I'm assuming to be a MySQL table (as the site is written in PHP) and Business Catalyst doesn't support the use of server-side languages.

Is there a way that I can extract a segment of HTML from a remote page on the web and display it on the new website using non server-side script, maybe with JQuery?

Here are some suggestions I have put forward and the reasoning behind why they aren't viable for this situation:

1. iFrame - This came to mind first, but I'm not sure if it's possible to:
   a. Style the loaded HTML
   b. The content I want to capture is in the centre of the page - I don't know how to render the content of the iFrame starting from the top left of this container rather than the top left of the page itself.
   
   
2. Export the content of the current MySQL table into Excel and then import it into Business Catalyst - this got shot down because the company has inventory management software on their computers that ties in with the database, meaning that it is updated upward of 10 times a day.

Any suggestions would be great.

---

If anyone can tag this question better for me that would appreciated as I'm having some trouble.

Answer 1

You can use jQuery's load() function to load content from an external page (even a specific div on another page) into a div on the current page, like so:

$("#load_content_in_this_div").load("page.html #div_to_pull_from");

This will load content pulled from the #div_to_pull_from div on page.html into the #load_content_in_this_div div on the current page.

As for pulling content from pages on another domain, this plugin should do the trick.