[jQuery] Target DIV on tab using AJAX
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
lia href=../igoogle/source/
index_b.htmlDashboard/a/li
lia href=#tabs-2Vendor
Dashboard/a/li
lia
href=#tabs-3Statistics/a/li
lia href=admin.phpAdmin/
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
lia href=addcust.phpAdd Customer/a/li
lia href=addrept.phpAdd Report/a/li
lia href=addwhse.phpAdd Warehouse/a/li
lia href=useraccts.phpUser Accounts/a/li
lia href=useraccts.php?action=addAdd User/a/li
lia href=useraccts.php?action=updateModify User/a/li
lia href=useraccts.php?action=deleteDelete user/a/li
lia href=addvendorcust.phpAdd 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.
[jQuery] Submenu on Tab
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
lia
href=../igoogle/source/index_b.htmlDashboard/a/li
lia href=#tabs-2Vendor
Dashboard/a/li
lia
href=#tabs-3Statistics/a/li
lia href=admin.phpAdmin/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
lia href=addcust.phpAdd Customer/a/li
lia href=addrept.phpAdd Report/a/li
lia href=addwhse.phpAdd Warehouse/a/li
lia href=useraccts.phpUser Accounts/a/li
lia href=useraccts.php?action=addAdd User/a/li
lia href=useraccts.php?action=updateModify User/a/li
lia href=useraccts.php?action=deleteDelete user/a/li
lia href=addvendorcust.phpAdd 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.
