All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...
Related
I am attempting to rewrite a multi-page website into a SPA using jQuery UI Tabs. In the shell page, one tab references an id within the page, while the rest of the tabs load other pages via AJAX. It looks something like this:
<div id="tabs">
<ul id="nav">
<li>HOME</li>
<li>LEARN</li>
<li>LISTEN</li>
<li>SUPPORT</li>
<!--etc.-->
</ul>
<div id="home">
<!--blah blah blah-->
</div>
</div>
Within learn.html, I have another set of UI tabs that are set up the same way:
<div id="tabs2">
<ul id="nav2">
<li>About Us</li>
<li>Sponsors & Donors</li>
<li>Staff & Board</li>
<!--etc.-->
</ul>
<div id="about">
<!--blah blah blah-->
</div>
</div>
The problem arises in clicking a tab within learn.html: the event of clicking one of the AJAX tabs within this AJAX tab bubbles up to the window, and sponsors.html or whatever loads in place of the shell page.
I have tried event.stopPropagation() but it did not work; using event.preventDefault on the tabs prevented the tab functionality in the first place. What else is there to do?
You could try adding the result of the ajax call to a specific div. In the success function of the ajax call.
Are you calling preventDefault on the click of the tab, or the anchor? You might need to setup a separate handler for the anchor click.
$("ul#nav2 li a").click(function(e) {
e.preventDefault();
});
My problem is gone now...
The page I had loading via AJAX had its own doctype and head tag and the whole shebang. After I removed that, I no longer had any problems.
I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
I'm using the Jquery UI tabs functionality to load content via ajax. I'd like to load a particular div in the ajax call, not the entire page. Is this possible without using jQuery's load()?
As you can see from the code, it's a stock standard basic jQuery tabs implementation, but I want a particular div rather than the full page.
Here's my html:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Ajax tab</li>
</ul>
<div id="tab-1>Tab one content</div>
<div id="tab-2>Tab two content</div>
</div>
And the inline script:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Anyone know if this is possible?
Nathan.
Yes, it is possible. Use jQuery ajax "load" function. Example:
$('#result').load('ajax/test.html #container');
For your 3rd tab you should manually load content via ajax call, also you can define selector which exactly part of loaded page you need. So, create 3rd tab as via general way, load page content for 3rd tab and create tabs. Or you can dynamically load 3rd tab's content when the user clicks on tab.
More information here: http://api.jquery.com/load/, please see paragraph "Loading Page Fragments".
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>