Coldfusion - jquery - related selects and default values

Panos
Panos used Ask the Experts™
on
Hello experts.
I need help with my three selects.
I'm using jquery and i'm loading the select boxes via ajax call in html data format(i prefer this because i 'm using option group in another page).
i use the dogetSubfirst function to get the getsubfirst_1 select.
and the dogetSubsecond function (that i'm loading too in the getberufefirstsub_1 div) to get the getsubsecond_1 select.
The problem i have is that the dogetSubsecond function does not fire when i have a default value for the first child select getsubfirst_1.
I have specified in my example my default values:
<cfparam name="Form.Berufe_1" default="4">
<cfparam name="form.getsubfirst_1" default="5">
<cfparam name="form.getsubsecond_1" default="2420">
I get the first and the second select but not the third with option value 2420.
Any help?
<cfparam name="Form.Berufe_1" default="4">
<cfparam name="form.getsubfirst_1" default="5">
<cfparam name="form.getsubsecond_1" default="2420">

<!--- here the last jquery --->
<!--- here the query --->
<fieldset>
        <label for="Berufe_1" class="form-text">Main</label>
           <select  name="Berufe_1" id="Berufe_1">
             <option value="-1" <cfif form.Berufe_1 EQ -1>selected="selected"</cfif>>select</option>
            <cfoutput query="q_Beruf">
             <option value="#Berufe_ID#" <cfif listfind(q_Beruf.Berufe_ID,form.Berufe_1)>selected="selected"</cfif>>#Berufe_Text#</option>
            </cfoutput>
              <option value="19999" <cfif form.Berufe_1 EQ 19999>selected="selected"</cfif>>other</option>
              </select>
         </fieldset>

<div id="getberufefirstsub_1"></div><br />
<div id="getberufesecondsub_1"></div>
<script  type="text/javascript">           
$(document).ready(function() {
		$("#Berufe_1").change(function(){dogetSubfirst();});
}); 
function dogetSubfirst()  {
	    var b1 = $("#Berufe_1").val();
		var df1 = '<cfoutput>#form.getsubfirst_1#</cfoutput>';
		var df2 = '<cfoutput>#form.getsubsecond_1#</cfoutput>';
		var vl = 3;
		$("#getberufefirstsub_1").hide();
		var d1 = 'Berufe_1='+b1+'&default_1='+df1+'&default_2='+df2+'&vlangid='+vl;
        $.get('Search/Includes/handlerincludes/getsubfirst.cfm',d1,  
function(data,status) {
		$("#getberufesecondsub_1").hide();
		$("#getberufefirstsub_1").show();
		$("#getberufefirstsub_1").html(data)
      })
   return false;
} 
</script>

<!--- getsubfirst.cfm: --->
<cfparam name="url.berufe_1" default="">
<cfparam name="url.vlangid" default="">
<cfparam name="url.default_1" default="">
<cfparam name="url.default_2" default="">
<!--- here the query --->
<fieldset>
   <label for="getsubfirst_1" class="form-text">1.First Sub</label>
   <select id="getsubfirst_1" name="getsubfirst_1">
   <option value="-1" <cfif form.getsubfirst_1 EQ -1>selected="selected"</cfif>>select</option>
    <cfoutput query="getBerufefirstsub">
    <option value="#subfirstprofi_id#" <cfif listfind(getBerufefirstsub.subfirstprofi_id,form.getsubfirst_1)>selected="selected"</cfif> >#Subfirstprofi_text#</option>
    </cfoutput>
    <option value="19999" <cfif form.getsubfirst_1 EQ 19999>selected="selected"</cfif>>other</option>
   </select>
   
   </fieldset>
   <script  type="text/javascript">
   $(document).ready(function() {
        $("#getsubfirst_1").change(function(){dogetSubsecond();});
});
function dogetSubsecond()  {
	      var b1 = $("#Berufe_1").val();
		  var s1 = $("#getsubfirst_1").val();
		  var df2 = '<cfoutput>#url.default_2#</cfoutput>';
		  var vl = 3;
		  $("#getberufesecondsub_1").hide();
		  var d2 = 'Berufe_1='+b1+'&getsubfirst_1='+s1+'&default_2='+df2+'&vlangid='+vl;
          $.get('Search/Includes/handlerincludes/getsubsecond.cfm',d2,
	           function(data,status) {
						 $("#getberufesecondsub_1").show();
				         $("#getberufesecondsub_1").html(data)
                })
        return false;
}
</script>
<!--- getsubsecond.cfm --->
<cfparam name="url.Berufe_1" default="">
<cfparam name="url.getsubfirst_1" default="">
<cfparam name="url.vlangid" default="">
<cfparam name="url.default_2" default="">
<cfif isNumeric(url.default_2)>
  <cfset form.getsubsecond_1 = #url.default_2#>
</cfif>
<!--- here the query --->
<fieldset >
   <label for="getsubsecond_1" class="form-text">2. Sub second</label>
    <select id="getsubsecond_1" name="getsubsecond_1">
    <option value="-1"<cfif form.getsubsecond_1 EQ -1>selected="selected"</cfif>>select</option>
    <cfoutput query="getBerufesecondsub">
    <option value="#BerufeSubSecond_ID#" <cfif listfind(form.getsubsecond_1,getBerufesecondsub.BerufeSubSecond_ID)>selected="selected"</cfif>>#BerufeSubSecond_Text#</option>
    </cfoutput>
    <option value="19999" <cfif form.getsubsecond_1 EQ 19999>selected="selected"</cfif>>other</option>
   </select>
  </fieldset>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Do you have a webpage anywhere online I could look at?

It is very hard to debug by just looking at the code.

Thanks

Author

Commented:
I will make a test page for you.
Please wait few minutes

Author

Commented:
StaticVortex:
i must close the link.
Do you have made your tests?
Commented:
I solved the problem.
It was a little complicated for me.
I did use in the parent page two functions on window loading  where i use the default form values (def):
$(window).load(function(){dogetSubfirst_def();dogetSubsecond_def();
});
function dogetSubfirst_def()  {
             var b1 = '<cfoutput>#form.Berufe_1#</cfoutput>';
            var s1 = '<cfoutput>#form.getsubfirst_1#</cfoutput>';
            var vl = <cfoutput>#vlangid#</cfoutput>;
            $("#getberufefirstsub_1").hide();
            $("#loader1").removeClass("hidden");
            var d1 = 'Berufe_1='+b1+'&getsubfirst_1def='+s1+'&vlangid='+vl;
        $.get('../../test/testrelated7/getsubfirst.cfm',d1,
function(data,status) {
            $("#loader1").addClass("hidden");
            //$("#getberufesecondsub_1").hide();
            $("#getberufefirstsub_1").show();
            $("#getberufefirstsub_1").html(data)
      })
   return false;
}

function dogetSubsecond_def()  {
                var b1 = '<cfoutput>#form.Berufe_1#</cfoutput>';
              var s1 = '<cfoutput>#form.getsubfirst_1#</cfoutput>';
              var s2 = '<cfoutput>#form.getsubsecond_1#</cfoutput>';
              var vl = <cfoutput>#vlangid#</cfoutput>;
              //$("#getberufesecondsub_1").hide();
              $("#loader1B").removeClass("hidden");
              var d2 = 'Berufe_1='+b1+'&getsubfirst_1def='+s1+'&getsubsecond_1def='+s2+'&vlangid='+vl;
          $.get('../../test/testrelated7/getsubsecond.cfm',d2,
                 function(data,status) {
                                 $("#loader1B").addClass("hidden");
                                     $("#getberufesecondsub_1").show();
                                 $("#getberufesecondsub_1").html(data)
                })
        return false;
}
The rest now is easy to handle:
i pass the getsubfirst_1def and getsubsecond_1def url values to handle the selected values in the child selects.

The dogetSubfirst and dogetSubsecond functions are the same but without the df1 , df2 values that are not any more needed.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial