JQuery BBQ плагин с PHP красивые URL - PullRequest
Новая
       38

JQuery BBQ плагин с PHP красивые URL

1 голос
/ 25 января 2012

У меня возникают проблемы с разработкой того, как начать работу с плагином BBQ в Jquery, чтобы включить поддержку перемотки вперед / назад и создания закладок на моем сайте ajax с красивыми URL-адресами.

У меня есть красивые URL для моих страниц PHP через правила apache mod_rewrite, так что http://mysite.com/store.php?cat_id=5 доступен через http://mysite.com/store/5

Эти URL-адреса, очевидно, актуальны только при доступе к php-странице напрямую через браузер, так как после того, как пользователь зашел на первую страницу, которую он посетил, и щелкнул любую из внутренних ссылок, они перехватываются моим JS, и контент обновляется. через ajax (т.е. вместо перезагрузки страницы).

Таким образом, это означает, что мои функции «назад / вперед» и «закладки» не работают, и именно здесь я прихожу на барбекю, чтобы попытаться реализовать это.

Глядя на довольно много примеров, я не могу понять, как заставить это работать с красивыми URL, так как мои теги href еще не содержат #. Мои теги href выглядят так: 

<a class='cat_link' href='/store/5' data-cat-id='5'>

Нажатие на эту ссылку приводит к выполнению следующего jjery ajax-запроса: 

$('#container').delegate(".cat_link", "click", function(){
    $.get('/views/tileview.php',{ cat_id: $(this).data('cat-id') }, function(result){
            $("#viewport").hide().html(result).fadeIn(750);
    });
});

, который загружает контент ajax из /views/tileview.php с параметром GET cat_id = 5 и загружает полученный HTML-код в div #viewport.

Теперь мой вопрос заключается в том, могу ли я использовать плагин BBQ для поддержки перемотки назад / вперед и создания закладок, не изменяя свои hrefs для включения в них хэшей (т.е. с текущими URL-адресами)? Кроме того, независимо от того, нужно ли мне изменять свои URL-адреса, как мне справиться с тем фактом, что URL-адреса симпатичны и не содержат «параметров» в смысле «? =»?

Моя текущая реализация ухудшается без JS, так что ссылки просто переводят посетителя на правильный URL, и они, по сути, видят одно и то же содержимое (хотя и с полной загрузкой страницы php вместо просто вызова ajax и обновленного div). Это то, что я хочу сохранить, получая поддержку вперед / назад и поддержку закладок.

спасибо Аарон

Ответы [ 2 ]

0 голосов
/ 26 января 2012

В соответствии с моим комментарием выше к превосходному ответу @Hannes, я смог использовать свое симпатичное формирование url в конце, переписав свои обработчики событий, чтобы просто вызвать изменение хеша, а затем использовать событие onhashchange, чтобы сделатьАякс звонит.Я также включил плагин Ben Alman hashchange для обеспечения совместимости с IE и другими браузерами, которые не имеют функции hashchange. 

$(document).ready(function(){
  //pre-load spinner image to ensure it's already cached before it's used
  var image = $('<img />').attr('src', '/js/spinner/ajax-loader.gif');
  var opts = {
            img: '/js/spinner/ajax-loader.gif',
            height: 42,
            width: 42,
            position: 'center',
            hide: true
        };
  var current_hash = '';
      //if this is a straight URL, cache the contents to use later in case 
      //  of back button being used to come back here
  if (window.location.hash == '') {
      var cache_viewport = $('#viewport').html();
  }

$('#container').delegate(".cat_link", "click", function(){
    var href = $(this).attr('href');
    window.location.hash = "#" + href;
    return false;
   });

$('#container').delegate(".product_tile_a", "click", function(){
    var href = $(this).attr('href');
    window.location.hash = "#" + href;
    return false;
   });


 $(window).hashchange(function(){
  var hash = window.location.hash;
      //if the new hash is a straight URL, reload the straight URL's html content
  if (hash == '') {
      $("#viewport").html(cache_viewport);
  }
  else if (hash != current_hash) {
    var strings = hash.split("/");
    var action = strings[1];
    var param = strings[2];
    current_hash = hash;
    callAjax(action, param);
}
 });

 function callAjax(action, param) {
  switch(action) {
      case 'store':
        $("#viewport").spinner(opts);
        $.get('/views/tileview.php',{ cat_id: param }, function(result){   
            $("#viewport").spinner('remove'); 
            $("#viewport").hide().html(result).fadeIn(500);
            });
            break;
      case 'products':
        $("#viewport").spinner(opts);
        $.get('/views/productview.php',{ product_id: param },function(result){   
            $("#viewport").spinner('remove'); 
            $("#viewport").hide().html(result).fadeIn(500);
            });
            break;
      default:
        null;
    }
}

 //ensures hashchange is called on initial load in case of a bookmarked hash
 $(window).hashchange();

});
0 голосов
/ 25 января 2012

Это довольно сложно. Тем не менее, вы можете использовать jQuery нижнего уровня, на котором построено барбекю ... См. Параметры и разделы Сайт Бена Алмана . Вы можете использовать $ .param.fragment (); или $ .param.querystring для возврата и передачи значений без хэшей. Вы можете реструктурировать строку запроса для представления перезаписи apache перед тем, как нажать строку запроса.

...