Coldfusion bind and jquery serialize problem.

if your resultsformcheck.cfm requires a value in S_CountrySub1 select to be selected in order to display correct results, then edit the change() event binding to check that S_CountrySub1 select has a value before calling the doSearch function:

$("#S_Country, #S_CountrySub1").change(function(){
  if($("#S_CountrySub1").val() > 0) doSearch();
});

i would also recommend changing bindonload attribute of S_CountrySub1 select to 'false' to avoid unnecessary calls to cfc...

NOTE:
just changing the change() event binding to bind it only to S_CountrySub1 - i.e. changing it to $("#S_CountrySub1").change(function(){doSearch();}); - *might* achieve the same result.

just keep in mind that, with related selects, cf fires a change() event on child cfselect 'behind the scenes' every time the parent cfselect changes. this may or may not pose a problem, depending on how you treat cases of child cfselect having no values related to selection in parent cfselect...

Azadi

Hi azadi.
The problem is after the parent  makes a selection f.e Germany the child Berlin  and than the parent France and the child --ALL--(the first option in child,It can be ----select something---).The resultsformcheck is looking for France and Berlin because first is the function serialize.So i can't change it to work only if the child is changing or if the child is 0

i see, yes...

it looks like the only way to go is to bind the doSearch function to only the second (child) cfselect change() event (and maybe on change of parent cfselect just hide the numberOfResults container).

this is how i would likely do it:

$("#S_CountrySub1").change(function(){
  if($(this).val() > 0) doSearch();
});
$("#S_Country").change(function(){ $("#numberOfResults").hide(); });
doSearch = function()  {
  $("#numberOfResults").hide();
  $.get('search/resultsformcheck.cfm',$('#SearchForm').serialize(),
    function(data,status) {
      $("#numberOfResults").html(data).show();
  });
  return false;
}

doSearch function will now execute only when a change is made in the child cfselect, and only when its value is > 0 (assuming the values in your child cfselect are numeric)

Azadi

Something is missing.
When i change from england to france (in my example) i would like to see how many results i have for --all-- France.With your last code it is not!

ah, that's different from what i understood from your question..

do not use form.serialize() then. instead, pass the cfselects' values to your doSearch() function (with 0 as child cfselect value when invoked in parent cfselect's change() event).
the data attribute for $.get() will have to be constructed manually instead of using serialize() method.

try this:

$(document).ready(function() {
      $("#S_Country").change(function(){
            doSearch($(this).val(), 0);
      });
      $("#S_CountrySub1").change(function(){
            doSearch($("#S_Country").val(), $(this).val());
      });
});
doSearch = function(p,c)  {
      $("#numberOfResults").hide();
      if (p > 0) {
            var d = 'S_Country='+p+'&S_CountrySub1='+c;
            $.get('resultsformcheck.cfm', d,
                  function(data,status) {
                        $("#numberOfResults").html(data);
                        $("#numberOfResults").show();
            })
      }
      return false;
}

Azadi

Azadi please take a look here:
http://carbay.selfip.com/test/
it is still not working as i would like too

your resultsformcheck.cfm throws an "Element VLANGID is undefined in APPLICATION" error...

Azadi

It is working for me now
Please try again

nope, still same error...

see this url for example:
http://carbay.selfip.com/test/resultsformcheck.cfm?S_Country=35&S_CountrySub1=0

Azadi

i have no errors
But can you check the index.cfm page to see what happens for every call?

ok, i figured out why i was getting an error and you were not:
Cookie      LANG=

the above is from the request headers sent by my browser. notice that the cookie has no value assigned to LANG. i guess your browser does have a value for LANG in the cookie, and that's why you did not see the error which i still see.

anyway, here is what your resultsformcheck.cfm page returns: <span id="numberOfResults">0</span>

you must have an element with id="numberOfResults" in your page if you want to call show() and hide() events on it! this span that resultsformcheck.cfm returns does NOT get automatically added to your page's DOM. you need to call .append() or .appendTo() on it to insject it into the DOM, and only then you can call .show() on it.

