javascripthtmlwordpresselementorweebly

Load External HTML Using JavaScript Script (via Embedded Code in Wordpress)

Here's what I'm trying to do:

I need to create web pages in Wordpress where I can add embedded code (JavaScript) in numerous places on a web page in order to read in external HTML files into each embedded code section.

The reason that I need this is because I create numerous HTML files, with updated data, on a daily basis.

I currently use the following embedded JavaScript code on each webpage on a Weebly website where all the web pages read in and are updated with the new data in the uploaded HTML file (INCL files, in this example):

JavaScript to read HTML files (INCL files) into embedded code section (example)

<script type="text/javascript">
      $(document).ready(function () {
          $('#TODAYS-RACE-TIMES-HOME-PAGE').show().load('files/theme/TODAYS-RACE-TIMES-HOME-PAGE.incl');
      });
    </script>
<div id='TODAYS-RACE-TIMES-HOME-PAGE'></div>

HTML file (INCL file example) (as mentioned above)

<!-- TODAYS-RACE-TIMES-HOME-PAGE.incl created by C:\Users\billy\Dropbox\THIRD-DIVIDEND\PRODUCTION\TODAY\HOME-SCREEN-RACE-LIST.pl -->
<!DOCTYPE html>
<html>
<p><font face="Lato"><font size="2"><font color="#07342a"><b>7 RACES AT GOULBURN (NSW) - RACE 1 STARTS AT 1:15 PM AEST</b></p>
<p><font face="Lato"><font size="2"><font color="#07342a"><b>8 RACES AT PAKENHAM SYNTHETIC (VIC) - RACE 1 STARTS AT 1:00 PM AEST</b></p>
</html>

Once published, the Weebly web pages are automatically populated with the newly uploaded data in the HTML files.

I need to create the same setup on a Wordpress website using Elementor.

Thank you in advance. Your help is greatly appreciated.

Solution

  • You just need to drop elementor HTML widget on the page. Then paste this code in the Elementor HTML widget:

    <script type="text/javascript">
  jQuery(document).ready(function($) {
      $('#TODAYS-RACE-TIMES-HOME-PAGE').load('files/theme/TODAYS-RACE-TIMES-HOME-PAGE.incl');
  });
</script>

    Now you can duplicate this widget and change the id "TODAYS-RACE-TIMES-HOME-PAGE" It is tested and working perfectly.