Изменение содержимого при нажатии на навигацию с помощью Ajax

Question

Я бы хотел (а) изменить содержание моего списка, зависит от того, что пользователь нажимает на мою навигацию. Я новичок в Ajax и не знаю об этом.

Я не хочу, чтобы сайт «перезагружался», поэтому только PHP не является его собственностью.

Так что если кто-то может быть добр ко мне и сказать, как эта работа и попытаться решить эту проблему, я буду счастлив как рыба!

Вот как это выглядит прямо сейчас, и я отредактировал изображение, чтобы вы могли его повесить.

С наилучшими пожеланиями/Человек с проблемой ..

Answer 1

Скажем, мы хотим использовать обработчик JQuery (http://api.jquery.com/) Ajax для этого.

Что вам нужно сделать, это создать страницу php, которая вернет новый список, вы можете обработать это с помощью фильтра, чтобы отобразить правильную информацию. Затем вы хотите перетащить этот список в контейнер.

так с помощью JQuery, первого связать событие щелчка по ссылке, то запустить что-то вроде этого

$.get("[url]?filter=some filter", function(data){ 
    $([the div box id]).html(data) 
}); 

других вариантов включают возвращение отфильтрованного списка как JSON, но для простоты давайте просто придерживаться возврата HTML.

Answer 2

Похоже, что вы по умолчанию уже загрузили все категории в список, правильно? Если это так, нет необходимости (и это плохая практика) использовать AJAX для получения контента, который вы уже доставили. Вот что вы хотите сделать.

На вашем PHP вы захотите присоединить уникальный класс к этим элементам (лучше всего использовать некоторые варианты названия категории). В случае нескольких категорий на элемент присоединяйте уникальный класс для каждой категории, в которой он принадлежит.

На стороне клиента используйте jQuery, чтобы показывать только нужные элементы.

jQuery(itemSelector).not(desiredClass).hide(); jQuery(desiredClass).show();

выше будет скрывать все элементы фида не в нужном классе, и только в случае, если некоторые из пунктов, которые Вы хотели, чтобы показать были скрыты мы называем шоу на желаемом классе, а также.

Вы можете реализовать это в onClick на кнопках слева.