loading a href's content into a shadowbox using .load() HELP!!!

Question

<script type="text/javascript">
    $(function() {
        $('#wp-calendar a').click(function(event) {
            event.preventDefault();

            var url = $(this).attr('href') + ' #content';

            var loaded = Shadowbox.load(url);

            Shadowbox.open({
                content:    loaded,
                player:     "html",
                title:      "<?php the_title(); ?>",
                height:     300,
                width:      470,
            });
        });
    });
</script>

That is the code I am using to try and display content in a shadowbox, I am using the default wordpress calendar and with jQuery/AJAX (if I am not mistaken) adding this click event to every link in the calendar, so that when a link is clicked, the content is loaded and displayed in a shadowbox instead of opening on a new page.

When I click on one of the links all I get inside of the shadowbox is "undefined".

As I am sure you can see in my code, I am still very new to this, so any help or pointers would be appreciated.

Thanx in advance!

Answer 1

The first thing I notice is that your url shouldn't contain any spaces. That could be why when Shadowbox makes the AJAX call it can't find the content. I'm not really familiar with Shadowbox, but you can easily test this using the Firebug console. Try entering something like this and seeing if you are loading the correct content:

$.get(url, function(data) { console.log(data); });

Answer 2

Hi,

First off, use the alert() function to debug your code.
Like this:

<script type="text/javascript">
    $(function() {
        $('#wp-calendar a').click(function(event) {
            event.preventDefault();

            var url = $(this).attr('href') + ' #content';
            alert(url);
        });
    });
</script>

I believe that it generates invalid url, because it adds an unnecessare space character to the end.
(by ... + ' #content')

Unless all the files in the end urls end with a space, this is really messing it up. Remove the space before the #.

var url = $(this).attr('href') + '#content';

If it doesn't work afterwards, something else is the problem.