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.
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"
Related
I am facing an issue. I have a collection of object with size around 22K records. I need to bind this to an select element. Binding is working fine for small collection but such a big collection is freezing UI until its bind completely.
Please suggest the best I can do here....
First thing that pops to mind is using one-way data binding. That is accomplished by appending :: in front of your HTML variables like so
{{::someVar}}
This way, angular will not include someVar in its watchers.
If that is still not enough for you then you might consider writing a special type of select for your own purposes which can use something like ClusterizeJS behind it.
ClusterizeJS allows only rendering a few elements on the screen and re-rendering on scroll such that the user will never know that not all the elements already exist in the select. Couple this with a search bar and you've got yourself a very fast select.
In general it is not wise to populate a <select> element with such a huge number of records. That applies no matter which framework you are using (although it would be especially bad with Angular and two way data binding).
Where you want the user to be able to select from a large number of options, I would recommend using an 'autocomplete' style of interface, where the user types a few characters and the client fetches options that match what they have typed so far.
For example, you could use Angular-UI select
I have a searchbox on which I initialize typeahead when I click on it, to some data from the server. Depending on the current page, I need to show/hide a footer in the search dropdown.
I went for the approach to destroy the typeahead and then recreate it, according to my needs. In this way, I also refresh the data from server, in case there's something changed.
For destroy I use this this.$("#searchQuery").typeahead('destroy'); right at the top of the function that needs to initialize the typeahead, but the problem is that the menu is not destroyed. If I look at the dom, there are 4-5 or even more typeahead menu created.
So my question is, how can I properly 'reinitialize' a typeahead menu?
I forgot to mention I am using twitter typeahead
You don't need to reference jQuery via this like you showed here
this.$("#searchQuery")
You should just do
$("#searchQuery").typeahead("destroy");
Without seeing more of an example I would say your problem might be because this inside your function is being bound to a different object than the one you were expecting.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Your line is inside your function so you can not guarantee that this will be Window and you have no need to use it in this case.
If this is not the problem then please provide a full html and javascript example, preferably on JsFiddle.
I'm still running into the same problem, filters and functions inside ng-repeat being called all the damn time.
Example here, http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview, anytime you change something on a single row, someFilter filter is called 1000 times.
Apparently it's because any change on a child scope bubbles up to its parent, causing $digest to run, causing all filters to run(https://stackoverflow.com/a/15936362/301596). Is that right? How can I prevent it from happening in my particular case?
How can I make it run only on the item that has changed?
In my actual use case the filter is called even when the change is not even on the items of ng-repeat, it's so pointless and it is actually causing performance problems..
// edit cleared all the unnecessary stuff from the plunker
http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview
This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?
From another answer:
This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
And the answer it references: How does data binding work in AngularJS?
Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.
You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/
I'm trying to get dropdownchecklist jquery plugin working with ko. I've wired up custom binding handler but dropdown won't populate with options. Please check my fiddle: http://jsfiddle.net/amitava82/wMH8J/11/
Appreciate your help. Thanks!
This is because you create dropdown before binding KnockoutJS. How does this dropdown work? It creates additional divs and spans which copy the content of select and create nice looking list. After that bindings are applied and they modify the select (as they should), but dropdown is not updated, because this library is kind of static, i.e. it copies the content of select only at the time of calling.
I've updated your jsFiddle so you can see temporary fix. What I mean is that it works now, the binding is applied before creating dropdown. The only problem is that changing options field in viewModel won't affect the dropdown. What you probably need to do is to use subscribe method. You have to monitor changes to options field and if they occur you have to recreate the dropdown. That's an easy way at least.
#freakish answer will work for most static content, but for anything dynamic using templates, for example if or foreach bindings, or you need to support underlying data updates, such as more checkbox options "suddenly" becoming available, it will not work.
An example of a really simple $.button binding apply which can be used to wrap the more simple jQuery calls. It's a simple matter of adding more members to controls to make them available in bindings.
The case with jQuery Dropdown Check List is a bit tricky however, since you obviously want to use the built in options handler, but you need to run $.dropdownchecklist after the options handler has run, as it creates the DOM elements that jQuery depends on. By wrapping the built in options handler, we are always called in the correct context.
In my experience of usage (our project makes use of about 10-15 custom bindings), you'll average about 10-20 lines of actual JS. If you start ballooning into +100 lines, I find it's a good idea to refactor, and rethink. I hope this helps some :-) I've been using Knockout for a few months now at a major UI implementation project at work, I've really learned alot, and I'm amazed at this stuff.
I need binding the model properties to view elements directly bidirectional way automatically stay sync. If I make a change in a textbox I need run bussiness logic in the related model, and model properties changes automatically refresh the related ui elements.
Im new in Extjs, but I guess it doesnt support it, JQXB seem to be the right way, does anyone could point me a sample using JQXB with Extjs?
With jQXB it's very simple to stay in sync.
jQXB is striclty related to jQuery so I assume your needs can be satisfied only with jQXB and jQuery.(Extjs is no more required);
In your case you need only to use jQuery to catch textbox changes and then, supposing your datamodel already binded to controls via jQXB datasource, invoke doBind method to refresh controls after changing data model.
At http://www.jqxb.altervista.org you can see in demos pages that already do something like that.
At http://jqxb.codeplex.com ( Download Section) you can examples and in Documentation Section you can find other examples.
Alternatively you can post an example of what you want to obtain or write directly a post or an email on jQXB site.
regards