Coldfusion bind and jquery serialize problem.

Hello experts.
I have two related cfselects with cf binding function and a dosearch function using serialize function from jquery.
Both functions are working fine but the problem is that when i make a change in the parent select ,first executes the serialize function and than the binding.So i have not the correct results because the values from the child select are not correct(it is passing the values before changing).
Any help to solve this problem?
<cfset vlangid=1>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<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="true"
           bind="cfc:test.com.country.getSub1({S_Country},#vlangid#)"
           />

          </cfform>
<script>
 $(document).ready(function() {
        $("#S_Country,#S_CountrySub1").change(function(){doSearch();});
        }); 
      function doSearch()  {
		  $("#numberOfResults").hide();
          $.get('search/resultsformcheck.cfm',$('#SearchForm').serialize(), 
	           function(data,status) {
						 $("#numberOfResults").show();
				         $("#numberOfResults").html(data)
                })
        return false;
}
</script>

Open in new window

LVL 2
PanosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
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
0
PanosAuthor Commented:
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
0
azadisaryevCommented:
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

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

PanosAuthor Commented:
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!
0
azadisaryevCommented:
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
0
PanosAuthor Commented:
Azadi please take a look here:
http://carbay.selfip.com/test/
it is still not working as i would like too
0
azadisaryevCommented:
your resultsformcheck.cfm throws an "Element VLANGID is undefined in APPLICATION" error...

Azadi
0
PanosAuthor Commented:
It is working for me now
Please try again
0
azadisaryevCommented:
nope, still same error...

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

Azadi
0
PanosAuthor Commented:
i have no errors
But can you check the index.cfm page to see what happens for every call?
0
azadisaryevCommented:
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

0
PanosAuthor Commented:
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--
0
azadisaryevCommented:
>> 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
0
PanosAuthor Commented:
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.
0
PanosAuthor Commented:
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>

Open in new window

0
azadisaryevCommented:
this should do it (complete js code):

$(document).ready(function() {
  var country = $("#S_Country");
  country.change(function(){
    doSearch($(this).val(), 0);
  });
  $("#S_CountrySub1").change(function(){
    doSearch(country.val(), $(this).val());
  });
  country.change(); //this will trigger change() of parent on pageload and show results
});
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;
}

Azadi
0
azadisaryevCommented:
>> <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
0
PanosAuthor Commented:
My -all- option in parent has value (-3).
You are passing null.Can you change this please?
0
azadisaryevCommented:
>> My -all- option in parent has value (-3). You are passing null.Can you change this please?

actually, i am not passing null...
i guess that in this case even $(document).ready() fires BEFORE the cfselects are populated...

you can either edit doSearch() function to assign -3 and 0 as arguments values if actual values are NULL:
doSearch = function(p,c)  {
  if (p == null) p = -3;
  if (c == null) c = 0;
  $("#numberOfResults").hide();
  var d = 'S_Country='+p+'&S_CountrySub1='+c;
  $.get('resultsformcheck.cfm', d,
    function(data,status) {
      $("#numberOfResults").html(data);
      $("#numberOfResults").show();
  })
}

or you can use ajaxonload() cf function to execute doSearch() function after the cfselects are populated.
mind you, this will require you to put ALL your js code into <head> section of your page...

a) move all your js into <head> section
b) add this js function:
searchOnLoad = function(){ doSearch(-3,0); }
c) add this just before the closing </body> tag:
<cfset ajaxonload('searchOnLoad')>

Azadi
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
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.
0
PanosAuthor Commented:
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.
0
PanosAuthor Commented:
Thank you again
regards
panos
0
azadisaryevCommented:
>> 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
0
PanosAuthor Commented:
It is -3.
Typo mistace!
Sorry
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.