CODEWITHSUNDEEP
javascripthtmlwordpresselementorweebly
Billy J
Billy J

Reputation: 121

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.

Upvotes: 2

Views: 899

Answers (2)

Ahmer WPCODER110
Ahmer WPCODER110

Reputation: 451

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.

Upvotes: 1

Billy J
Billy J

Reputation: 121

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!

Upvotes: 2

Related Questions