getting dropdownchecklist working with knockoutJS - javascript

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.

Related

Populate big array list to drop down using Angular

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

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:
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"

Dojo FilteringSelect - disable an item

Is it possible to disable an item from a FilteringSelect using a store?
The documentation shows an example of disabling an item, but only if HTML markup is used, and nothing is mentioned about select widgets using a datastore.
Looking at the source doesn't give any clues either.
If it matters the version of dojo used is 1.9
After viewing at the source code I notice that dijit/form/Select extends from dijit/form/_FormSelectWidget which in fact makes it possible to retrieve and disable options in a select.
dijit/form/FilteringSelect however does not extend from the same widget but rather from a normal dijit/form/MappedTextBox (because of the typing abilities). Because of this, I'm quite sure it's impossible to do it out of the box, using a store or not (I wasn't able to get it to work without a store and didn't find such an example at the reference guide).
If you really need such a feature, I would suggest looking at the code of dijit/form/FilteringSelect, dijit/form/Select and dijit/form/_FormSelectWidget and trying to extend from one (ore multiple ones) and implement these features by yourself. The only question I ask myself is that, if this functionality isn't implemented by default, there might be a reason behind it.

Extjs databinding model properties to ui elements (textbox)

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

How to keyboard down or up between dropdown "options"?

I have a custom built ajax [div] based dynamic dropdown.
I have an [input] box which; onkeyup, runs an Ajax search which returns results in divs and are drawn back in using innerHTML. These divs all have highlights onmouseover so, a typical successful search yields the following structure (pardon the semi-code):
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
It works.
However, I'm missing the important functions behind regular HTML elements. I can't keyboard down or up between "options".
I know javascript handles keyboard events but; I haven't been able to find a good guide. (Of course, the follow-up question will end up being: can I use <ENTER> to trigger that onclick event?)
What you need to do is attach event listeners to the div with id="results". You can do this by adding onkeyup, onkeydown, etc. attributes to the div when you create it or you can attach these using JavaScript.
My recommendation would be that you use an AJAX library like YUI, jQuery, Prototype, etc. for two reasons:
It sounds like you are trying to create an Auto Complete control which is something most AJAX libaries should provide. If you can use an existing component you'll save yourself a lot of time.
Even if you don't want to use the control provided by a library, all libraries provide event libraries that help to hide the differences between the event APIs provided by different browsers.
Forget addEvent, use Yahoo!’s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.
If that article goes over your head have a look at this documentation first and then re-read the original article (I found the article made much more sense after I'd used the event library).
A couple of other things:
Using JavaScript gives you much more control than writing onkeyup etc. attributes into your HTML. Unless you want to do something really simple I would use JavaScript.
If you write your own code to handle keyboard events a good key code reference is really handy.
Off the top of my head, I would think that you'd need to maintain some form of a data structure in the JavaScript that reflects the items in the current dropdown list. You'd also need a reference to the currently active/selected item.
Each time keyup or keydown is fired, update the reference to the active/selected item in the data structure. To provide highlighting information on the UI, add or remove a class name that is styled via CSS based on if the item is active/selected or not.
Also, this isn't a biggy, but innerHTML is not really standard (look into createTextNode(), createElement(), and appendChild() for standard ways of creating data). You may also want to see about attaching event handlers in the JavaScript rather than doing so in an HTML attribute.

Categories

Resources