CODEWITHSUNDEEP
jquerycodeigniterjquery-ui-tabs
meleyal
meleyal

Reputation: 33300

How to use CodeIgniter/MVC Views Inside jQuery/AJAX Tabs?

Trying to make a form wizard with jQuery tabs.

Is it possible to have each step of the form in separate views, then load each via jQuery/AJAX tabs option? When I AJAX load the partial form, it has no way to access the js, css, etc.; as there are is no 'header' for the partial file. It doesn't seem to inherit from the parent page at all. As a workaround I have all the forms on one page, divided into tabs with <div>s. 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).

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

Upvotes: 0

Views: 7013

Answers (3)

Andre
Andre

Reputation:

The problem I found with this was that most of my ajax data is being 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 tabs load event and so the binding to the submit button does not happen

Upvotes: 0

Dusko
Dusko

Reputation:

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

Upvotes: 1

Chris MacDonald
Chris MacDonald

Reputation: 6126

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?

Upvotes: 1

Related Questions