Okay, what you're trying to do just won't work because you're calling changes to the current page immediately before changing the current page. What you're trying to do is a pretty common action in modern web applications, but the approach to these is completely different than the one you're taking.
Let me give you a very basic example of how a modern page might be structured with the jQuery you're using (if you do look at frameworks, Vue.js is actually pretty good and well-documented).
This doesn't do exactly what you're asking; it is just to present the ideas.
index.html:
<!DOCTYPE html>
<html>
<head>
<!--
<script type="text/javascript" src=jQuery.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="header">
<button id="loadButton">Clicky</button>
<button id="showButton">Show</button>
<button id="hideButton">Hide</button>
<p>This is the standard header!</p>
</div>
<div id="content">
<p>This will be immediately replaced</p>
</div>
<div id="footer">
<p>This is the standard footer!</p>
</div>
</body>
</html>
loaded.html
<div>
<p>This will be inserted into the #content div</p>
<p id="dataPlaceholder">This will be changed by the script on the main page!</p>
</div>
Okay, we now have a template with some placeholder data. Next up is to insert the placeholder into the div and get your data into it:
test.js
$('showButton').click(function(e){
e.preventDefault();
$('#content').show();
}
$('hideButton').click(function(e){
e.preventDefault();
$('#content').hide();
}
$(document).ready(function(){
$.get({
url: 'loaded.html',
contentType: 'text/html',
success: function(result){
$('#content').html(result);
}
});
$('loadButton').click(function(e){
e.preventdefault();
$.post({
url: '/data/url/of/some/kind',
contentType: 'application/json',
success: function(data){
$('#dataPlaceholder').text(data);
}
});
});
});
Submit an article or tip