Alternative for iframes for jQuery ui tabs plugin

Question

Actually this is a more specific version of a question I posted in past regarding iframe -

iframe good or bad for my MVC web-app scenario

The above post ended up into being more inclined towards "iframes are bad" where as I was actually looking for a solid iframe equivalent (if iframes are really bad for my scenario). They almost hanged me :) but I was just trying to derive a better alternative. Some suggested me to consider an AJAX library which would bring the MVC processing on client-side, too complex. The post is still frozen.

Anyway, let me simplify. I'm using jQuery UI tabs plugin to display a tab-view. I want to isolate the tab content pages because they manage (add\edit) separate entities. Each tab postback/validation has to be isolated - so that processing in a tab doesn't 'disturb' the other one. iframes are serving the purpose v.well and I've already handled the issues like session timeout, etc.. but experts say 'iframes are bad' so I've started looking for alternatives. Hope you've understood what I want - a replacement for iframe for isolated functionality.

Here're some alternatives I've found -

1. jQuery UI tabs does allow dynamic loading if we specify it in Better alternative to an iframe? This was perfect until I got stuck into cross tab validation issues unlike iframe this is NOt isolated and postback in one tab tries to postback the whole page (i.e. all the tabs).

2. For the problem mentioned in (1.) I came across a plugin which is able to limit the postback to a container. (jQuery UI tab + jquery-hyjack) Looks promising - http://code.google.com/p/jquery-hijack/

3. I've got tons of solutions like inline rendering of tabs in DIV, server-side includes, etc.. but this takes me back to the original issue of isolation. Postback/validation of one tab triggers validation in other tabs. Also I don't like the idea of loading the whole page because of postback in a single tab (other tabs stay unaffected).

4. Some say this works better then iframe -

object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="xpto.html" width="300" height="300">

(5.) I've gone thru some popular blogs, forums to find the issues of iframe like - http://www.mediacollege.com/internet/html/frames/pros-cons.html (its about frames but some of it applied to iframe as well)

If I'm not concerned about SEO, linking/bookmarks and I've handled the iframe navigation, security and session timeout/redirection issues - do the iframes still disqualify for my scenario?

Please suggest and provide a worth solution.

Some links for iframe info:

• http://www.webmasterworld.com/google/3569863.htm
• pros & cones: http://in.answers.yahoo.com/question/index?qid=20081106232754AA9a1SC
• iframe support: http://www.webmaster-resources101.com/articles/view/417/
• iframe is in w3c: http://www.w3.org/TR/html4/present/frames.html#h-16.5

Answer 1

Since you are using ASP.NET MVC (based on the other post), you have control over the Form tag, if you enclose each tab within it's own form tag you will have tab-specific fields in each Postback making it 'isolated' the way you envisioned, but it is still a full post in the page -- it seems you are stuck a little with the WebForms mantra which is understandable.

You could also serialize the tab-specific fields in JSON + jQuery in a tab and create a post on the fly using an AJAX to another endpoint like an ASHX/RESTful API able to handle your validation.

EDIT: on the IFRAMES tho, if you are using tabs it means you should be talking about information under the same context, then SEO and all that should not be an issue. All popups in my (intranet) app I work at the moment are iframes, but you have to think about the back button a lot when designing for those.