Update SQL with JQuery and AJAX

Question

I have an RSVP box on my website where I want people to click the tick or cross image depending on whether they are coming or not. I currently have a PHP system that updates a SQL database but it reloads the page.

I have tried this code:

$(document).ready(function() {
    var options = {
        url: 'process.php',
        type: 'post',
        data: 'attending',
        success: success
    };

    // bind to the form's submit event
    $('.attending').click(function {
        $(this).ajaxSubmit(options);
        return false;
    });

    function success(responseText, $form) {
        $(".attending").hide();
        $(".success").fadeIn();
    } 
});

The RSVP buttons are links with tags But I am strugling with this, any help would be appreciated!

Thanks

You're missing parentheses after the .click function, it should read .click(function() { — billyonecan
– billyonecan, Commented May 3, 2012 at 8:45
What specifically is your issue with the code? When using the code you've posted, is it simply not working and not submitting at all (jquery errors)? Is the page still reloading (meaning your binding isn't working)? — rmmoul
– rmmoul, Commented May 3, 2012 at 8:45
$('.attending').click(function(e) { $(this).ajaxSubmit(options); e.preventDefault(); }); your click event has some syntax error. — root
– root, Commented May 3, 2012 at 8:46
Yes, the page keeps reloading and the database is not updating either? — Blease
– Blease, Commented May 3, 2012 at 8:46

Faust · Accepted Answer · 2012-05-03 08:48:19Z

1

The ajaxSubmit function is part of the jquery forms plugin ... are you including that plugin with the page? (You didn't tag the question with jquery-forms-plugin, so I'm guessing no) If this is your first go at jQuery ajax, I'd recommend using the .ajax method first, even though it's more lines of code, to get an understanding of what's going on there.

answered May 3, 2012 at 8:48

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blease Over a year ago

I have used your idea and it has worked perfectly, thank you! The only issue is that the img:hover tag doesn't work once the rsvp has been clicked. I can provide a link to the site if you need.

Faust Over a year ago

Sure, provide the link and I'll take a look-see.

Rory McCrossan · Accepted Answer · 2012-05-03 08:47:31Z

0

You missed the brackets after declaring the function in your click handler, try this:

// bind to the form's submit event
$('.attending').click(function() {
    $(this).ajaxSubmit(options);
    return false;
});

Or better yet:

// bind to the form's submit event
$('.attending').click(function(e) {
    e.preventDefault();
    $(this).ajaxSubmit(options);
});

answered May 3, 2012 at 8:47

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

Update SQL with JQuery and AJAX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related