Home/ Questions/Q 4556722
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T17:24:24+00:00

Hi I am using jQuery UI Tabs as a form. Because of this I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0