I am looking to dynamically load content from a div with the ID maininner on a specific URL within my website into another div with the ID yurt1_avail on a different URL also on the same site.
I have conducted a successful test outside of the CMS using JQuery as shown below:
<div id="yurt1_avail"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#yurt1_avail').load('yurt1.html #maininner');
});
</script>
I am wondering if this can be achieved while working with CMS/MySQL and .htaccess rewrites for SEF URLs. Is this functionality restricted to static HTML pages only?
If utilizing JQuery for loading content is not viable, what other options are available to me? My goal is to display the content of an availability table from one page onto a summary page that showcases multiple availability tables. The Joomla availability component I am using does not offer any module embedding capabilities or short-code options.
Perhaps iFrames could be utilized, but then there is the concern of effectively hiding all other page elements with CSS. I specifically require only the content within #maininner.
Are there any features within HTML5/CSS3 markup that could assist in addressing this issue?