JQuery, Shadowbox и AJAX - PullRequest
Новая
       7

JQuery, Shadowbox и AJAX

2 голосов
/ 03 февраля 2010

Я хотел бы загрузить некоторый контент, используя AJAX и Shadowbox

В принципе, я бы хотел, чтобы пользователь переходил на страницу в случае отключения javascript. Вот что я хочу сделать: -

1) Отмена события щелчка, т. Е. Пользователь не должен переходить на другую страницу.

2) Загрузка содержимого с помощью функции ajax в jQuery

3) Показать содержимое внутри теневого блока

Мой код работает нормально до загрузки контента с использованием ajax, но shadowbox не отображается и URL обновляется, я думаю, все становится пустым. 

jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "/ajax-post.php?p="+id, 
            success: function(data){
                Shadowbox.open({
                    content:    data,
                    player:     "html",
                    height:     350,
                    width:      350
                });
            }
         });
        return false;
    });

ОБНОВЛЕНИЕ 1

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

Shadowbox.init({
    skipSetup: true,
    players: ["html"]
});


  // LOAD
jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('.post h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id, 
            success: function(data){
                show_box(data);
            }
         });
        return false;
    });

});

// Shadowbox function show_box (html) { Shadowbox.open ({ содержание: html, игрок: "HTML", высота: 350, ширина: 350 }); }

ОБНОВЛЕНИЕ 2

Хорошо, получил прболем, в HTML, который я получаю через ajax, есть какой-то javascript, и это является причиной перезагрузки страницы.

Почему это происходит? Есть идеи?

Ответы [ 2 ]

1 голос
/ 29 августа 2012

нужно запустить 

Shadowbox.setup('h2 a');

Это приведет к повторной инициализации и привязке к любому загруженному ajax-контенту

1 голос
/ 03 февраля 2010

Так как вы не получаете никаких ошибок JavaScript, попробуйте отладку, разбив ее:

Убедитесь, что привязка и переопределение события click работает правильно: 

$('h2 a').bind('click', function() {
    alert('click even fired');
    return false;
});

Если это работает, проверьте данные, которые возвращает ваш ajax-запрос: 

$('h2 a').bind('click', function() {
    var id = $(this).attr('id');
    $.ajax({ 
        url: "ajax-post.php?p="+id, 
        success: function(data){
           alert(data);
        }
     });
    return false;
});

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

...