Добавление вкладок с помощью jQuery UI, а затем заполнение их содержимым через ajax - PullRequest
Новая
       12

Добавление вкладок с помощью jQuery UI, а затем заполнение их содержимым через ajax

0 голосов
/ 22 июня 2011

Хорошо, поэтому в основном я использую ui.tabs и хочу, чтобы ссылка на первой вкладке инициировала добавление 2 новых вкладок, каждая из которых будет заполнена вызовом ajax, который зависит от значения ссылка нажала. У меня есть следующий HTML: 

<div id="a">
    <div class="wrapper">
        <input class="imageID" type="hidden" value="11">
        <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
    </div>
    <div class="wrapper">
        <input class="imageID" type="hidden" value="1">
        <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
    </div>
</div>

И тогда jQuery выглядит так: 

$(function(){
    var tabs = $("#tabs").tabs();
    $('.tabButton').click(function(){
        tabs.tabs('add','test.htm','Summary');
        tabs.tabs('add','test.htm','Read Topic');
    });

    $(".tabButton").live("click", function(){
        var getImageID = $(this).parent();
        $.get("ajax.php?c=" + $(".imageID",getImageID).val(), function() {

        });
    });
});

Теперь jQuery работает, он правильно выбирает значение скрытого поля ввода и возвращает правильный ответ из ajax.php (видимый в консоли Firebug), но я не знаю, как этого добиться, как получить вкладки добавлены с правильной информацией. По сути, ajax.php запрашивает базу данных и извлекает содержимое 2 полей (очевидно, запись меняется в зависимости от отправленного значения). Содержимое первого поля будет затем отображаться на новой вкладке «Сводка», а содержимое второго поля будет размещаться на второй новой вкладке «Читать тему». Тем не менее, я понятия не имею, как структурировать jQuery для достижения этой цели (я довольно новичок в этой теме).

(Очевидно, я знаю, что строки 3-6 jQuery не понадобятся, если это правильно закодировано).

Ответы [ 3 ]

0 голосов
/ 22 июня 2011

Итак, насколько я вижу, это ваша проблема: «я не знаю, как этого добиться, как добавить вкладки с правильной информацией». 

$.get("ajax.php", { name: $(getImageID).val()}, function(data) { 
//get the json array in data var     
     $(this).after("<span class='title'>Title"+obj["title"]+"</span><span class='summary'>"+obj["text"]+"</span>"); //append a couple of spans with the data after you retrieve the unique data

});

Во-первых, ваша страница ajax.php должна возвращать простой массив JSON_encode: http://php.net/manual/en/function.json-encode.php, см. Подробности.

Следующий шаг - когда вы добавляете новый контент ПОСЛЕ кнопки, которую вы нажали, используйте .after для просмотра документов: http://api.jquery.com/after/

Вот быстрый jFiddle, который показывает, что делает кодированный JSON массив: http://jsfiddle.net/DKuK9/1/ он применяет пару тегов с содержимым в массиве в div, не совсем то, что делает ваш скрипт, однако у меня нет страницы ajax для вызова:)

редактировать использование функции get было неправильно-

0 голосов
/ 23 июня 2011

Хорошо, поэтому я использовал элементы других ответов и в итоге получил рабочий код: 

$(function(){   
    var tabs = $("#tabs").tabs();
    $(".tabButton").live("click", function(){
        var getImageID = $('.imageID',$(this).parent()).val();
            tabs.tabs('add', 'ajax.php?content=summary&id=' + getImageID, 'Summary');
            tabs.tabs('add', 'ajax.php?content=read&id=' + getImageID, 'Read Topic');
    });
});

со ссылкой, которая вызывает его срабатывание, такой же, как в моем исходном вопросе.Я думаю, что причина, по которой я сделал это по-другому, заключается в том, что я нажал кнопку.Кажется ли это правильным и разумным использованием jquery?

0 голосов
/ 22 июня 2011

Я думаю, что вы на самом деле очень близки к тому, что вы хотите.Что-то вроде этого? 

<div>
    <ul>
        <li>
            <input class="imageID" type="hidden" value="11">
            <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
        </li>
    </ul>
</div>

var tabs = $("#tabs").tabs({
    select: function (event, ui) {
        if (!$(ui.tab).hasClass('tabButton')) {
            return; // exit because you did not select the first tab
        }

        var panel = $(ui.panel), summaryID, readID;
        summaryID = panel.find('#hidSummaryID').val();
        readID = panel.find('#hidReadID').val();
        tabs.tabs('add', 'summary.php?c=' + summaryID, 'Summary');
        tabs.tabs('add', 'read.php?c=' + readID, 'Read Topic');
    }
});

Где 'hidSummaryID' и 'hidReadID' хранят значения, которые вам необходимы для получения правильной информации из базы данных.

...