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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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…