jquery: ajax request not working

I am getting no responses when I try to fire this ajax request from jquery:

/********************************
CHANGE USER SETTINGS
*********************************/

$(".submitUserSetting").live('click', function() {

    //get values
    var department = $("#us_department").val(); 
    var sortOrder = $("input[@name=us_sortOrder]:checked").val();

    $.ajax({
        type: "POST", 
        url: "lib/includes/updateUserSettings.php",
        data: "empname=" + empname + "&department=" + department + "&sortOrder=" + sortOrder,
        success: function(data) { 
            alert(data);
        }
    });


});

I mean nothing. No javascript errors, no errors on the MySQL query, not even POST data in the console.log. Just a taunting batch o' silence. Even if I comment out all the code in the PHP page and just echo the data I sent over to it, nothing. Here's the PHP page (the class exists, the functions work, I'm using them on a dozen or so other pages)

 <?php

    require_once("../classes/mysqlconnect.php");
    $db = new dbconnect();
    $db->makeConnections("TimeSheetManager");

    $empname = $_POST['empname'];
    $department = $_POST['department'];
    $sortOrder = $_POST['sortOrder'];


    //get the department id
    $dQuery = "SELECT id FROM departments WHERE department = '" . $department . "'";
    $dResults = $db->getResults($query); 
    if (mysql_num_rows($dResults) > 0) { 
        while($rows = mysql_fetch_array($dResults) { 
            $deptID = $rows['id'];
        }
    } 


    //update database
    $query = "UPDATE users SET `department` = '" . $department "', `displayOrder` = '" .        $sortOrder . "' WHERE username = '" . $empname . "'"; 
    $results = $db->getResults($query); 

    if ($results) { 
        echo "!success"; 
    } else { 
        echo "!fail"; 
    }

    ?>

Here's the form code:

<div id="userSettingsForm">
        <form name="userSetting">
            <p><label for="sortOrder">Display Order:</label></p>
            <p class="userSettingElement">Oldest First&nbsp;<input type="radio" name="us_sortOrder" value="asc">&nbsp;&nbsp;Newest First&nbsp;<input type="radio" name="us_sortOrder" value="dsc"></p>
            <p><label for="us_department">Department:</label></p>
            <p class="userSettingElement">
                <select id="us_department" name="us_department">
                <option value="null">Select A Department</option>
                <?php 

                    $query = "SELECT * FROM departments";
                    $results = $db->getResults($query);

                    while($row = mysql_fetch_array($results)){
                        if (count($results) > 0) { 
                            //get department and id
                            $department = $row['department'];
                            $deptID = $row['id'];

                            print "<option value=\"" . $deptID . "\">" 开发者_StackOverflow社区. $department . "</option>";
                        }
                    }

                ?>
                </select>
            </p>
            <p><a href="javascript:void(0);" class="submitUserSetting btn">Submit</a></p>
        </form>
    </div>

Thanks for all the help and suggestions. I rebooted Firefox and the error was in empname, I wasn't setting it (doh!). Beluga was on to that but it took a bit for it to dawn on me. Wish I could award everyone with the answer.

How can you tell you're not getting an error? Add an error handler to your .ajax() call:

$.ajax({
    type: "POST", 
    url: "lib/includes/updateUserSettings.php",
    data: "empname=" + empname + "&department=" + department + "&sortOrder=" + sortOrder,
    success: function(data) { 
        alert(data);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         alert(errorThrown);
    }
});

OK, some more investigation shows that the error is actually in a peculiar combination of pieces of code that you are using.

Apparently, href="javascript:void(0)" prevents event propagation. The event is triggered on the element itself (so handlers bound with .click(fn) work) but ancestor elements are not notified of the event.

Since you are using the .live() method, which relies upon event propagation, this doesn't work here.

I would suggest the following instead:

<a href="#" class="submitUserSetting btn">Submit</a>

and JS:

$(".submitUserSetting").live('click', function(e) {
    e.preventDefault(); // disable the link action

    [snip]
});

See jsFiddle demonstrating this.

The issue is the way you send the data.

Try enclosing the property in { } 's and changing the variable format to

{ "propertyName" : "value", "propertyName" : "value" } 

i.e

 data: { "empname" : empname ,"department" : department, "sortOrder" :sortOrder }

alternatively if it is a form you can even say

data : { $("#form").serialize() }

you need to return some value in your php function

data: "empname=" + empname + "&department=" + department + "&sortOrder=" + sortOrder,

define empname in your call which is missing.

this gives you Uncaught ReferenceError