Question

I would like to load some content using AJAX and Shadowbox

Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-

1) Cancel the click event i.e the User must not go to a different page.

2) Load content using ajax function in jQuery

3) Show the content inside a shadow box

My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.

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;
    });

---

UPDATE 1

tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.

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({
content: html,
player: “html”,
height: 350,
width: 350
});
}

---

UPDATE 2

Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.

Why is this happening ? Any ideas ?

Answer 1

Since you’re not getting any JavaScript errors try debugging by breaking it down:

Ensure that the binding to and overriding of the click event is functioning properly:

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

If that works, check the data that your ajax request is returning:

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

The code looks like it should work, so I’m guessing there’s either something wrong elsewhere (in which case the first test will likely fail) or you’re getting some really odd data returned.