How to use CodeIgniter/MVC views inside jQuery ajax tabs?

Question

Trying to make a form wizard with jquery tabs.

Is it possible to have each step of the form in a separate view, then load each via jquery tabs' ajax option? When I ajax load just the partial (just the form), it has no way to access the js, css etc. (as there are is no 'header' for the partial file), and it doesn't seem to inherit from the parent page.

As a workaround I have all the forms on one page, divided into tabs with divs. This does the job, but with js turned off it doesn't make much sense (though the app relies on js and will be used in-house only with js enabled browsers, so maybe this is not an issue).

I'm using CodeIgniter, but I guess the question is valid for any MVC framework.

Answer 1

Unless the tabs are being loaded in iframes, they should have access to the js and css of the page loading them in. Can you do a test to confirm your suspicion that the JS and CSS aren't accessible?

Answer 2

I am just writing a similar application using jquery tabs using my own MVC framework. Here's how I solved the "browsing inside the tab" problem: I have my forms in separate views and they are loaded in the tab with ajax.

  jQuery(document).ready(function(){
    var tabs = jQuery("#tabs > ul").tabs().bind('tabsload', function( event, ui ){
      jQuery( 'form', ui.panel ).submit(function() {
        jQuery.ajax({
          type: 'post',
          url: $(this).attr('action'),
          data: $(this).serialize(),
          success: function( response ){
            if(response.match( /^http:\/\/.*$/ ))
            {
              tabs.tabs('url', ui.index, response );
              tabs.tabs('load', ui.index );
            }
          }
        });
        return false;
      });
    });

After each tabload I override the default submit event of the form inside the tab contents ( accessible by ui.panel ). Then the form is serialized and sent as an ajax post. If the response is an URL then i just set the URL of the tab to it and reload it.

Hope this helps

Answer 3

The problem I found with this was that most of my ajax data is bing sent back as text/html NOT a url? this means it does not show up and if i attach it to the 'target' then it does not load the tabsload event and so the binding to the submit button does not happen