Welcome Guest, Not a member yet? Register   Sign In
Loading alternative pages into jQuery Tabs via ajax/PHP/CodeIgniter - refresh problems ?


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:


       $('#tabs').tabs({ fx: { height: 'toggle', width: 'toggle', opacity: 'toggle'}, active: <?php echo $tab;?>, collapsible: true, cache: false, ajaxOptions: {cache: false}, selected: <?php echo $tab;?>  });
<div id="tabs">
<li><a href="&lt;?php echo site_url().'bond';?&gt;">Bond Details</a></li>
<li><a href="&lt;?php echo site_url().'segments';?&gt;">Segments</a></li>
<li><a href="&lt;?php echo site_url().'ownership';?&gt;">Ownership</a></li>
<li><a href="&lt;?php echo site_url().'encashment';?&gt;">Encashments</a></li>
<li><a href="&lt;?php echo site_url().'increment';?&gt;">Increments</a></li>
<li><a href="&lt;?php echo site_url().'policyloan';?&gt;">Policy Loans</a></li>
<li><a href="&lt;?php echo site_url().$wd;?&gt;">Withdrawals</a></li>

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:

$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 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!!!


Although you've taken the time to clearly type out your problem, I have trouble reading text, so I'm getting lost. I'm going to just ask you a few questions just to clarify my understanding of the problem, and which I hope might help resolve the issue. I apologise if I ask anything that causes you to repeat what you've already mentioned.

1) Where is your "advanced" button/link?
2) Assuming your page is at yoursite.com/admin/settings, can your advanced button not simply reload the page and point to yoursite.com/admin/settings/advanced.
3) Can you not serve up a hybrid view, which contains all of the options (normal and advanced), but by default, advanced options are hidden with CSS, and made visible when you click the advanced button? You could also dynamically insert a hidden form field so your server will know if the advanced form is being submitted?
4) Am I even close here, or am I way off?

Hi there, no you are not way off at all.

Currently, I have a dropdown select control to toggle between 'normal' and 'advanced' mode. This is caught by a Javascript 'onChange' event which also writes a value to a hidden field on the form. Once the form data is submitted back to the controller via an ajax post, the validation routines back up the change, so in theory, it should do exactly what you recommended in point 2. If the first validation callback detects that the mode is to be changed, it alters some setting in the DB and does a redirect back to the page that constructs the tab.

What I'm doing may seem over-complicated at first, because the sections within the tabs are structured as a view-within-a-view-within-a-view. The main view 'maintemplate' contains the header and footer and stuff that appears on every single page. Within the 'maintemplate', the Tab container is output via a seperate controller. The content of each Tab is also has its own controller/model/view. So, when a tab is clicked on, new content is loaded into a <div> each time. But for all the other sections, it works absolutely fine.

I think option 3 is going to be have to be considered if I can't figure this out. However, when the page with the Tabbed content is first loaded, it is done via clicking on a separate page, and that is done by simply writing some session data, then calling:

header('location: '.site_url().'bondview');

Now, that works fine, and that is also what I am using when I try and redirect back there when the mode is changed. So that is why I'm getting a bit confused. It has to be something really simple that I'm just missing....


I take it $user_data is set somewhere in the controller and you've just not posted it? I'm also unsure how/where you're setting the userdata. Would it be possible for you to post your entire controller and view?

Also, I would suggest changing this:
if($user_data['mode'] == 0) {$input['wd'] = 'withdrawal';}
if($user_data['mode'] == 1) {$input['wd'] = 'withdrawalextended';}

to this:
$input['wd']  = 'withdrawal' . ($user_data['mode'] == 1) ? 'extended' : '';

It's less code (almost half the code), and also ensures that, if, for some reason, $user_data['mode'] is not set, or isn't set to either 1 or 0, you have a fallback to prevent errors, or unexpected bahaviour. I know this probably has nothing to do with the problem at hand, but I thought it was worth mentioning. Smile

I'm sorry this is frustrating you. I'm still struggling to get my head around the whole thing (despite your clear explanations). Hopefully, if you can post some more code, it should become clear to me.

I just realised, the code I posted above doesn't actually check that $user_data['mode'] is set, but I'm sure you can add that in if necessary.


$user_data is defined in my controller. It is used to extract data from a function in the model.

Anyway, I've gone for the option of merging the two controllers/models/views together. Because they are quite similar in many ways, and share many of the same functions, I can use some Javascript on the view to show/hide the differences when necessary.

I'd love to figure this one just out of curiousity, but right now I just want to get it working. I could waste another few days and still end up going round in circles.

But thanks for your input. Much appreciated.


I think where I got lost is because I can't actually see how your dropdown works (or rather, what it does). As a last ditch effort, I'm hoping this might help. You can reload the current tab with:
var cur_idx = $("#tabs").tabs("option", "active");
$("#tabs").tabs('load', cur_idx);

So long as you can change the URL of the tab dynamically, you should be able to easily prompt a tab refresh to load the relevant UI.


Just tried it, and getting exactly the same results.

What you suggested looks perfectly logical, so I'm scratching my head as to why it is not working.

I've given up on it and have been reworking those pages. That's the way it goes sometimes....

Yeah, no problem. Sorry, I couldn't be of more help. Smile

Theme © iAndrew 2016 - Forum software by © MyBB