• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Problems with jquery tab widget refreshing

 
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have these two tabs on a jquery tab widget. Each one is populated via an ajax call to the server. When I switch from tab1 to tab2, and then back to tab1, everything I had entered on tab1 is gone and it goes back to its default state that it has when first loaded. From what I've found online, most folks like this behavior, but I don't. I want the tab to load once and then stay static even if the user switches from one tab to the next and back again.

The jquery code I have for the tabs is very simple:


Here's the div that defines the tabs:
 
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can try bootstrap tabs. Plus, see the source code of this page of jQuery UI tabs tabs and implement accordingly.
 
Dave Southern
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't really see any difference in the examples at the jquery ui website and my code - except for the code that catches a broken ajax call. I believe that website is where I got my initial code. I'd like to keep my code libraries to a minimum if possible - not quite ready to consider another tab widget.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It's been a while since I've used the jQuery UI tabs, but if I recall, the default behavior for Ajax-sourced tabs is to refetch on tab selection. Do you actually need to fetch the tab content via Ajax¹? I've usually just included tab content inline without issues.



¹ Really expensive data fetching that may or not be needed is one reason to choose Ajax-y tabs.
 
Kumar Barun
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I guess you have an input box in the first tab and every time you click on a tab it fetches data from the server via ajax call. If so, either make sure a tab click fetches data only for the first time or save data before switching tabs or don't make ajax call for the first tab if there is any unsaved value.

That was my guess work as you've not made this clear.
 
Dave Southern
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You know, I'm a greenhorn, so maybe I'm wrong about it fetching the data for the tabs via an ajax call. I just assumed it was ajax since the whole page doesn't refresh, but I may be wrong about that. What's going on under the hood of the tab widget I can't say. All I know is that when the tab is selected it populates with the html that it needs.

OK. So tab one has a selector on it initially and nothing else. When the user selects a value in the selector, it sends an ajax call to the server to get some additional html that I stuff into a div - basically a form with some attributes for the user to populate. If I go to tab 2 and then back to tab1, the html in the div is gone and the selector has gone back to it's original setting like when it is first loaded. This is the behavior I'm trying to stop.

This situation may be further complicated by the details of the implementation. This tab widget is actually contained within a dojo dialog. So the webpage that launches the dialog is populated by one view, the dialog itself is populated by another view, each tab is initially populated by another view, and if there is subsequent html to put on the tab, that may be populated by yet another view via an ajax call (I know for sure that is ajax - you helped me with this last week, Bear). So maybe the problem is somewhere else - just not sure.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
it doesn't sound to me like you have a compelling need to load the tab content using Ajax. So I think you are making it needlessly complicated, and adding extra overhead, by doing so.

I'd just use inline content for the tabs unless there's some strong reason that you need to dynamically load content via Ajax.
 
Dave Southern
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here's the solution I finally found. I setup the tabs and div's like this:


And then I populate them once like this:


I hear what you're saying, though, about complexity. Eventually, this thing will have 6 or 7 tabs with a fair amount of UI components. If I put it all in one view, that will be a big pile of code. Breaking each tab out into it's own view will make things more modular, but then there's the added complexity of managing those multiple views (now where did I put that code?) So I just don't know. I could probably just put a call to each view (which in effect makes them partial views) in the div that defines each tab, and that would remove the ajax load functions. Hmmm...

Anyway, thanks for your assistance.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You could also modularize the tabs on the server-side with includes (or JSP tag files) without incurring the client-side overhead of the Ajax loads. Whichever works best for you.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic