CODEWITHSUNDEEP
phpjqueryajax
phil
phil

Reputation: 5

jQuery Ajax submission problems

Why doesn't the following pick up the form? All it does is just to do a normal PHP post without throwing any errors...

I'm using blockUi on this as well, hence block/unblock.

$(document).ready(function(){
    $("input.update").click(function(){
        var str = $(this).parent().serialize();
        $(this).parent().parent().block({ message: "<span class=\"loading\"><img src=\"<?php echo $siteUrl ?>/admin/template/images/loading.gif\" alt=\"loading...\" /><p>Updating...</p></span>" });
        $.ajax({
            type: "POST",
            url: "forms/update.php",
            data: str,
            success: function(){
                $("div.edit_box").unblock();
                $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");
            }
        });
        return false;
    });
});

This is my first attempt at using jQuery's Ajax functionality so please bear with me.

Upvotes: 0

Views: 170

Answers (2)

aland
aland

Reputation: 2014

Since it seems you're only using the 'success' callback of post you could use the .post method, which is a bit easier on the eyes. Also you can put those block calls inside ajaxStart and ajaxStop. To me it's neater.

The $(this).parent().parent().block seemed wrong to me, I changed it to reference the same element that is used for unblocking. I'd also be checking the output of the PHP script, to make sure that whatever you are 'updating' actually is updated (just echo XML from PHP and you'll see it on your console log).

$(function() {
    // Apply click handlers to anchors
    $("input.update").click(function(e){
        // Stop normal link click
        e.preventDefault();

        var str = $(this).parent().serialize();

        // Send request
        var action = "forms/update.php";
        $.post(action, {data:str}, function(xml) {
            console.log(xml);
            $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");

        })
    });

    // Adds a wait indicator to any Ajax requests
    $(document.body).ajaxStart(function() {
        $("div.edit_box").block({ message: "<span class=\"loading\"><img src=\"<?php echo $siteUrl ?>/admin/template/images/loading.gif\" alt=\"loading...\" /><p>Updating...</p></span>" });

    }).ajaxStop(function() {
        $("div.edit_box").unblock();
        $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");
    });
});

Upvotes: 1

riotera
riotera

Reputation: 1613

("input.update").click(function(){

should be 

$("input.update").click(function(){

Upvotes: 2

Related Questions