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…