Simple tabbed iform?

[C.E. Coleman]

I have been working with a version of a tabbed form someone built. It seems the JS just up and quits working and I am thinking it might be iffy. I thought I had seen a very simple tabbed form hereabouts at one time but cannot locate it. If anyone knows where a very simple tabbed form might live, that would be awesome.

C. E Coleman

[Scott Morris]

I've used the jQuery / jQuery-UI to do tabs that look good and are easy to implement.  For tab code examples, you can go to http://jqueryui.com/tabs/ 

[Russ Garlow]

C.E. are you using JQuery? Scott's right, that's the best way to go, the JS tabs are always going to require more maintenance. If you want to stick with the JS, can you post the script you're using now?

[C.E. Coleman]

You guys are right. I'm making the switch today. My boss wants accordions within tabs and I think this can make it work. Besides I see Scott has a whole new library geared towards iforms that will be exciting to try. I do have a couple of question however;  can the submit buttons still work with multi-tabbed forms without special coding? And, since I have to do as much HTML and script testing as possible off the server, I am attempting to use the remote google api for Jquery but its not working, hints and tips on that anyone? This is going to be something new and I need to get things looking like they work and smooth out any issues before springing it on unsuspecting medical and admin type folks.

C. E. Coleman

[C.E. Coleman]

And, which version do you use or recomend? I see there is a jquery. min.js version but I would rather the newest, most robust version if it is recommended.

[Scott Morris]

Submit buttons can work just fine in a multi-tabbed form, but there are some considerations that you'll want to make as you plan it out.  I made a long-winded post about it a while back: http://heo-iforms.blogspot.com/2012/07/reader-request-submit-while-using-tabs.html

Regarding your other question, the "jquery.min.js" is the same functional code as the other; it's just undergone a process to "mini-ify" the code (getting rid of the white space, changing variable names to single characters, etc) to make the file smaller and, by extension, faster to download.  The trade-off is that it is no longer even remotely human-readable.

I'd suggest going to the jquery and jquery-ui websites and downloading the most recent released version (as of right now, it's jquery 1.9.0 and jquery-ui 1.10.0).  Copy the JS and CSS files up to your server and reference them locally (that way, if there's ever a proxy issue, your iForms will not be impacted).

[Russ Garlow]

First thing I'd do is go to Themeroller, find a theme you like and download it, it'll have everything you need inside to make pretty UI pages

http://jqueryui.com/themeroller/

Copy these files to your server (here's where I put them)

Then just link the JQuery library, the UI library, and the UI stylesheet to your iForm, copy scripts from the example page that comes with UI, and that's a great start.

[Russ Garlow]

Another piece of personal advice, you really want to plan out your first JQuery page. Develop it until it's something you're very comfortable with before you show it to admin. I showed them mine as soon as I had the barest of prototypes and they dove on it, and consequently I felt it was rushed to production. There's so much you can do to make these things hum... you don't want to be rushed. I'm now on my fifth revision (third using JQuery) and it's just now getting to where I'm really happy with it.

Like I said, that's just my advice... grain of salt and all that.

Also, I would Not use the .min  because you might find yourself wanting to make some tweaks (especially with the UI CSS) once you understand how it all works, and like Scott said, they're unreadable. Just use the standard libraries.

[C.E. Coleman]

Yeah, that is exactly why I want to get things ironed out before I show it to them. They seem to really hop on anything new and shiny and if it isn't ready yesterday, well, you know the drill, I am sure. I feel rushed on just plain old school iforms as it is.

I did want to use the google version from my own laptop so I can play around a little before putting anything on the server. My boss is pretty picky about what files go on the server so things stay clean. I am as well. Once running on the facility server I wouldn't use a remote URL to run it at all for fear something, somehow might go awry.

[C.E. Coleman]

Well, Im now a Jquery convert.  Its not hard to implement and get going. I created my first tabbed form but I am having an issue with the form elements added to the first tab showing up in all tabs, have any of you encountered that when using Jquery tabs?  I gooled my issue but no satisfactory answer appeared. I did run across a complicated post about having to change some code in the Jquery app but when I tried that my version did not have the same code. Besides, I don't want to have to fiddle with the programs innards to make something work. Im hoping one of you guys have encountered that and can advise.

It does look good, however, if I can just get it ironed out...

C. E Coleman

[Russ Garlow]

Yeah, I've had that happen, if the div surrounding your first tab is not closed, it would show up on every tab.

[C.E. Coleman]

Well, of all the silly things...I was trying to "retrofit" some existing forms with this feature and dropped the tabbed section into the existing containing table in the template, and it does not like being surrounded with the table tag. Removing those fixe the whole thing. I have a DIV, then a table inside.Works great now. Thanks for all your help!