I am trying to build a site that dynamically loads the pages. Certain pages have extra javascript that they load. I need to be able to unload this javascript when the page changes. Is that possible? My code so far (work in progress still):
//When page loads...
$("ul.toggle li:first").addClass("active").show(); //Activate first tab
var taburl = $("ul.toggle li:first a").attr("href").substr(1);
$(document).ready(function(e) {
$.ajax({
type: "POST",
url: taburl+'.php',
data: '',
dataType: "html",
success: function(d){
$('#main').html(d);
}
});
});
//On Click Event
$("ul.toggle li").click(function() {
$("ul.toggle li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#main").fadeOut(500);
$("#main").html('');
var activeTab = $(this).find("a").attr("href").substr(1) + '.php'; //Find the href attribute value to identify the active tab + content
$("#main").load(activeTab).fadeIn(500); //Fade in the active ID content
});
Let me know if any other info is needed.