cfselect bind and jquery on events clashing

Question

I am using <cfselect>'s bind attribute to bind load a list of states. That bind is associated with another <cfselect> which loads associated cities. Those two work fine.

Now I need to add a third select list. When the first cfselect is changed, I want to pass the value of both cfselect's to jQuery, to load a third list. The third list is a plain html <select>. This is basically a old inherited code so I know mix of both things is a bad idea.

So here is what is happening. The first calls go fine. It passes the correct cityid. The next time I change the state, its state changes through cfselect, but it passes the old cityid rather than new one. This creates an issue for the third drop-down, which does not load the results.

So basically the structure is like this:

First cfselect bind loads states
Second cfselect bind loads the cities based on the stateid passed
Third select gets the state and city values from the first two cfselect's to load zip codes

Now the jQuery code:

$(document).on('change',function() {
   var a = $("#cfselect1").val();
   /* 
      The next line seems to be a problem area. It always fetches 
      the old cityid. Maybe due to the ext js bind is loading 
      later than jquery being first
   */
   var b = $("#cfselect2").val(); 
   $ajax({ajax code here})
});

I hope I made a question clear.

Use the CF UI stuff or use jQuery, but do not use both. Since you are already using jQuery, I would suggest you go with that. The CF UI functionality is poorly implemented, severely limited and outdated. — Scott Stroz

Adam Cameron Adam Cameron · Accepted Answer · 2014-12-18T11:48:13

As you've already au fait with jQuery and can use it, rip the <cfselect> out completely and do the whole lot with a vanilla <select> and jQuery's .ajax() method. This way you remove the clashing.

You have basically run up against the fundamental flaw of using ColdFusion's UI wizards: they are poorly written and do not inter-op with other requirements at all well. <cfselect> is not designed to be implemented in conjunction with other JS technologies. It's basically an evolutionary dead end (and the dead end occurred about ten years ago).

Here is some guidance for ripping out <cfselect> out: "CFSELECT-CHAINED"

cfselect bind and jquery on events clashing

1 Answers