Jquery AJAX response not working

Question

For some reason this jQuery function is not working properly. Here's my code... the response div is not updating with my response.

WHEN AJAX FUNCTION IS CALLED

if ($action == 'sort') {

    echo 'getting a response';
    return 0;

}

JQuery FUNCTION

function sort() {

    $.ajax({
        type: "POST",
        url: "contributor_panel.php?action=sort",
        data:"sort_by=" + document.getElementById("sort_by").value +
             "&view_batch=" + document.getElementById("view_batch").value,
        success: function(html){

            $("#ajaxPhotographSortResponse").html(html);

        }
    });

}

DIV TO REPLACE

<div id="ajaxPhotographSortResponse"></div>

Answer 1

Instead of concatenating the arguments you are passing to your server side script I would recommend you using the following syntax. Also if you already use jQuery you no longer need the document.getElementById function:

$.ajax({
    type: "POST",
    url: "contributor_panel.php?action=sort",
    data: { sort_by: $("#sort_by").val(), view_batch: $("#view_batch").val() },
    success: function(html){
        $("#ajaxPhotographSortResponse").html(html);
    }
});

or even shorter using the .load() function:

$('#ajaxPhotographSortResponse').load('contributor_panel.php?action=sort', 
    { sort_by: $("#sort_by").val(), view_batch: $("#view_batch").val() });

Answer 2

Move the action=sort into the data property of the $.ajax function. You're making a POST request, but appending data onto your query string like a GET request. Data only appends to the query string if it's a GET request.

Example:

$.ajax({
        type: "POST",
        url: "contributor_panel.php",
        data: {action:'sort', sort_by: $('#sort_by').val(), view_batch: $('#view_batch').val()},
        success: function(html){

            $("#ajaxPhotographSortResponse").html(html);

        }
    });

http://api.jquery.com/jQuery.ajax/