I've implemented jquery tabs and want to call the page they are on in two ways. Firstly with the first tab open and the others hidden which works fine. But secondly I want tab 4 to be visible when landing on the page. So I have simply duplicated the page - Page A opens with the first tab in view. Page B has this code....
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs( 'select' , 3 )
});
</script>
and opens the forth tab. BUT it opens the first tab first then flashes to tab 4.
How can I get the page to open tab 4 initially without opening the first tab first.
Hope you can follow my ramble!!!
Nick
There does not appear to be an obvious solution. One suggestion I have seen is to use jQuery to keep the tabs hidden until they have loaded and then show them after the selection has taken place.
That would be how to open to the 4th tab using their API.
Perhaps you can try hiding the tab div, creating it, and then showing it in the show event when the 4th tab is shown (which will happen after everything is initialized).
Related
Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.
I'm using jQueryUI to display some tabs on a page. The tab that is displayed is not always the same, so sometimes I set a different tab as active.
<script>
$(function() {
$("#tabs").tabs({'active': 1});
});
</script>
I generate this code on the back-end, so it's there when the browser loads the page, but, no matter what, the first tab is displayed for a fraction of a second and only then the active tab is displayed.
How can I make the activate tab be displayed from the start?
Just change your code to:
<script>
$(function() {
$("#tabs").tabs({selected: index});
});
</script>
where index is tab number starting from 0
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
Hello I am using jquery-ui tabs on a page that is being embedded into different platforms. The tabs work fine but the problem is if you click a link in the tabbed page it exits the tabs to goto the page. Is there an option in the tabs call to make them more self contained or should I look into setting the target of the anchors on those pages, etc?
$(function() {
$( "#crmtabs" ).tabs({
cookie: {
expires: 1
},
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible.");
}
}
});
});
I'm not sure I understand your issue. Your code will try to load tab content via AJAX so clicking a tab will load the page specified by the anchor in your cmrtabs markup. Remember that UItabs is basically rendering the output of the AJAX loaded page and inserting it into the appropriate container in the crmtabs markup. Any links in the loaded page are now relative to the tabs page (i.e. jQuery code in the AJAX loaded page will not work but jQuery code in the tabs page can operate on the AJAX content). Links in the loaded tab are not "contained" but are rather now a part of the tabs page. If you are thinking of some kind of iFrame behavior within the tab, you are moving beyond the intent of the tabs widget. See this article referenced on the jQuery UI site. http://www.useit.com/alertbox/tabs.html
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.