I’ve used this technique on several different projects, all relating to fetching Joomla article content via an Ajax call and appending tmpl=component
at the end of the URL. As I’ve lamented before, adding tmpl=component
does display only the contents of the page without the surrounding context, but it also loads the jQuery and Bootstrap frameworks.
To truly get just the content of a Joomla article, on the “success” callback of whatever AJAX method you are using, use the following code:
// Isolate just the article content | |
var jparser = new DOMParser(); | |
var jhtml = jparser.parseFromString( <your response text>, 'text/html' ); | |
var jcontent = jhtml.querySelector( 'body.contentpane' ); // or $( 'body.contentpane', jhtml ) in jQuery | |
// Convert nodeList to HTML | |
// Step 1: Create dummy div | |
var jsandbox = document.createElement( 'div' ), x; | |
// Step 2: Loop over the nodeList and append it to the div | |
for( x = 0; x < jcontent.length; ++x ){ | |
jsandbox.appendChild( jcontent[x] ); | |
} | |
// At this point, jsandbox.innerHTML contains your HTML |
As the final comment says, jsandbox.innerHTML
contains your HTML to do with whatever your project dictates.
I hope this helps someone else out there…