jQuery AJAX function on success not working

Question

Having an issue. I have two different buttons included with each image displayed. One is remove, the other is assign as "main".

Remove works. It hides the image, deletes the file, and the MySQL row.

Assign Main sort of works. It updates the row in the database changing "main" value to 1, as it should, however, it should also alert(), but it does not.

<script>

$(document).ready(function() {
    $(".remove_image").click(function() {

        var image_id = $(this).attr('id');

        $.ajax({
            type:"post",
            url:"imagecontrol.php",
            data: { image_id:image_id,
                    image_remove:1},
            success: function(response) {
                $('#image_'+image_id).fadeOut(400);
                showUploader();
            }
        })

    })
});

$(document).ready(function() {
    $(".assign_main").click(function() {

        var assign_this_id = $(this).attr('id');

        $.ajax({
            type:"post",
            url:"imagecontrol.php",
            data: { assign_this_id:assign_this_id,
                    image_assign:1},
            success: function(response) {
                alert("Success");
            }
        })
    })
});

</script>

Answer 1

The success method is only called when a HTTP 200 or HTTP 304 is returned, therefore you may need to double check to see if this is actually the case.

This can be done in the 'Inspector' panel in most modern web browsers, usually under the 'Network' tab.

You can also add a error: function() {} event handler to catch any HTTP 4xx / 5xx codes.

Answer 2

Use done() instead of it :

$.ajax({
    type: "post",
    url: "imagecontrol.php",
    data: {
        image_id: image_id,
        image_remove: 1
    }
}).done(function(response) {
    $('#image_' + image_id).fadeOut(400);
    showUploader();
);

Answer 3

Try and alert the error which for sure is there:

$(document).ready(function() {
    $(".assign_main").click(function() {

        var assign_this_id = $(this).attr('id');

        $.ajax({
            type:"post",
            url:"imagecontrol.php",
            data: { assign_this_id:assign_this_id,
                image_assign:1},
            success: function(response) {
                alert("Success");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                 alert(textStatus + " " + errorThrown);
            }
        })
    })
});

This will show you if there is something wrong in your PHP code