Set session variable with select box via jQuery/ Ajax with Coldfusion

Question

Ok so here is my epic journey problem going on for a month now...:

First problem: I was building a form with coldfusion-ajax tags which was the worst mistake ever. IE completely hates it and I was unable to bind anything. YES, my code was correct. I had it verified by many people and many forums. So I have NO IDEA what was wrong.

So coldfusion ajax tags are out of the question..they won't work with my server setup...I don't know. (I don't control my server I work on)

So...now that i'm SOL and crying in my office like a crazy person... I have now decided to go around the problem by using jQuery + Coldfusion.

It isn't working either...

Here is the new problem: I need to have a select box that was pre-populated set a session variable. In other words:

I want to pass a form variable to a page that will set the session variable equal to that form variable...

Note: I'm using CF 8.

Here is my code so far:

form:

<form>
    <select name="DeptCode" id = "dept">
    <option value="NONE" selected>Choose a Department
    <cfoutput query="getDepartments">
    <option value="#DeptCode#">#DeptName#</option>
    </cfoutput>
    </select>
    </form>
    <cfoutput> #session.DeptCode#</cfoutput>

jQuery/Ajax:

<script language = "javascript">
$('#dept').change(
        function() {

            var datas = $('#dept').val();
            $.ajax({
            url: 'url:catch.cfc?method=getDept',
            data: {dept: datas}
            success: function(datas) { alert(datas); }
             });
}); 
</script>

catch.cfc

<cfcomponent output="false">
    <cffunction name="setDept" access="remote" returntype="any">
        <cfargument name="dept" type="any" required="yes">
        <cfset session.DeptCode = #argument.dept#>
        <cfreturn />
    </cffunction>
</cfcomponent>

Answer 1

I'm not sure if you've updated things since posting your code, or maybe there were typos during transcription -- but there are some syntax problems:

$('#dept').change( function() {
  var datas = $('#dept').val(); // always yields a result in real code?
  $.ajax({
    url: 'catch.cfc?method=getDept', // You repeated "url:" in your url
    data: {dept: datas}, // added missing final comma
    success: function(datas) { alert(datas); }
  });
}); 

Just a thought.