I'm using the jQuery tabs library to create a set of remote (i.e., ajax loaded) tabs.
However, to avoid the initial page load being empty until the ajax request finishes, I'd like to include the content for the initial tab with the initial page download.
I've got this generally working by providing a div in the initial page load that matches the title of the tab, but even though this content appears immediately, as soon as I initialize the tabs it does the ajax request IN ADDITION which is both wasteful and causes a flicker. My basic question is how can I get jQuery tabs to NOT do an ajax request for the initially selected tab, and get this content as part of the initial page load, while still loading the other tabs dynamically.
The complication is that I can't hard code the ids/hrefs for which tab is the "initial" one since the initial tab will change based on available content.
I'm sure there is some kind of hacky way to do this with javascript rewriting the URLs of tabs dynamically before I initialize the tabs but I'm looking for a cleaner solution.
Any ideas?
Are you using a specific tab control to do this? It's pretty dependent on how your tabs are implemented...
If you want the data to be included without a delayed load, you will have to include it server side.
Give me some more details and I'll see what I can do!
The best way to do it is using server side implementation to add the starting text. In the JQuery documentation the default text it is not loaded through AJAX.
I'm not sure exactly what you are doing but if that is not your case, then a simple boolean "hack" could be used like this:
var initial=true;
Then, in your tabs code:
$('.selector').tabs({
select: function(event, ui) { if(initial) { initial=false; return false; }
});
This will prevent to execute the ajax call the very first time.
There's an option called "spinner" which holds the text, gif-animation or whatever to be displayed.
$( ".selector" ).tabs( { spinner: 'Retrieving data...' } );
Related
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
I have a jQuery mobile button hooked up to an ajax POST. If the POST fails, the jQuery mobile button stays pressed instead of ``popping up". Any ideas?
It can be done easily.
Here a jsFiddle example made for one of my previous answers: http://jsfiddle.net/3PhKZ/7/
If you take a look there's this line of code:
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
It will try to find pressed button on a current active page, if it succeed it will remove 2 classes responsible for a button pressed state. Unfortunately pure CSS solution is impossible here. You can test this example, just comment top line and see what will happen.
One last thing selector $.mobile.activePage can only be used during the pagebeforeshow, pageshow, pagebeforechange, pagechange, pagebeforehide and pagehide page event so takes this into account.
In case you cant use this selector just replace it with a page id, like this:
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
So your final code would look like this:
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() {
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
})
Add an error clause to your AJAX handling which pops the button back.
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { /*code to unpress button here*/ })
For those folks out there using "input" and not "anchors" as buttons. When using for instance "submit" and "reset" buttons and pressing them they remain as active, which is sometimes undesired depending on the actions performed when the buttons is clicked.
I am not sure if it is the expected behaviour, I have read that is a jQuery mobile bug, but the behavior is still present at least in jQM 1.3.2
An yes the trick is to remove the active class as stated however those get tricky because the class is not added to the input tag, i*t is added to a parent DIV* that is created by all of the ugly stuff around the "input" to style the button, that is why removing the active class when selecting the input doesn´t work.
By analyzing the HTML produced by jquery mobile a workaround is to:
remove the active class on the input parent instead of the actual input element.
$('.mybutton_class_or_ID').parent().removeClass('ui-btn-active');
I prefer this approach instead of clearing all the active classes across the whole page in case you want to be more selective with the class removal.
My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab
If I have 4 tabs where the first 2 are loaded with ajax and the last 2 are static, how do I pre-load the 2 ajax tabs by default?
For the moment, only the first tab is automatically loaded, the second one is loaded when clicked. I want them both to be loaded so that when I click the second one, the content is already loaded. I tried to call the load event on the second tab like this:
$(document).ready(function () {
$("#main-tabs").tabs({
cache: true
});
$("#main-tabs").tabs("load", 1);
});
And this loads the second tab, but for some strange reason, the first one doesn't load at all; not even when I click a different tab and click back on the first one, it will not load.
Then I tried something like this:
$(document).ready(function () {
$("#main-tabs").tabs({
cache: true
});
$("#main-tabs").tabs("load", 0);
$("#main-tabs").tabs("load", 1);
});
Same result, second tab is loaded, first one is not.
How can all of them (ajax ones) be loaded automatically?
Source of the problem
Two facts:
When jQuery loads a tab with its load method, if another AJAX load request is in progress, this will be aborted (probably because if you select one tab and it loads by AJAX and then quickly select another to be loaded, jQuery assumes you don't want to load both - just the last one).
When you set the first tab to be loaded by AJAX, .tabs("load",0) will be called by default to populate the first tab.
Combining these two facts, you see what's going on. load is being called first to populate the first tab, and then called again to populate the second one. The second load cancels out the first.
Possible solution
Since you can't issue multiple loads on the same tab menu at the same time, we'll have to find another way. This solution uses the load option of tabs to load each tab in sequence. In other words, when one load is finished, it starts loading the next one. When that one is finished, it loads the next one and so on.
//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];
var loadNextTab = function() {
if (indexesToLoad.length == 0) return;
var index = indexesToLoad.shift();
$("#main-tabs").tabs("load",index);
};
$("#main-tabs").tabs({
cache: true,
load: loadNextTab
});
Possible improvements to this method:
instead of specifying indexes to load, make it figure out itself what tabs are AJAX tabs and load them
make it so loadNextTab can be used on multiple tabbed menus at the same time
make it integratable (if that's a word) with other load callback functions
How did I find out what was wrong?
By using firebug. It's an addon for firefox. Firebug shows all AJAX requests in its console, and as the screenshot shows, it wasn't that hard to figure out what was going on :) I really recommend it. (There are similar tools for most major browsers - press ctrl+shift+j in chrome or F12 i IE.)
I am using jQuery UI tabs to have a tab where I can search for records and then other tabs where I can view individual record details. I am trying to have search results link clicks open the relevant tab and load the specific ajax content for that search result.
I am able to switch tabs using an href with something like the jQuery UI tabs example code:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
I see ajax content is normally loaded via setting the href on the tab itself:
<li><a id="customerTabLink" href="#tabs-2"><span>Customer</span></a></li>
I've tried adding this to the my-text-link onclick function to dynamically set the href for the tab but that doesn't load the content in my tab.
$('#customerTabLink').attr("href", "/view/dspClient.cfm?id_customers=15");
Is there another way I can be loading ajax content in the tab without setting this href? Or am I setting the href incorrectly? Is this something I should be using the load even for? http://docs.jquery.com/Events/load
Thanks!
-Matt
To change the URL that tab is using for AJAX calls you should use this:
$('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15');
First argument tells that you want to change tab URL. Second argument is the index of the page you want to change the url (zero-based so 1 is the second tab), and third argument is the new URL.