I have built an application using PHP and given it a vary basic interface using HTML, but I am now looking to improve the appearance by using the jQuery UI widgets. I have loaded the tabbed widget to use as a main menu, and have linked the main sections of my app to these - so effectively I have a working main menu. When I click on a tab a page loads in the window, but the problem is if I then click on a link on this page it will take me to a different place. What is the easiest way for me to get the new page to load in that tab?
Here is a link to the widget which I am talking about: http://jqueryui.com/demos/tabs/#default
EDIT: Below that link there is a tutorial snippet of code which says
"...open links in the current tab instead of leaving the page"
"Hijax" links after tab content has been loaded:
$('#example').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
This sounds promising but I'm unsure how to use it. In my tabbed interface page (tabbedhome_v.php), I have a container with id="tabs" which has the tabbed content in. So I just changed the word example in the code about to "tabs" and it seems to work for more pages now, but not all for some reason. Would someone mind explaining to me how this works?
What I have observed with the code above: an image hyperlink leads the next page to load within the panel, but none of the javascript links or jquery that I had loaded on those pages is now working. Why is this?
