Question 245489 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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:UsersbillyDropboxTHIRD-DIVIDENDPRODUCTIONTODAYHOME-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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I rewrote the code using HTML (instead of the JavaScript) using https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js instead of https://ajax.googleapis.com/ajax/libs/d3js/7.8.5/d3.min.js and it appears to be working now:

    Note: For some reason, this did not work using https://ajax.googleapis.com/ajax/libs/d3js/7.8.5/d3.min.js

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
   $('#TODAYS-RACE-TITLE-OUTFILE').load("TODAYS-RACE-TITLE-OUTFILE.html");

});
</script>
</head>
<body>

<div id="TODAYS-RACE-TITLE-OUTFILE"></div>

</body>
</html>

    Onwards and upwards!


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search