JQuery UI вкладки + объект сетки - AJAX отправляет несколько запросов

Question

Я не очень хорош в JQuery, и у меня есть эта проблема:

Я использую вкладки jquery как:

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

объявлено как:

$(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;
})
});

в content у меня есть определения сетки - каждая вкладка имеет свою собственную таблицу для загрузки:

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;
        }

после вышеупомянутого php у меня есть grid Результаты загрузки объекта в БД:

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

Я также храню объект сетки в переменной, чтобы получить доступ к sql query, чтобы я мог экспортировать его в Excel, нажав кнопку на странице:

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

Моя проблема в том, что когда я загружаю первую вкладку из кулака, экспортирую некоторые результаты в excel, затем переключаюсь на вторую вкладку - кнопка экспортирует тот же запрос из первой вкладки! очевидно, что var sql = grid.data().sql; не обновляется новыми данными, несмотря на перезагрузку сетки.

первая вкладка всегда работает независимо от того, сколько раз я переключаюсь между вкладками, но вторая работает только тогда, когда page / DOM полностью перезагружена.

как мне это исправить?

---

Редактировать 2 - у меня есть раздельные сетки для обеих таблиц - все еще есть та же проблема.

я действительно не думаю, что проблема заключается в повторном использовании объекта grid - я думаю, что проблема в jquery UI - вкладках, особенно в том, как дескриптор перезагружает DOM.

---

Сложение

пожалуйста, смотрите консоль Firebug для запросов: Посмотрите, когда он только что загружен - ajax отправляет только 1 запрос toExcel, но после переключения вкладки (div-m - 1-я вкладка, div-d - 2-я вкладка) отправляет 2 запроса. и в зависимости от вкладки отменяет 2-й запрос для первой вкладки, 1-й запрос для второй вкладки - поэтому 1-я вкладка всегда работает!

Answer 1

ОБНОВЛЕНО: ^{код раздет до костей! ;)}

Ваш код должен быть таким:

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>

Пояснение:

при использовании вкладок jquery-ui тег <a>, действующий как tab, не запускается (jquery предотвращает событие click, поскольку он фактически используется как вкладка, а не как ссылка), а также код html-tabs не будет работать должным образом (не будет переключать вкладки), потому что тег <a> hash (href="#something") должен соответствовать id (id="something") соответствующего контейнера (в данном случае div), вместо этого у вас есть связан с каждым якорем прямым URL-запросом (content.php?..), который, опять же, никогда не будет запущен, и в этом случае никогда не переключит ни одну вкладку.

поэтому простое решение - позволить тегу <a> выступать в качестве вкладки, возвращая # + id, как в моем примере, перехватывая событие tabs ui и продолжая оттуда.

Answer 2

Я мог бы упустить некоторые детали здесь, но, возможно, стоит загрузить каждую вкладку в свою собственную .grid?таким образом, нет никакой возможности ошибочно загрузить данные из другой вкладки

Установить каждую вкладку в свою собственную сетку с совершенно разными классами:

<table class="productionGrid grid" action="div-d.php" title="detailed info">
<table class="digitalGrid grid" action="div-d.php" title="detailed info">

Затем .loadGrid () в той же, совершенно отдельным способом:

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

Затем включите кнопку экспорта в Excel на каждой вкладке:

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

...

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

Я уверен, что код могбудьте милее, но начните с простого и сделайте так, чтобы он работал, а затем добавьте сложность и функциональность, как только он заработает.

ОБНОВЛЕНО: добавлены более конкретные подробности после показа кода

Answer 3

Из того, что я вижу в OpenJS Grid, плагин возвращает массив элементов, потому что вы привязываете его к ".grid".
В вашем коде это происходит два раза, поэтому вы получите два элемента.

Можете ли вы попробовать, если это сработает:

// This has to return the productionGrid's data
var sql = $("[class*=productionGrid]").data().sql
// This has to return the digitalGrid's data
var sql = $("[class*=digitalGrid]").data().sql

Answer 4

Я мог упустить что-то очевидное, но я не вижу, где вы обновляете digitalGrid.data (). Sql;на что угодно, кроме по умолчанию.Возможно, вы хотите использовать Успешный или Полный обратный вызов ajax для перезагрузки данных.Тем не менее, может быть какой-то код не указан или что-то присуще инструменту сетки, который обрабатывает это.

Код Psuedo:

$.ajax({
        url: "toExcel.php",
        data: "sql="+encodeURIComponent(digitalsql),
success: function(data) {
    var grid = $(".grid").loadGrid({ data});
}
    });