Loading alternative pages into jQuery Tabs via ajax/PHP/CodeIgniter - refresh problems ?

Loading alternative pages into jQuery Tabs via ajax/PHP/CodeIgniter - refresh problems ?

Hi,


I'm not sure whether the following problem is a Javascript or PHP issue, but I'm stumped right now.


I'm building an application. Part of it contains a section that is broken down into tabs. Because the information in each section is inter-linked, I can't load the contents of each tab at the outset. Each time a tab is clicked on the page is loaded via Ajax and if the data on the page is modified and updated, it is submitted back to the server via Ajax and a new page is generated via PHP and returned.


This works absolutely fine - except for one tab. On that specific tab there is an option to go into 'advanced mode'. Effectively this means that the whole tab needs to be refreshed and I have to replace the URL linked to the tab in question with a new URL. So when somebody decides they want to use 'advanced mode', an Ajax request is fired to the server, but I need to redirect them back to a different page, but looks like it is in exactly the same tab.


Now, if anybody is familiar with Codeigniter, the way I structured it is to have a Controller/Model/View for the Tab itself, then a seperate Controller/Model/View for the content of each tab. Effectively a view within a view. However, because the View for the Tab container has already been outputed, I can't manipulate this directly via Javascript, as I need to fire off a request to the server to alter information on the database. 


My solution was instead of returning info from the Ajax request, I redirected it back the main Tab container page with code to re-write the URL. However, even though the page is reloaded, it does not seem to generate the new tab. However, if I enter the page directly for the address bar, it does construct the new tab with the new link and the correct content. 


Probably the best way is to demonstrate by example. The view for the Tab Container is:


  1. <script>
  2. $().ready(function($){

  4. $('#tabs').tabs({ fx: { height: 'toggle', width: 'toggle', opacity: 'toggle'}, active: <?php echo $tab;?>, collapsible: true, cache: false, ajaxOptions: {cache: false}, selected: <?php echo $tab;?>  });
  5. });
  6. </script>
  7. <div id="tabs">
  8. <ul>
  9.  <li><a href="<?php echo site_url().'bond';?>">Bond Details</a></li>
  10.  <li><a href="<?php echo site_url().'segments';?>">Segments</a></li>
  11.  <li><a href="<?php echo site_url().'ownership';?>">Ownership</a></li>
  12.  <li><a href="<?php echo site_url().'encashment';?>">Encashments</a></li>
  13.  <li><a href="<?php echo site_url().'increment';?>">Increments</a></li>
  14.  <li><a href="<?php echo site_url().'policyloan';?>">Policy Loans</a></li>
  15.  <li><a href="<?php echo site_url().$wd;?>">Withdrawals</a></li>
  16. </ul>
  17. </div>


Note the PHP vars $wd and $tab

Once the request is sent and my code detects that it has to be redirected to the same tab, but a totally different page within the Tab, I use the following for the Tab Controller:

  1. $input['tab'] = 0;

  3. if($this->session->flashdata('changeTab')) {$input['tab'] = $this->session->flashdata('changeTab');} 

  5. if($user_data['mode'] == 0) {$input['wd'] = 'withdrawal';}
  6. if($user_data['mode'] == 1) {$input['wd'] = 'withdrawalextended';}

This should alter the URL of Tab 7 to 'withdrawalextended' . However, it does not change the URL (it is still shown as 'withdrawal'). It is definitely reloading the container, as if I break the PHP code and output the vars, they are just as they should be. However, this does not seem to be passed to on now matter how many times I click between the tabs. But if I refresh from the address bar, it works like it should.

Any idea what could be the most likely cause of this, or any suggestions.

Any ideas will be much appreciated.

Rgds
Neil.

    • Topic Participants

    • neil