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
Related
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...
I currently user jquery ui to create a dialog window that is hidden on page load. The user opens the dialog by clicking a button. Once open, the dialog has several tabs (created with jquery ui tabs), each one displaying a form that a user might need access to. The actual forms are loaded using ajaxOptions.
Is there a way to stop jquery from preloading my first ui tab on page load? Instead, I want the content of the first tab loaded only when the user clicks the button to open the dialog.
$( "#pref_tabs" ).tabs({
ajaxOptions: {
success: function(xhr, status, index, anchor) {
//function to handle successful loading
},
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this form. We'll try to fix this as soon as possible. ");
},
}
});
Add an additional option to your tabs options to make no tabs selected by default.
$(sel).tabs({
selected: -1,
ajaxOptions: {...
});
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).
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.
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...' } );