jQuery Ajax загружает фрагмент URL, где фрагмент определяется переменной - PullRequest
Новая
       12

jQuery Ajax загружает фрагмент URL, где фрагмент определяется переменной

0 голосов
/ 28 июля 2011

относительно новый пользователь jQuery (использовал его на проходе, но сейчас действительно пытается это понять).

Я пытаюсь создать свою собственную нумерацию страниц jQuery с помощью ajax, пока мой код выглядит так: 

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            $(element).load(url + ' ' + element);
            return false;
        }
    });
});

Код в основном говорит о нажатии ".pigs ul.pigspagination li a", загружая родительский элемент, который является ".pigs" из данного URL, затем загружая тот же фрагмент из URL. Однако это не похоже на работу: 

$(element).load(url + ' ' + element);

Я предполагаю, что загружаю URL, затем добавляю пробел, а затем говорю для элемента, на который ссылаются из var element = $ (this) .closest (". pigs");

если вам интересно, почему я просто не могу поставить $ (element) .load (url + '.pigs');

Это потому, что я ссылаюсь на .pigs несколько раз, и это автоматически, так как это скрипт php gallery, который я написал.

HTML выглядит примерно так: 

<div class="pigs">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="pagination link">&lt; Prev</a></li>
        ...
        <li><a href="pagination link">Next &gt;</a></li>
    </ul>
</div>

раз, однако загружено гораздо больше галерей.

Есть идеи?

-------------- РЕДАКТИРОВАТЬ для bfavaretto -------------- Пробовал это 

var frag = $(this).closest(".pigs").attr('id');
$(element).load(url + ' #' + frag);

он загружает только это всасывание, но удаляет весь код, я думаю, что frag плохо передается. .attr ('id'); получит идентификатор самостоятельно, а не "#", верно?

Финальный код, если кому-то интересно: 

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            var frag = $(this).closest(".pigs").attr('id');
            $(element).load(url + ' #' + frag);
            return false;
        }
    });
});

1 Ответ

0 голосов
/ 28 июля 2011

После того, что мы обсуждали в комментариях, я понимаю, что вы хотите.

Ваш пример URL index.php?pigsgallery=1&pigspage=1 выглядит хорошо.Я предполагаю, что он вернет только содержимое pigsgallery X, на странице Y. Отлично.

Таким образом, ваша проблема, похоже, заключается в вставке содержимого, возвращаемого URL, в правую галерею div - ту, которая содержитнажата ссылка на нумерацию страниц.Вы почти там.Как я предположил в одном из комментариев, $(element).load(url) следует слово.Это означает «загрузить URL-адрес и заменить содержимое $(element) ответом».

Ваш HTML-код должен выглядеть следующим образом (с обеими галереями в настоящее время на стр. 2): 

<div class="pigs" id="pigs1">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=1&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=1&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

<div class="pigs" id="pigs2">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=2&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=2&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

Если ваш HTML выглядит не так, вы можете сбить с толку то, что должно быть сделано в PHP, а что требует jQuery.PHP должен обработать запрос и вернуть только содержимое, которое нужно заменить, в одном из элементов div.Затем следует использовать jQuery, чтобы фактически вставить этот контент на страницу внутри правого элемента (который у вас уже есть с var element = $(this).closest(".pigs").

...