You have a couple of options here:
Options 1: Return correct markup
When a user successfully logs in, you can use your Server Side technology to return the correct markup and then simply replace the header div with the new div which is returned.
<script>
$(document).ready(function(){
$("#signin").submit(function(e){
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url : formURL,
type: "POST",
data : postData,
success:function(data) {
$("#header").replaceWith(data); // You can use .replaceWith or .html depending on the markup you return
},
error: function(errorThrown) {
$("#overlaypage").html(errorThrown);
}
});
e.preventDefault(); //STOP default action
e.unbind();
});
});
Option 2: Building the markup/templating
You can simply build the markup in your Javascript using the data returned from your successful login. This would involve you returning the necessary data in JSON when a User logs in successfully, then using that to build an HTML string. Alternatively, you can use a templating system like Handlebars to build the HTML string.
Options 3: Use AJAX to load page fragments
Note: This will only work if you already have a non-AJAX implementation of the logged in header
Now that you are logged in, assuming all the correct cookies/session data is set so that next time you reload the page, the correct header will be in place, you can use AJAX to request the new Header Div:
$( "#header_div" ).load( "homepage.php #header_div" );
This would, as the code suggests, make an AJAX request to homepage.php, extract the contents of #header_div and replace the "#header_div" on your page with it.
Hopefully some of these helped!
