Вкладки jQuery UI: как отправить ajax-запрос с данными поста? - PullRequest
Новая
       6

Вкладки jQuery UI: как отправить ajax-запрос с данными поста?

4 голосов
/ 28 ноября 2011

Из вкладок jQuery UI : 

<script>
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Couldn't load this tab.");
            }
        }
    });
});
</script>


<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo.</p>
</div>

Как отправить ajax-запрос с почтовыми данными в этом случае (может быть, через ajaxOptions).

Я не знаю, как изменить URL-адреса вкладок для отправки данных, например: 

<li><a href="ajax/content1.html(country:1,city:35)">Tab 1</a></li>
<li><a href="ajax/content2.html(code:'aa')">Tab 1</a></li>

Спасибо!

РЕДАКТИРОВАНИЕ :

В jQuery это: 

$.load("some_url",{country: countryValue});

Итак, у меня есть заголовок поста (страна) и значение поста (countryValue).Как сделать то же самое с каждой вкладкой?

1 Ответ

5 голосов
/ 28 ноября 2011

Чтобы сделать метод AJAX POST, вы можете добавить type к объекту ajaxOptions.Чтобы собрать данные для публикации, вы можете воспользоваться jQuery.data(), а затем скрыть параметры POST в привязке. 

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html" data-country="1" data-city="35">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo.</p>
</div>

И JavaScript: 

var postData = {};

$("#tabs").tabs({
    select: function(event, ui) {
        postData = {
            country: parseInt($(ui.tab).data('country')),
            city: parseInt($(ui.tab).data('city'));
        };
    },
    ajaxOptions: {
        type: 'POST',
        data: postData,
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
        }
    }
});

Попробуйте: JSFiddle

Если ваши параметры меняются для каждой ссылки, вам нужно будет найти способ узнать, какие параметры вы ищете.Вы можете получить индекс вкладки в событии select(), используя ui.index, и использовать switch, чтобы получить разные параметры для каждого случая.Правда, это решение не очень красивое, но оно может сработать.

...