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

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.