Question

I’m having problems using ajax with jQuery…

I have the following jscript:

$(document).ready(function() {

    $('rel[close]').click(function() {
        $(this.parent).close();
    });

    $('a[rel=track]').click(function() {
        var track = this.attr('href');
        track = track.replace(/^.*#/, ''); // remove the hash part of tag id
        var data = 'track=' + track + '&user=<? echo $user; ?>',
        $.ajax({
            url: 'purchase.php',
            type: 'GET',
            data: data,
            cache: false,
            success: function (html) {
                $('#purchasePanel').html(html);
                $('#purchasePanel').show();
                }
            }
        )
    });
});

The debugger says theirs a problem with line $.ajax({ Unexpected token .

This is the CSS:

#purchasePanel {
position:absolute; width:200px; height:115px; z-index:1; visibility:hidden;
}

With this HTML:

<div id="purchasePanel">
<a href="Close" rel="close">Close this window</a>
</div>

The script fails to run and no hidden DIV pops up or anything.

Any ideas why??

Many thanks,
Alex

Answer 1

You had some incorrectly placed braces. (they were just placed in a very confusing way and not properly indented)

Right before the $.ajax call you have a , instead of a ;.

You also need to use $(this).attr('href'); as this is a plain DOM object and .attr() need a jQuery object.

Here’s the code that should be working:

$(document).ready(function() {

    $('rel[close]').click(function() {
        $(this.parent).close();
    });

    $('a[rel=track]').click(function() {
        var track = $(this).attr('href');
        track = track.replace(/^.*#/, ''); // remove the hash part of tag id
        var data = 'track=' + track + '&user=<? echo $user; ?>';
        $.ajax({
            url: 'purchase.php',
            type: 'GET',
            data: data,
            cache: false,
            success: function (html) {
                $('#purchasepanel').html(html);
                $('#purchasepanel').show();
            }
        });
    });
});