instead of doing what you are doing, add an <div id="numberOfResults" style="display:none"></div> in your page where you want to display the number of results, and change your resultsformcheck.cfm to return just a number of results, without any html markup.

Azadi

OK azadi.
That was stupid of me.
Now test:
parent  Greece .You will get 15.
Select anything in the child (Macedonia-remains 15).

Than return to parent All.
Nothing is shown.Should be something >= 15 normally.
On page load should it be the same too when parent and child are --All--

>> Than return to parent All. Nothing is shown.

that's correct. the code i posted assumed you didn;t want to show any results for "All" selected in the parent cfselect. for some reason i thought that's how you wanted it... sorry.

just change your doSearch() function to this:

doSearch = function(p,c)  {
  $("#numberOfResults").hide();
  var d = 'S_Country='+p+'&S_CountrySub1='+c;
  $.get('resultsformcheck.cfm', d,
    function(data,status) {
    $("#numberOfResults").html(data);
    $("#numberOfResults").show();
  })
  return false;
}

also, my code will send S_CountrySub1=0 as parameter to resultsformcheck.cfm when the selection in parent cfselect changes - make sure your query accounts for this (i.e. when url.S_CountrySub1 eq 0, then do not include sub-region limiting in the query's WHERE clause)

Azadi

As far i can understand you are sending the default value of the child (0) changing the parent.Very good.
That what remains is to get on page load the results for all  and all azadi.

Azadi here is my final code.
I have added the onload function but there is an error in the debug :http://carbay.selfip.com/test/resultsformcheck.cfm?S_Country=undefined&S_CountrySub1=undefined

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<cfparam name="Form.S_Country" default="">
<cfparam name="Form.S_CountrySub1" default="">
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>

<body onLoad="doSearch();">
<cfset vlangid=2>

<cfform name="SearchForm" id="SearchForm">
<cfselect name="S_Country" 
          id="S_Country" 
          bind="cfc:test.com.country.getMain(#vlangid#)" 
          bindonload="true"
          value="Country_Id" 
          display="Country_Text"/>
<cfselect name="S_CountrySub1"
           class="selectleftbig"
           id="S_CountrySub1"
           display="CountrySub1_Text"
           value="CountrySub1_Id" 
           BindOnLoad="false"
           bind="cfc:test.com.country.getSub1({S_Country},#vlangid#)"
           />

          </cfform>          <div id="numberOfResults" style="display:none"></div>
<script>
$(document).ready(function() {
      $("#S_Country").change(function(){
            doSearch($(this).val(), 0);
      });
      $("#S_CountrySub1").change(function(){
            doSearch($("#S_Country").val(), $(this).val());
      });
});
doSearch = function(p,c)  {
  $("#numberOfResults").hide();
  var d = 'S_Country='+p+'&S_CountrySub1='+c;
  $.get('resultsformcheck.cfm', d,
    function(data,status) {
    $("#numberOfResults").html(data);
    $("#numberOfResults").show();
  })
  return false;
}
</script>
</body>
</html>

Select allOpen in new window

>> <body onLoad="doSearch();">

first our doSearch() function now requires 2 arguments (values of parent and child selects)
second, onLoad() event will likely fire BEFORE the selects are populated with data, and thus the selects will have no values to pass to doSearch() function.

better trigger change() event of parent select like i posted above.

Azadi

My -all- option in parent has value (-3).
You are passing null.Can you change this please?

It is working.
I was wondering if i could change the resultsformcheck page .
I did add this on the top:
<cfif url.S_Country EQ 'null'>
<cfset Url.S_Country = 0>
</cfif> and this is working too.

Azadi
You did have a difficult day with all this.

I will be back with this situaton to handle more complecated forms that i did handle until now with the serialize function.
Thank you for your help.

Thank you again
regards
panos

>> I was wondering if i could change the resultsformcheck page

yep, that will work, too.
but i thought your default S_Country value was -3, not 0...

Azadi

It is -3.
Typo mistace!
Sorry