Jquery AJAX response not working

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') {开发者_如何学C

    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>

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/

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() });