jQuery-UI tabs not refreshing dynamic content

Question

I'm using jQuery-UI tabs - five in total. Tab 1 has a form for entry which submits into MySQL (via AJAX). Tab 2 pulls data from MySQL, based on what was entered via Tab 1. When I click from Tab 1 to Tab 2, I want the 2nd tab to refresh. I cannot use an external files as advertised on the jQuery-UI API due to some conflicts with other code. I'm using the following:

Here's my JS:

$(function() {
   $("#tabs3").tabs();
   $("#tabs3").on('click','li',function(event,ui) {
       $("#tabs3").tabs("load", "active");
   });            
});

Here's my HTML:

<div id="tabs3">
<ul class="no-print">
    <li><a href="#tabs-1">Enter Report</a></li>
    <li><a href="#tabs-2">My Reports</a></li>
</ul>  
<div id="tabs-1">
<form name="form" id="form" method="post" action="scripts.php" novalidate>
    // form inputs
</form>
</div>
<div id="tabs-2">
<h4>My Reports</h4>
<?php

// PHP scripts that spits out the output
</div>

What can I do to make it so when I click from one tab to the next, it refreshes the content? I'm not opposed to each tab refreshing, but I would like to choose which ones get refreshed and which ones don't if that's not difficult.

Scott Mitchell · Accepted Answer · 2014-08-10 00:09:02Z

2

Well if you arn't using a source to load the tab you will need to manually refresh whatever content you need to refresh maybe retrieving the tab page via ajax?

However, you want to approach that part is up to you. But all this can be done inside of the jquery ui tabs callback "beforeActivate". Then in the parameters you can determine what tab it is and proceed with refreshing the content at that point.

 $(function() {
     $( "#tabs" ).tabs({
        beforeActivate: function( event, ui ) {}
     });

});

ref: http://api.jqueryui.com/tabs/#event-beforeActivate

And a simple fiddle http://jsfiddle.net/zjrag3x0/

answered Aug 10, 2014 at 0:09

Scott Mitchell

6984 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

thebarless Over a year ago

By loading the tab via AJAX, it screws up some dependencies in my PHP script and some secondary AJAX calls. From what I've read, it's a limitation of the tabs function in jQuery UI but it's not my area of expertise. In layman's terms, I want to do a browser refresh of the tabs portion of the page only - the data under tab 2 isn't currently created by an AJAX call. It seems based on what you've said that I have to choose to either go all AJAX or go remote. Is that the case?

Scott Mitchell Over a year ago

What are you updating in the second tab? If you need a table ( just guessing if its reporting stuff ) updated the data must be coming from somewhere on the initial page refresh? Could you isolate the call to just get the data then use that to refresh whats in tab 2?

Scott Mitchell Over a year ago

You also dont need to load the tab via ajax. I'm really talking about getting just the data needed for the tab. Then you can replace the necessary parts with jquery selectors that really need updating

thebarless Over a year ago

The tab gets populated by a PHP script that's embedded in the tabs' div. The PITA is that I have a few different things going on within the PHP script, on top of some JS/jQuery things happening - it's just a different configuration than the path I'm currently.

Collectives™ on Stack Overflow

jQuery-UI tabs not refreshing dynamic content

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related