JQuery вкладки: изменить данные AJAX на вкладке нажмите - PullRequest
Новая
       10

JQuery вкладки: изменить данные AJAX на вкладке нажмите

2 голосов
/ 15 декабря 2010

Я использовал вкладки jquery для загрузки данных с помощью ajax, но мне нужно добавить некоторые параметры в URL, когда пользователь нажимает на вкладку. Я не знаю параметров заранее, потому что они взяты из формы, которая была заполнена пользователем. Итак, я попробовал что-то вроде следующего кода, но у меня это не работает: 

<div id="tabs">
    <ul>
        <li><a href="${tab1_url}">Tab 1</a></li>
        <li><a href="${tab2_url}">Tab 2</a></li>
        <li><a href="${tab3_url}">Tab 3</a></li>
    </ul>
</div>

и я сериализую форму в массиве и присоединяю массив к массиву, содержащему сатирические данные. 

var staticData = [{name:'id',value:'${myId}'}];
$("#tabs").tabs({
    var $tabs = $("#tabs").tabs({
        ajaxOptions: { data: staticData},
        select: function(event, ui) {
            var dynamicData = $("#common_form").serializeArray();
            var dataToSend = staticData.concat(dynamicData);
            $("#tabs").tabs("option", "ajaxOptions", { 'data': dataToSend });
             return true;
        }
    });
});

но это не обновляет данные ajax после создания вкладок (я вижу запрос, отправленный с Firebug, и он включает только начальные параметры).

Как я могу изменить данные ajax, когда пользователь нажимает на вкладку?

Спасибо

РЕДАКТИРОВАНИЕ: теперь с этим кодом работает

Ответы [ 3 ]

3 голосов
/ 15 декабря 2010

Я думаю, что вы ищете метод "url":

http://jqueryui.com/demos/tabs/#method-url

Ваш код будет выглядеть примерно так: 

$(function(){
    $("#tabs").tabs({
        select: function(event, ui) {
           var data = $("#common_form").serialize();               
           if(ui.index == 1){
              var url = '${tab2_url}' + "&" + data;
              $("#tabs").tabs("url", 1, url); //this is new !
           }
           return true;
        }
    });
});
1 голос
/ 27 ноября 2012 
jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}

});
});

Это работает для меня, но если мне нужно для 100 вкладок, мне нужно добавить все 100 вкладок URL.

0 голосов
/ 15 декабря 2010 
<div id="tabs">
    <ul>
        <li><a href="" name="tab" id="tab1">Tab 1</a></li>
        <li><a href="" name="tab" id="tab2">Tab 2</a></li>
        <li><a href="" name="tab" id="tab3">Tab 3</a></li>
    </ul>
</div>

Код запроса ... 

jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}

});
});
...