Friday, February 20, 2009

Select Box Factory 2.2j (improvements)

Note: the latest version is 2.2.1j, which allows for images and text in the dropdown at the same time, and allows images to appear in the toggle.

The improvements to 2.2j (also included in 2.2.1j) are explained below.

I've been tinkering with SelectBoxFactory (Help Guide) mainly because I have been getting
some feedback and want to provide some real world use cases. The tool did not come out of the box with any hooks to accept onChange events, and many people asked how they could "retrieve" the values of the dropdown.

The result is SelectBoxFactory 2.2... (or 2.2j, same thing for now - from now on always in jQuery unless someone needs it in mooTools). Its a modest improvement, but one that I think will enable more people to use it, and to me thats a more important change.

So what can you do? Based on code that is now in the internal.js file, the following examples are now available...

With selectBoxItemHook(), you can now write any code you want to run as soon as someone or some code selects an item in the select box. This applies to dropdowns and single-select items. Its very simple, but entirely critical, since this interface is not exposed to the external world. Now it is.

With gatherAllChoices() I show how you can use the method _gatherChoices(type) to collect values from a particular dropdown. Because you may have various data requirements, the type argument can be any delimiter, or "array" as text, or "json" as text. The output of selections will come in that format. The purpose of gatherAllChoices() is to show that you can create one place where all dropdowns on the screen are collected (say, as part of a form).

When you call externalClick, a new event on the dropdown, it will cause the dropdown to make a selection for you but it won't cause the dropdown to open and close, which it would do, thinking that a user was touching it. Its actually an important addition if you think about it. This way you can make programmatic calls using selectBoxItemChooser(), another demo. selectBoxItemChooser is an example of code you might write that will select items for you based on another component. (The example here is a month button on a calendar that when pressed, triggers selects the next month in the dropdown for the user).

This is just the start of the use cases, and it is small, but the changes i made to the codebase are powerful and should enable you to really take these to the next step. See the updated sections in the (Help Guide) for more information.

14 comments:

web said...

There is a lot of competition in outsourcing software development, as there are many firms across the globe catering to clients looking for outsourcing their work. What is good is that the takers can choose the best from the lot. http://www.infysolutions.com.

corpix said...

Hi!How can i get 'id' of selected item, using you jQuery plugin??
Sorry my bad English

corpix said...

Hi, how can i get 'id' of selected item, using your 'Select Box Factory'?
Sorry my bad English

Anonymous said...

Nice job! It has everything I need and more. But what about speed? It turns out to slowdown quite fast as a selectmultiple type with 300 options (which I need in my case). Especially when selecting more options.

Another neat feature (not urgent for me btw ;-) would be selectmultiple with ctrl+mousedrag support. You already have ctrl/shift+mouseclick support.

Wolf said...

Hi, i have a problem,
I use your select box factory in a ajax list with each line contain one select box factory but when i clicked one, this update the rest of selects too if are visibles, then do not yet know how to click the select the correct select box.

this is the code for dinamic select box:


var dropdownType = eval("var dropdownType" + countRow + " = new sFac({id : \"dropdownTypeAno" + countRow + "\",container : \"selectAno" + countRow + "\",selectionImagePath: \"../../../includes/JQuery/selectboxfactory/images/\",coreImages : [\"clear.gif\",\"eraser.gif\"],eraser: true,width: 120,toggleStyle : \'closed\',type : \'dropdown\',choices :["+contador+"]});");


later for the events select i create this click because I did not understand the gatherAllChoices,etc:


$(".uiSelectBoxStack").click(function(){

$("#data"+countRow).attr('alt',$(".uiSelectBoxChoiceSelected").text());

loadPage(eval("document.formulario.data"+countRow))
});


thaxs!
ventas.wolf@gmail.com

skube said...

Nice plugin, but at 51kb it is way too big!

Максим said...

Newest version doesn't work in Firefox with xhtml-doctype too... What can be the problem?

Anonymous said...

Hi UIGuy,

thanks for providing Select Box Factory. It's great and the new version is a worthy improvement over 2.0.

One comment on setting "selectionImagePath" in your examples. It took me some time to find out that your examples set this option explicitly. This is not reflected in the javascript code quoted in <pre> but only in the original javascript code embedded in the web page.

I copied an example quoted on the example page. In the quoted source code this option is missing. So the example did not work as expected. After copying the original javascript code, they worked.

Thanks.
Dan

Jamal said...

Dear UiGuy, I have been struggling for the past 4hours trying to get the simple list box to show on my page. It sounds simple, but why does it not show. When I tried to debug the code from your selectboxfactory.html, the offending code seems to be with the divs that are specified in the other table(that's what it appears to be). I would post the code that I think is having a problem but I cannot post HTML. Please help.

Thanks.


Not sure what to make of this, but I am lost as to what to do next. Especially since it appears as if it is really easy to get going, however trials have proven otherwise. Please help me through this.

Thanks.

Jamal said...

Putting the code in an html page or a jsp page does not seem to work. I have even taken the source from selectboxfactory.html and tried to work backwards, but something still seems to be missing. Can you publish some basic instructions for using this with a blank jsp or html page?

Thanks.

Ethemba said...

I am trying to use your amazing script inside Joomla. As Joomla use mootools, if its not a big effort can i have the mootools version?

I need also to create various selectbox, but i can´t join all the scripts as they are generated dinamically. Only the first one works. Can you please tell me how must i write the function to have it in different parts along the body?

Thnak you very much for your help and wonderful script.

Alberto said...

Hello
How can i have select box factory under mootools? You offer it in the text and i need it to integrate it in joomla.
Thank you very much

Zash said...

Hi, great script. Can you also do dynamic option lists (ie car makes in 1st selector, and car models from the selected car make in 2nd selector)? Thanks

Mahmoud said...

hi,,

i used your great plugin & it's a nice one.
my problem is that, providing a preselected sfac.
i can't use the javascript data option, i can only use the inline elements i tried to put in select="true", selected="true" & state="1", but i didn't work.
what is the way to do so??

rgrds ||| Mahmoud