CODEWITHSUNDEEP
javascriptjquerycoldfusion
user4365796
user4365796

Reputation:

cfselect bind and jquery on events clashing

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:

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.

Upvotes: 0

Views: 242

Answers (1)

Adam Cameron
Adam Cameron

Reputation: 29870

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"

Upvotes: 5

Related Questions