[eluser]sentinel[/eluser]
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 jQuery-UI 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 the controller for each tab and a view is output.
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 make it look like it is in exactly the same tab.
Now, the way I structured it is to have a Controller/Model/View for the Tab container 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 the URLs of the Tab directly via Javascript, as I need to fire off a request to the server to alter information on the database before anything else happens.
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 from 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:
Code:
[removed]
$().ready(function($){
$('#tabs').tabs({ fx: { height: 'toggle', width: 'toggle', opacity: 'toggle'}, active: <?php echo $tab;?>, collapsible: true, cache: false, ajaxOptions: {cache: false}, selected: <?php echo $tab;?> });
});
[removed]
<div id="tabs">
<ul>
<li><a href="<?php echo site_url().'bond';?>">Bond Details</a></li>
<li><a href="<?php echo site_url().'segments';?>">Segments</a></li>
<li><a href="<?php echo site_url().'ownership';?>">Ownership</a></li>
<li><a href="<?php echo site_url().'encashment';?>">Encashments</a></li>
<li><a href="<?php echo site_url().'increment';?>">Increments</a></li>
<li><a href="<?php echo site_url().'policyloan';?>">Policy Loans</a></li>
<li><a href="<?php echo site_url().$wd;?>">Withdrawals</a></li>
</ul>
</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:
Code:
$input['tab'] = 0;
if($this->session->flashdata('changeTab')) {$input['tab'] = $this->session->flashdata('changeTab');}
if($user_data['mode'] == 0) {$input['wd'] = 'withdrawal';}
if($user_data['mode'] == 1) {$input['wd'] = 'withdrawalextended';}
$data['content'] = $this->load->view('bondview', $input, TRUE);
$this->load->vars($data);
$this->load->view('maintemplate');
This should alter the URL of Tab 7 to 'withdrawalextended' . However, it does not change the URL when it is reloaded (it is still shown as 'withdrawal' and displays the old content). It is definitely reloading the container, because 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. I've been through the error log and that throws up nothing. Thought it could even be a caching issue.
Any ideas will be much appreciated. It's driving me round the bend!!!
Rgds
Neil.
