I am facing an issue while trying to load a web page within a div using an ajax call. Unfortunately, it's not working as expected and displaying the following error message:
jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience
Can anyone provide guidance on resolving this problem?
<div class="warper">
<div class="menu">
<a href="#" data-target="home">Home</a>
<a href="#" data-target="pageOne">Page One</a>
<a href="#" data-target="pageTwo"> Page Two</a>
<a href="#" data-target="pageThree">Page Three</a>
</div>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#content").load('home.html');
// Set trigger and container variables
var trigger = $('.menu a'),
container = $('#content');
// Fire on click
trigger.on('click', function () {
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target + '.html');
// Stop normal link behavior
return false;
});
});
</script>