CODEWITHSUNDEEP
jqueryajaxiframeuser-interfacejquery-ui-tabs
Email
Email

Reputation: 2425

jQuery UI Tabs: load tabs from individual files/pages without using Ajax or iframe

Hi I am using jQuery UI Tabs as a form.

Because of this I can't use Ajax because all tabs/content has to be present when sending the form. The form consists of 9 different tabs, each with lot of code.

Now I want to outsource the content of these tabs to each an individual file (tab1.php, tab2.php, ...).

My solution so far:

  1. I could include all the files (tab1.php, ...)in the <head> and than load each content as a variable. I don't like this because the code looks messy because of all the escaping.

  2. I use iframes. The frames only load when clicked. 

    <div id="tab-1">
    <iframe src="..."></iframe>
</div>

Is there a better approach? Maybe using Ajax load-onceAll or something like that?... maybe something to prevent the iframe from reloading... I don't know.

Upvotes: 1

Views: 910

Answers (2)

Volkmar Rigo
Volkmar Rigo

Reputation: 1163

Have you already tried to add the content of the tabs dynamicaly using jQuery? I mean you use a div whit the id "tab1_div" and then add the HTML using 

$("#tab1_div").html("my html content for the tab-page");

If that works, you can get the HTML for the tabs by Ajax using $.get(...).

Upvotes: 0

Chad
Chad

Reputation: 19609

You can outsource the code to individual files then pull in their content with an Ajax jQuery call when the page loads:

var tabs = [
   {
      url: 'tab1.php',
      $ctrl: $('div#tab1')
   },
   {
      url: 'tabN.php',
      $ctrl: $('div#tabN')
   }
];

for(var i = 0; i < tabs.length; ++i)
{
  var data = $.ajax({
    url: tabs[i].url,
    async: false
  }).responseText;
  tabs[i].$ctrl.html(data);
}

Then you can use some validation in onSubmit functions of the individual tabs forms to ensure they are not posted back until all are finished. This is just one possible solution.

Upvotes: 1

Related Questions