Hello,
I have a series of tabs on my page that I'd like to have dynamic
content inside. Throughout the course of reading over multiple issues,
I've discovered that what I'd like to do most likely can be done; but
I may be taking the wrong approach. First, a copy of my script block:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
fx: { opacity: 'toggle' }
});
$('#link a').unbind().click(function(){
$('.link').ajaxContent({
target:'#content'
});
return false;
});
});
</script>
My goal here is to have tabs that transition neatly (done, working),
and to include a small sub-menu on the final page for the purpose of
creating a sub-menu. The tab is actually going to be an 'Admin' page,
which has a 'menu bar' (unordered list) of links to 'pages' I would
like to load into a DIV configured to appear to the right of the menu.
the tabs code appears to work correctly:
<div id="tabs">
<ul>
<li><a
href="../igoogle/source/index_b.html">Dashboard</a></li>
<li><a href="#tabs-2">Vendor
Dashboard</a></li>
<li><a
href="#tabs-3">Statistics</a></li>
<li><a href="admin.php">Admin</a></li>
<ul>
etc.
and successfully loads the 'admin.php' page content correctly. both
DIVs (menu,content) appear correctly side-by-side within the tab as
desired. The problem is, however, that when I click on any of the
links, instead of loading into the specified DIV (content), I'm
redirected to a new page entirely (in other words, the link is
functioning as a standard hyperlink; the 'click' that was supposed to
have triggered the jquery to load and display the page information
does not appear to catch). the code on the admin page (in its
entirety) is as follows:
<?php include_once("./inc/function.php"); ?>
<div id="menu"><?php getMenu('UL','ADMIN','links'); ?></div>
<div id="content">
</div>
<? ?>
Please note, the PHP function does work, it returns:
<div id="menu">
<ul id="links">
<li><a href="addcust.php">Add Customer</a></li>
<li><a href="addrept.php">Add Report</a></li>
<li><a href="addwhse.php">Add Warehouse</a></li>
<li><a href="useraccts.php">User Accounts</a></li>
<li><a href="useraccts.php?action=add">Add User</a></li>
<li><a href="useraccts.php?action=update">Modify User</a></li>
<li><a href="useraccts.php?action=delete">Delete user</a></li>
<li><a href="addvendorcust.php">Add Vendor Customer</a></li>
</ul>
</div>
<div id="content">
</div>
My question is: How can I use JQuery within the tab to 'catch' the
link and load it within the 'content' div instead?
As it's likely very obvious by now, I'm trying to stay Web 2.0 on this
one; and I didn't want to resort to iframes. Internet Explorer (6) is
a must on this one, though. Any suggestions?
On a very quick second note: Can anyone reccomend a good IDE with code
assist that is confirmed to work with JQuery?
Thanks in any event for your time and consideration.
