Question

I’m loading content from one page into another via the jquery .load event. Im currently doing it like this:

$('#someDiv').load('/directory/file.html #someDiv');

However, It would be better if I didnt have to specify the name of the div every time. Since they are the same on both pages, is there a way to say, “find a div on page1 and load its content into the matching div on page2? The idea is to not have to update the script every time there is new content added.

Thanks in advance.

Answer 1

After about a week of working at it… I figured it out. The script is below:

// Run this function on divs with the class of include
$("div.include").each(function(){
    // load shared content file
    var pathname = "shared-content.html"; 

    //get the id value of each div on current page with class of include
    var contentID = ("#" + $(this).attr("id"));

    //find div with same id value in shared content file, then load its content
    $(contentID).load(pathname + " " + contentID);  
});

Steps to use:

1. Load this script on document.ready or in script tags after content on your page.
2. In shared content file, add some html and place it in a div with a unique ID.
3. Load shared content on any page (where the script is loaded) by adding the same unique ID you used in the shared content file.