I want to create a webpage like this one..
https://www.placementpreparation.io/quantitative-aptitude/average/questions-and-answers/
I am creating website in WordPress using divi builder. I have tried following ajax code to display only a section of a webpage from different web page on button click..
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green;">
just trial
</h2>
<h3>
fetch only sections of specific HTML areas
from an external page using AJAX
</h3>
<button onclick="event_occur()">
Click Here
</button><br><br>
<h3>External.html page</h3>
<div id="display"
style="border: 1px solid black;
width:max-content;
padding:0.5rem">
fetched Content will display here.
</div>
<script>
event_occur = () => {
// Load the Section with .first class and display
$("#display").load("index.html .first");
};
</script>
</body>
</html>
And the index.html page is as below…
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage from wherer content is loaded</title>
</head>
<body>
<section class="first">
<h3>
Index.html - Section - class = "first"
</h3>
<h2 style="color: green;">
content from here will be loaded
</h2>
<h3>Web Development</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>JQUERY</li>
</ul>
</section>
<section class="second">
<h2 style="color: green;">
this will not load
</h2>
<h3>Machine Learning</h3>
<ul>
<li>Python</li>
</ul>
</section>
<section class="third">
<h2 style="color: green;">
this will not load
</h2>
<h3>Courses</h3>
<ul>
<li>Interview Preparation</li>
<li>DSA</li>
<li>DBMS</li>
</ul>
</section>
</body>
</html>
When I click on button click here then the code is neither loading the full page index.html nor loading the desired section of page index .html in WordPress building using divi page builder using divi theme
What should I do so that the code works..thanx
I tried the above logic and expection that the section of a web page will be loaded on ajax call.
You need to sign in to view this answers
Leave feedback about this