Passing a variable via jquery.load works on page load bu not form field change.. (Using ColdFusion 8)

I have a a form that pulls in one of it's select box fields from an external document (using ColdFusion)

On loading the primary cfm doc I run the following jquery:

 <cfoutput>
    $("div##repDiv").load("inc/incFormFields.cfm ##RepIDDiv",{clientID:"#form.bid_ClientID#",selectedList:"#replist#"});</cfoutput>

This works great on page load - it send the correct client id and selectedList to the proper portion of the document and loads it. The incFormFields.cfm file contains the following section that returns the select box:

<div id="RepIDDiv">
<cfparam name="clientID" default="defaultClientID">
<cfparam name="selectedList" default="defaultRepID">


<cfset clientReps = application.clientService.getRepsByClientID(clientID)>
<label for="rep_ID">Client Rep(s)</label>           
<cftry>
            <select name="rep_ID" id="rep_ID" multiple="multiple" size="5">
                <option value=""> - - - </option>
                <cfoutput query="clientReps">
                    <option value="#rep_ID#" <cfif listfind(selectedList,rep_ID)>selected="selected"</cfif><cfif rep_Active NEQ true>style="color:##cecece"</cfif>>#rep_FirstName# #rep_LastName# (#rep_JobTitle#) </option>
                </cfoutput>
            </select>       
</div>

So I KNOW the whole process works as coded - because the page loads correctly and away we go.

However I also have the following code to reload incFormFields.cfm page:

<cfoutput>
$('##client_ID').change(function() {
        var tmpID = $(this).val();
        alert($(this).val())
        $("div##repDiv").load("inc/incFormFields.c开发者_如何学编程fm ##RepIDDiv",{clientID:$(this).val(),selectedList:"#replist#"});
    }); 
</cfoutput>

Now on the surface it looks like it should work. The first thing it does is create an alert with the value of the selected form field - this alert show me the CORRECT select box selected value. However that same value does NOT get passed to the incFormFields.cfm document appropriately (not at all I think)

If I dump the value or clientID in the included file - it is always "defaultClientID".

So the question - why does this work on page load - but NOT onChange()?

I am stumped. Thanks and God Bless! Chris

Here is what I have done instead... I used .get and not .load and removed the ID call since .get will not allow me to load only a portion of the page....

$('##client_ID').change(function() {
$.get("inc/incFormFields.cfm ##RepIDDiv",{clientID:$(this).val(),selectedReps:"#replist#", selectedLoc:"#form.bid_Location#"},
function(data){
$("div##repDiv").html(data);}
);
});

Note: I edited variables while playing b/c I had to provide to select field outputs. So So selectedList became selectedReps and I had to add selectedLoc

Thanks for the help all. Now I will post a new question on how I can load an external file in a jquery modal dialog :)

Be Blessed! Chris

this pointer is context-dependent. In the second snippet $(this) refers to the container = $("div##repDiv"), just refer to your var tmpID instead of $(this).val():

$('##client_ID').change(function() {
    var tmpID = $(this).val();
    $("div##repDiv").load("inc/incFormFields.cfm ##RepIDDiv",{clientID:tmpID,selectedList:"#replist#"});
}); 

If you are going to use a get instead of load, you can still strip out html, try this:

$('##client_ID').change(function() {
$.get("inc/incFormFields.cfm ##RepIDDiv",{clientID:$(this).val(),selectedReps:"#replist#", selectedLoc:"#form.bid_Location#"},
function(data){
$("div##repDiv").html($(data).find('##RepIDDiv'));}
);
});