Question

i’m not so good at jquery and i’ve got this issue:

i’m using jquery tabs as:

<li><a href="content.php?div=Production">Production</a></li>
<li><a href="content.php?div=Digital">Digital</a></li>

declared as:

$(function() {

    $( "#tabs" ).tabs({
        load: function(event, ui) {
            console.log("load event ran");
            $('a', ui.panel).live("click", function() {
                   $(ui.panel).load(this.href);
                   return false;
                   });
        }
   });
   $("#tabs").bind('tabsshow',function(event, ui) {
    window.location = ui.tab;
})
});

in content i have grid definitions – each tab has it’s own table to load:

switch($div){
            case "Production":
                $tab = '1';
                include('div_master.php');
                break;
            case "Digital":
                $tab = '2';
                include('div_digital.php');
                break;
            default:
                include('div_master.php');
                break;
        }

after above php i’ve got grid object loading db results:

$(function() {
    var grid = $(".grid").loadGrid({ ....});
});

i also store grid object in a variable so i can access sql query so i can export it to excel by pressing a button on a page:

    $('#toexcel').live("click",function() {
        var sql = grid.data().sql;
        $.ajax({
            url: "toExcel.php",
            data: "sql="+encodeURIComponent(sql),
        });
        sql = '';
    });
});

my problem is that when i load fist tab from fresh, export some results to excel, then change to second tab – the button exports the same query from the first tab!
so obviously var sql = grid.data().sql; is not updated with the new data despite grid being reloaded.

first tab always works no matter how many times i change between tabs,
but second works only when page/DOM is completely reloaded.

how do i correct this?

---

Edit 2 – i have separated grids for both tables – still having the same issue.

i really don’t think that the problem is with reusing the grid object – i think that the problem is with jquery UI – tabs, specifically how the handle reloading DOM.

---

ADDITION

please see firebug console for requests:
see when freshly loaded – ajax only send 1 request to toExcel, but after switching a tab (div-m – 1st tab, div-d – 2nd tab) it sends 2 requests. and depending on the tab it cancels either 2nd query for fist tab, 1st query for second tab – that’s why 1st tab always working!

Answer 1

UPDATED: ^{code stripped to the bone! 😉}

your code should be like this:

var sql = '';
$(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            $(ui.tab.hash).find('table').loadGrid({
                loadComplete: function() {
                    sql = $(this).data().sql;
                }
            });
        }
    });
    $('#toexcel').live("click", function() {
        $.ajax({
            url: "toExcel.php",
            data: "sql=" + encodeURIComponent(sql),
        });
    });
});

---

    <div id="tabs">
        <ul>
            <li><a href="#production">Production</a></li>
            <li><a href="#digital">Digital</a></li>
        </ul>
        <div id="production">
         <table class="production grid" action="content.php?div=Production"></table>
       </div>
        <div id="digital">
         <table class="digital grid" action="content.php?div=Digital"></table>
       </div>
    </div>

Explanation:

when using jquery-ui tabs, the <a> tag that act as tab is not fired ( jquery prevent it’s click event, cause it is actually used as tab and not as link ), also your html-tabs code will not work as expected ( will not switch tabs ) cause the <a> tag hash ( href="#something" ) should match the id ( id="something" ) of it’s respective container ( in this case div ), instead you have associated to each anchor a direct url-query ( content.php?.. ) that, again, will never be fired and in this case will never switch any tab too.

so the simple solution is to let the <a> tag act as tab by putting back the # + id as in my example and hook the tabs ui event and procede from there.