JQuery UI Tabs callbacks not working

I have been trying to get this working for the last 7 hours so please excuse the slight tone of frustration.

I have successfully implemented a nice set of jquery ui tabs that load their content via ajax.

The content loaded via ajax features a form. I wanted the first field in the form (which has an ID of #title) to be focused automatically when the tab is loaded. This didnt work when I tried putting the script in the external document so I thought a callback would be a good idea.

setTimeout( function() { $("#title").focus(); }, 500 );

I got this idea from here. The delay is because i was experiencing problems with the field not focusing properly when clicking through each tab. At first I thought this had solved some of the problem, however after even more testing I found that this focus field works only on the tab that was initially loaded.

I decided to clear my head and implement a nice jquery autocomplete text field.

This script seemed to work when loaded straight into the external content, but to my dismay further testing showed this not to be the case. The autocomplete field works only on the tab that is loaded when the page is loaded.

This is when I noticed the pattern that both my scripts are only working on the initial loaded tab.

I have tried using the select, load and show events but all fail to work.

I know the callback is working because the alert is appearing when each tab is clicked.

Obviously I am doing something very wrong.

Please pick my code to pieces and tell me what I am doing wrong.

<script type="text/javascript"> $(function() { $("#tabs").tabs({ load: function(event, ui) { setTimeout( function() { $("#title").focus(); }, 500 ); $("#role").autocomplete( "/profile/autocomplete", { delay:10, minChars:1, matchSubset:1, matchContains:1, cacheLength:10, onItemSelect:selectItem, onFindValue:findValue, formatItem:formatItem, autoFill:true } ); alert('callback'); } }); }); </script>

-------------Problems Reply------------

I believe the problem is you don't have unique IDs. If your HTML is similar to this:

<div class="tabs">
<ul>
<li><a href="tab1.htm">Tab1</a></li>
<li><a href="tab2.htm">Tab2</a></li>
</ul>
</div>

The Tab plugin will load both of the pages (tab1.htm and tab2.htm) into the current page. And since the first tab has both #title and #role jQuery stops searching for a duplicate (rightly so). So, the easy solution would be to make them classes, then have the show function target the selected tab and call the focus and autocomplete plugin.

$(function(){
$(".tabs").tabs({
show: function(e, ui) {
$(ui.panel) // target the current tab contents
.find('.title').focus().end()
.find('.role').autocomplete(
"/profile/autocomplete",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);
}
});
});

And to answer a question you had in a comment, a callback is basically what you want to happen after whatever you were doing is complete. For example, the function below will hide the element with the class hideme then once the fadeOut effect is complete, the callback function removes the element from the page (and DOM)

$('.hideme').fadeOut('slow', function(){
$(this).remove();
})

Also, in case you aren't familiar with .end() it allows you to chain objects. More specifically it reverts the selector back to the most recent object which in this case is ui.panel. Read more about it here and also be sure to check out .andSelf() here.

Your problem is not entirely clear from the question. I would say the $(document).ready part is definitely not needed but probably wouldn't cause any problems since I think it will run immediately.

What I'm not sure about is how you are creating your tabs and particularly what you mean by "only on the first tab load, loading another tab doesn't focus the field." What exactly do you mean by load? Are the tabs being loaded via an Ajax call or do you just mean as the page renders? Do you want a specific element to be focused PER tag, or just every time a tag is loaded? (Your code says one specific field but your text is unclear).

Ok, based on your clarifications, I realize now the problem is that you have multiple instances of 'title' and 'role' but you are using IDs to name and reference them. In the html, you have something like this

<div id="tabs">
<div class="tab">
<input id="title">
<input id="role">
</div>
<div class="tab">
<input id="title">
<input id="role">
</div>
...
etc
</div>

The problem is, the 'id' field has to be unique across all your elements, otherwise you can only refer to one of them (not just unique per tab). So when you say $('#title'), you are only able to refer to the first element with an id of 'title'. Many people solve this problem by adding numbers and giving ids to the tabs of 'tab1', 'tab2', etc and the 'title1', 'title2', etc. This is actually a bad idea with jquery. You should instead use classes and the very useful jquery .find() method like this:

<script type="text/javascript">
$(function() {
$("#tabs").tabs({
load: function(event, ui) {
var tab_content = $(ui.panel);
setTimeout( function() { tab_content.find(".title").focus(); }, 500 );
tab_content.find(".role").autocomplete(
"/profile/autocomplete",
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);
alert('callback');
}
});
});
</script>

Still not sure if the timout on the focus is necessary. You should remove that if it was just an attempt to 'make something work'.

Not 100% sure, but it may be because you wrap your handling code in $(document).ready(function() { ... });.

Category:jquery Views:0 Time:2009-12-26

Related post

  • Jquery UI Tabs changing Body Class 2011-06-16

    I've tried the below script to no avail. I have a series of tabs at www.1tryten.com. The tabs auto rotate and change on mouseover. I'm trying to have it so that the currently active tab sets the class for the body tag. Essentially, if tab-1 is active

  • How to make "jQuery UI tab" blink/ flash 2012-03-10

    I want to make "jQuery UI TAB" blink (like notification). I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open. H

  • JQuery UI Tabs: how to change selected tab from callback, supplied to 'select' event? 2011-08-21

    I use JQuery UI tabs, and I've attached a callback function to the select event, and I want to change selected tab from within this function: $('#tabs').tabs({ select: funciton () { // here I have to change the tab, that have been just selected, to a

  • How to execute a callback function after ajax content has been loaded into a newly added jquery ui tab 2012-02-17

    Jquery UI tabs has an add event which is triggered immediately after a tab is added. In this example, when you click a button a new tab is added and it is selected. I'm adding dynamic content using ajax in the following way: var $tabs = $("#tabs").ta

  • jQuery UI Tabs - calling function within tab resets to the first tav 2009-08-07

    I'm using jQuery UI tabs for simple tab navigation on a page, and this works great; however, I want to call a function like function DoStuff(){ $("#divID").hide(); } from within a tab. When I click on the <a href...> which calls the DoStuff() f

  • Problems with Google Maps API v3 + jQuery UI Tabs 2009-09-15

    There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) but the solutions there only se

  • JWYSIWYG or jHtmlArea within a Jquery Ui Tab 2009-11-10

    I am not able to get my jwysiwyg and Jhtmlarea text editors to work within an AJAX loaded Jquery UI Tab Both text editors work when loaded normally. This loads the tabs on the "View Page" <script type="text/javascript"> $(function() { $("#tabs"

  • jQuery UI Tabs force delay before changing tab on mouseover 2010-03-22

    Using the jQuery UI Tabs 1.7.2 with jQuery 1.4.2, is there a way to make it so that when you mouseover a tab, there is a delay before the tab switches? I've been looking into using the hoverIntent plugin to do this, but cannot figure out how it would

  • jQuery UI Tabs And Dialog - How to confirm switching tabs with confirm based on the Dialog plugin? 2010-04-13

    So, the goal is to confirm switching to another UI tab using UI Dialog plugin. Using common confirm method is simple: jQuery("#tabsContainer").tabs({ select: function(event, ui) { return confirm("Some confirmation message..."); } }); but how to to ac

  • Optimizing jQuery for Tabs 2010-06-10

    I am in the process of developing a widget. The widget has three tabs that are implemented in the following way. <div id="widget"> <ul id="tabs"> <li><a href="http...">One</a></li> <li><a href="http..."

  • How to test jquery ajax tabs with selenium? 2010-06-24

    I'm testing a django app with selenium, and one of my pages uses the jquery ui tabs element. One of the tabs contains a simple table listing some users, and is loaded via ajax. When using the app, the tab works just fine, but when automating the test

  • My AJAX tabs callback function is getting huge- Need some guidance 2010-08-20

    I'm using jQuery UI tabs to display a few pages of a pretty big form my users have to fill out. The form is, unfortunately, Web 2.0. It has the 'Add more' buttons to add extra inputs to the array, there's one tab that utilizes jQuery UI's draggable()

  • With jQuery UI tabs, how can I run code after a click on a tab? 2010-11-14

    With jQuery UI tabs, you can use the select method to run code when a tab is clicked: $( ".selector" ).tabs({ select: function(event, ui) { ... } }); But the code is run before the just clicked tab has been loaded. I need to run code after new tab ha

  • How to add a scrolling effect to jquery tools tabs? 2010-11-14

    I have this code to slide the gallery item using jQuery tools (Tabs) // sidebar gallery $(".gallery-items").tabs(".gallery a", { effect: "slide", rotate: true }).slideshow({autoplay: false, clickable: false, next: '.nextgal', prev: '.prevgal'}); On j

  • jquery ui tabs load after all htm is rendered 2011-03-08

    im using jquery ui tabs. sometimes when my page loads, all the html for each tab is displayed on the page, then it takes a bit of time before the tabs appear and html is positioned within the tabs. from a ui point of view this initial flicker is quit

  • jQuery UI Tabs run function when tabs is clicked 2011-04-27

    I'm using jQuery UI tabs widget. How do we run a function when a tab is clicked on. I can't find any built in event that handles this. --------------Solutions------------- From the docs: tabsselect This event is triggered when clicking a tab. // Supp

  • Jquery-ui tabs and history 2011-09-13

    I'm using backbone.js with jquery-ui tabs and my browser's back button is working fine. However, I would like to dynamically add and remove tabs and reverse those actions via back button. For example if the following happens: #tab-1 #tab-2 open tab-3

  • Dynamic parameter in jQuery Ajaxt tab url? 2011-11-11

    I have a set of jQuery Ajax tabs which need to be opened using a dynamic parameter, defined in a global Javascript variable. So far I have this: function getVariable() { return globalVar; } $(document).ready(function(){ $("#tabs").tabs({ ajaxOptions:

  • How to append dynamically generated ajax content to a newly added tab in jquery ui tabs? 2012-02-17

    I have a table in the following form on a side-panel: <table> <tr title='term1'><td>one</td></tr> <tr title='term2'><td>two</td></tr> <tr title='term3'><td>three</td></tr>

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.131 (s). 11 q(s)