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: {...
});
Related
I have some AJAX loading in my app, and I thought it would be nice to have a loading icon, since there's a little delay. I grabbed some code from http://tobiasahlin.com/spinkit. The loading and hiding works fine, except that I have a logo in the header, which is a link to the root:
<%= link_to "#{app_name}", root_url, id: "logo" %>
Clicking the link takes you to the root, but the loading icon is visible. But if you reload the page, the icon is hidden, as desired. So there's something different about clicking the link.
The view:
<div class="spinner">
The CSS does not set the hidden attribute. If I set it, the spinner is always hidden.
The jQuery:
$( document ).ready(function() {
// hide spinner
$(".spinner").hide();
// show spinner on AJAX start
$(document).ajaxStart(function(){
$(".spinner").show();
});
// hide spinner on AJAX stop
$(document).ajaxStop(function(){
$(".spinner").hide();
});
});
I tried adding an onclick even to the logo. That fires first, then the page loads with the spinner visible. Any ideas what's wrong?
Terry, this is an accompaniment to the comment which helped you.
There are several things to fix:
You should keep your CSS hidden, using JQuery to make it visible.
You're currently hiding your spinner on DOM load with JQuery.
Although this will work, it adds unnecessary overhead to your application. Instead, you'll be much better to show the spinner when Ajax runs:
#app/assets/stylesheets/application.css
.spinner {
display: none; /* Use this instead of inline styles */
}
You should bind your spinner to on-page elements
You're currently binding the spinner to ajaxStart & ajaxStop. These are global functions, fired EVERY time Ajax runs.
This may work in a simple application, is bad practice in a more complicated system.
I would do the following:
#app/assets/javascripts/application.js
spinner = function(){
$(".spinner").toggle();
}
$(document).on("ajax:beforeSend", function(){
spinner();
}).on("ajax:complete", function(){
spinner();
});
$(document).on("click", ".element", function(){
spinner();
$.ajax({
...
});
This uses the ajax:beforeSend event handler from Rails UJS (every time you call remote: true, this will fire).
It also allows you to use the spinner function for any other event/element in your app.
After user hits last tab of a form in jQuery UI's accordion how do you get the next div to open and current one to close with the focus on the next input in-line?
Also I am looking for the reverse. If use types shift tab to go in the opposite direction then I am searching for a way to implement the reverse behavior as well. I.e. close the existing accordion div and open up the next accordion div in line and go to the last input in the div and set focus to it.
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section:
$('#firstform input:text').last().on('keydown', function(e) {
if (e.which == 9) {
if (!e.shiftKey) {
var active = $( "#accordion" ).accordion( "option", "active" );
$("#accordion").accordion( "option", "active", active + 1 );
}
}
});
You also need to activate the first input box of the next form, using the activate event of the accordion:
$( "#accordion" ).accordion({
activate: function( event, ui ) {
$("#secondform input:text").first().focus();
}
});
The procedure is similar for the reverse case, as you can see in the fiddle.
I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
I'm using jQuery tabs. In one of the tabs is a wysiwyg editor that needs to be refreshed after the tab is displayed, but I can't figure out if there is an event that fires after the tab is loaded.
From my understanding, the load event is only for tabs that use ajax calls. I've tried using it but it doesn't fire:
jQuery ui tabs load/tabsload event does not fire
In that example they use an iframe, which has a load event that is triggered. I'm just using divs, which don't have a load event, and nothing like an onshow event listener.
The closest I've been able to get is the tabsselect event which fires when a tab is clicked, but before the new tab is loaded.
Is there any event that fires after the tab is loaded when I'm not using ajax?
Thanks
Did you try event-show?
http://jqueryui.com/demos/tabs/#event-show
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
The show event did not work for me, but the create event did:
$( ".selector" ).tabs({
create: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-create
Now the event is called activate
$( ".selector" ).tabs({
activate: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-activate
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