You may want to bring this up on the jQuery UI list http://groups.google.com/group/jquery-ui
A live sample page would help. If you don't have a place to host one, use jsbin.com:: http://jsbin.com/ - Richard On Thu, Dec 10, 2009 at 10:15 AM, Jason Meckley <jasonmeck...@gmail.com>wrote: > Richard, thank you, but that didn't work. for the same reasons as > before. if I try to reload the tab I am viewing then it doesn't work. > > I dug around some and found 1. why this is happening 2. a hack to make > it work. > 1. if I attempt to selected the selected tab and collapsible is false > the operation is doesn't fire (aborted?). > 2. if I select the selected tab and collapsible is true the tab is > minimized. > 3. the spinner is calculating hieght/width/margin when spinner() is > called to aline the icons to the textbox. it's using > element.outerHeight() and element.outerWidth() as part of the > calculation. > 4. it seems that the panel's content is appended to the browser DOM > after load but before show. this is why the spinner formats work in > the call to show, not load. > > does that make sense? > > hacks: > 1. Hidden hack tab > <div class="tabs"> > <ul> > <li><a href="page1.htm">tab 1</a></li> > <li><a href="page2.htm">tab 1</a></li> > <li style="display:none;"><a href="#HACK">&nbps;</a></li> > </ul> > <div id="HACK" style="display:none;"></div> > </div> > var HIDDEN_TAB_INDEX = $(".tabs").("option", "length")-1; > var tabs = $(".tabs"); > var index = tabs.tabs("option", "selected"); > tabs > .tabs("url", index, url) > .tabs("select", HIDDEN_TAB_INDEX) > .tabs("select", index); > this works, but causes a "flash" as you will see the panel shrink and > expand. > > 2. Collapsible hack > <div class="tabs"> > <ul> > <li><a href="page1.htm">tab 1</a></li> > <li><a href="page2.htm">tab 1</a></li> > </ul> > </div> > $(".tabs").tabs({collapsible:true}); > var tabs = $(".tabs"); > var index = tabs.tabs("option", "selected"); > tabs > .tabs("url", index, url) > .tabs("select", index) //collapse > .tabs("select", index); //expand > which again produces a flash with the shrinking/expanding. it also > means the user can collapse any tab, which I don't want. > > 3. Hard code the style values. > $(".tabs").tabs({ > load: function(event, ui){ > $(".spinner", ui.panel).spinner().find(".ui-spinner- > buttons").css({hard coded values}); > } > }); > I like that I don't get a "flash" but it's also dependent on the > styling of the input box not changing. if it does then I have to > change my script. > right now I'm leaning towards option 3 since it's not used in that > many places. > > I'm wondering... is there an event I can bind to that say after the > textbox (or entire ajax content) is attached to the browser DOM (or > after the content is attached to a parent), process the spinner? > > $(function(){$(".spinner").spinner();}); doesn't work when placed > within the ajax content itself. it produces the same results as > calling spinner in the load event. the outerHeight/Width are 0. > > On Dec 10, 6:29 am, "Richard D. Worth" <rdwo...@gmail.com> wrote: > > On Wed, Dec 9, 2009 at 4:52 PM, Jason Meckley <jasonmeck...@gmail.com > >wrote: > > > > > > > > > it appears that calling load programatically (rather than clicking on > > > the tab manually) does not call the show function. > > > > In that case, you might try .triggerHandler('click') > > > > - Richard >
