Codepal

We develop enthralling web experiences.

The 'Select' Problem After Using jqTransform and its Solution

The ‘Select’ Problem After Using jqTransform and its Solution

Recently, I was working on a project which required a customized form with only select boxes. I used jqTransform to customize the form and while working on it I discovered that after transforming the select box into a list of hyperlinks, the ‘change’ method of the select box doesn’t work at all. As ‘on-value-change’ event is a very important function for any drop down list box so here is a very simple solution to manipulate it while using jqTransform.

Live Demo Downloadhttp://www.code-pal.com/wp-content/plugins/download-monitor/download.php?id=6

It would be awesome if you could like us on Facebook or subscribe to our feed...

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ‘select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

What jqTransform does is, it scans the whole ‘select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ‘select’ tag and its content.

This does not create a problem when we use the ‘select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

But after using the jqTransform plugin, the ‘select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.


Discussion 83 Responses

Thanks for the solution above. Very useful. I wonder if you could help with one extra problem? jqtransform seems to ignore the part of a select list. Can you help me find a fix so that they are displayed in the transformed select list???

Any pointers would be much appreciated!

The code seems to have been removed. I was referring to ‘optgroup’ part of a select list

I didn’t get which problem you are referring to? May be you can post a link to an example or something so that I can take a look at it in details?

Hope your problem is solved though :)

Have you tried to create a select list that uses the ‘optgroup’ feature as well as ‘option’? It seems to just ignore these entirely and not build them into the ‘ul’ list. How can I get them to build them in?

I haven’t yet tried that. Will try it out when I get time :)

Hello;
is what you have found a solution for the use of “OptionGroup”?
thank you

Hi. im just wondering if anyone has managed to extend the the jqTransform JS to cover multiselect . currently, the script just bypasses any select lists with the attr of multiple. Im no JS expert though. does anyone have any ideas?

Simon,
Did you ever find a solutino to the JqTransform issue with multiselect?
I’ve googled for a solution but came up empty?

How can I populate a Select after using jqTransform?

You don’t have to populate the select tag after using jqTransform as it automatically transforms the existing ‘option’ tag elements into hyper-links. So if you provide the options from the starting itself using the option tags it won’t be a problem.
OR
You mean that you want to dynamically populate the select box as per some user interaction with the form ?

Yes, I want to dynamically populate the select box.

Well, to do that you would have to select the unordered list of hyperlinks generated by jqTransform and then append a list element containing the hyperlink (your option) to that unordered list.

Can you give me a simple example on how to do that? Just starting with jquery.

Thank you very mauch.

@fcaracol : I work on that just now for a project, give you a feedback when it’s ok.

@fdjulien: Bonjour :) thats great.. I am so caught up with my examinations that am unable to give time to anything else.. :|

Et hop :
http://pastebin.com/tZraxjDX

Have a good day ^^

(if you know how we can control height of child list after show/hide, feedback)

Thanks all for the messages.

My solution for the problem:
http://pastebin.com/wYSgh3hj

jqtransform not working for more than 11 select tags on page

Search
.css({zIndex: 10-index})

and replace just with
.css({zIndex: 999-index})

That’s ok ;)

I’m having a similar issue and have tried adjusting this code for use with window.open for one of my option values. I was wondering if you could provide an example where of three options in a select: cat, dog, and bird- selecting “dog” would popout a new window for an external link. I can’t seem to get the live() event to do it correctly.

Thank you for the help.

So what you want to do is, when you select a particular option, a pop up window would open to an external link with respect to the option selected?

Exactly. I have no javascript experience to speak of, but using your guide I did fashion out a script that would test if the option text matched a certain string and, if so, issue a window.open event. The code is probably a little heavy but it works.

However, I would like to figure out how achieve jqtransform functionality for forms located in divs that are loaded dynamically from jquery tabs.

Well, you can enable jqTransform on divs which are loaded dynamically by again calling the jqtransform method on the id or class of that particular form in that dynamically generated div.

Sumeet,

Thank you for that response. I turn up a lot of search results with people having similar issues with dynamically loaded content but unfortunately with no solutions. If you can provide an example of reapplying the jqtransform script to dynamically loaded content, I’m sure the internet will thank you. I know I will.

Hmmm.. I will see what I can come up with it :) Till that time, try reassigning the jqtransform method to the dynamically generated form and maybe reload the page using Ajax? As far as I think, jqtransform is applied when the page is loaded..

Hey Sumeet – I have a, hopefully, painless question for you: How do you get those dropdowns to be all the same width. To give you an example of what I’m after, http://givester.de/ has 9 of these textboxes. Additionally, if you select one of the super-long options, the wording doesn’t extend out of the select box but rather stays inside — something that I’ve had an issue with, using another js method. Well, hope to hear back from you!

I really like what they have done with the drop down options in that site you gave. The really long options fitting properly in the select box is because they have taken an optimum width of the select box such that the longest option that they provide is less than it. I dynamically increased the length of an option (using firebug) and it went outside the select box. By outside I mean, some part of the text got hidden.

Regarding the way they have divided the options into two different divs is very interesting. Any idea how they have done that? I think they either modified the jqTransform code in such a way that when the number of list item goes beyond a particular amount, then they start adding the list items in a new div and so on. Hence, for example, after every 7th list item, a new wrapper is created and so on. They obviously used CSS to bring them all in a horizontal position.

hi,
i am creating a form with jqtransform in which there are lots of select box, at one stage i need to disableselect box how can i do this

Why don’t you just create class called ‘hide’ which has a ‘display : none ‘ property. Whenever you want to disable any select box, just add that class to that particular select box dynamically…

I’ve got the same problem, except that I need the option value, not the text. I wrote that simple code:
$(“div.jqTransformSelectWrapper ul li a”).click(function(){
var index = $(this).attr(‘index’);
var value = $(‘select.jqTransformHidden option:eq(‘+index+’)').attr(‘value’);
window.location.href=value;
});

I had this same problem, but changed it in jqTransform itself (line 268):

var oLi = $(‘‘+ $(this).html() +’‘);

This way all selects for future projects will have the value set as the title attribute of the link.

Ah, it cut out my code…

var oLi = $(‘‘ + $(this).html() + ‘‘);

Hi,

This is a really useful mod – thanks for putting the effort into it :)

I’m trying to find a way to reset a single select (drop down list).
The traditional Javascript would be:
document.getElementById(‘selectname’).selectedIndex = 0;
document.getElementById(‘selectname’).options[0].selected = true;

However, the above has no effect on the jqtransform select as its a list.
Is there a way I can reset the jqtransform select?
If it means doing the about JS (so the form is submitted with the correct values) and then the jqtransform is faked by changing the text and applying the selected style to the 1st li and removing it from the current one?

Hope I’m explaining this okay? lol

Chris,

There are a couple of options.

1. You can call jqTransformReset(); — this will reset all select boxes, radio buttons, and check boxes. This may be too extreme for your case.

2. You can copy the code jqTransform uses to reset the select boxes:

$(‘.jqTransformSelectWrapper select’,f).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function () { $('a:eq(' + sel + ')', this).click(); }); });

Just change the initial jQuery selector to match your specific field, remove the context (the ",f") and have at it. I just tested this and it works.

Chris,

Be warned that my method described above will fire the “change” event for the select box if you have added: “$select.trigger(‘change’);” in at line 281 (as mentioned below).

I’ve tried option 2 but to no avail either :(
Below is the code I used. title is the id placed on the select, and the whole code is on the reset button’s click action:

$(“#reset”).click(function(){
$(‘#title’).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function () { $('a:eq(' + sel + ')', this).click(); }); });
});

Nothing happens. No JS errors either.

okay, think I’ve found the solution. I changed the last part of the code (right before the click action) from ‘sel’ (the current menu selection) to ’0′ i.e. the 1st option in the list which is always the default “Please select an option”. Seems to work resetting all my selects :)

// RESET BUTTON
$(“#reset”).click(function(){
$(‘select’).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq(0)', this).click();});});
});

Chris,

My mistake. jqTransformReset() is not accessible. I threw this line in to get to it:

$.fn.jqTransformReset = jqTransformReset;

And then called it, passing the actual DOM object of the form like so:

$(‘#form1′).each(function(){ $.fn.jqTransformReset(this);});

I noted, however, that this *did not* reset the select box for me. Sorry for the wild goose chase. :(

Only tested under jQuery 1.4, but if you add:

$select.trigger(‘change’);

on line 281 (after “$ul.hide();” and before “return false;”) in the SELECT section, it will fire the event for you.

Thanks for the replies Samuel. jqTransformReset(); would be fine for me, but I cant get it working.

I have a button with an ID of “reset”. and the following in the script tags:

$(“#reset”).click(function(){
$(‘form’).jqTransformReset();
});

I get the error $(‘form’).jqTransformReset() is not a function.

Any ideas?
Thanks again.

Thanks for posting that tip. Very helpful.

Why not bind a change event to the hidden select field that JQTransform.js updates when you select a value from the transformed select? I was doing this with jquery 1.3 and it worked fine and now with 1.4 it’s broken and I’m really not sure why. Any help would be awesome.

Thanks for resolving this issue. However my problem is slightly different and I’m still too new to jQuery to figure it out myself.
I need to display a new field depending on the selection in a drop down box. I had it working before jqTransform but now I need a little help. This is the code I had: http://pastebin.com/1Rf9hw3x

there is a much more elegant solution to the issue. in the javascript find the section dedicated to the select control and change the line

if ($select[0].selectedIndex != $(this).attr(‘index’) && $select[0].onchange) { $select[0].selectedIndex = $(this).attr(‘index’); $select[0].onchange(); }

TO

if ($select[0].selectedIndex != $(this).attr(‘index’)) {$select[0].selectedIndex = $(this).attr(‘index’); $($select[0]).change(); }

Thank you sir. Great solution.

@David Judik

Thank you very much for this snippet. I was using jqtransform on a huge forms where there were 10 select list. I was stucked in validating the select box after applying the jqtransform plugin. I tried to write another small plugin for the select box while I found this snippet. This saved me a lot of time. Cheers :)

@ Matt

Your solution solved my headaches. Concise.
This post falls short because your value may be different than the displayed text like in my case.

Hi Sumeet

Can you maybe have a look at my site http://www.gamtool.com/affiliates-registration.asp I have the dropdown menu on my site. But as soon as click on one of the values the text is hidden. It almost looks like there is an overlay over the Dropdown box.

Your advice would be much appreciated!

Thanks

Hi Everyone,

I tried the above code but its not working for me .When I try to click on select box , page moves upward.Am i missing anything.

I had the same problem but solved it in a simpler way…i think :) I created a function with the code in jquery e.g. function SelectChange(){..code goes here…}, and in the select I used something like ‘onchange=”SelectChange(+this.value)”‘

Got an interesting jqtransform problem. I have a form am styling with jqtransform. There 2 select dropdowns, the second depends on what you select on the first. The first is a vehicle make, when you select the make it populates the vehicle models on the second select using ajax. The script works fine and the vehicle models are populated without a problem however you cant select anything on the models dropdown. Nothing happens when you click on the populated vehicle models. For some reason it seems the click handler on jqtransform doesn’t work when select fields are populated dynamically. Does anyone have an idea how to work around this? Below is my code

function SelectChange(idCat){
$.post(“getvehiclemodel2.php”, {cat: idCat}, function (data) {
$(‘#mymodel option’).remove();
$(‘#models li:not(:first)’).remove();
$(‘#mymodel’).append($(“”).attr(“value”,”").text(“Select A Model”));
$(“#models ul”).css(“display”,”none”);
var x = 1;
$.each(data, function (key, value) {
$(‘#mymodel’).
append($(“”).
attr(“value”,key).
text(key));
$(“#models ul”).append(‘‘+ key +’‘);
x++;
}); //end loop
}, “json”);

}

Hello, I have similar problem as James wrote, so can someone please give solution with livequery or live.. Problem is dynamic (ajax/json) populating target jqtransform select. When i click on populated select, nothing happens. Source select get blocked, and in console window get err: ‘$(“a.selected”, $ul).offset() is null’.
I`m struggled with this for a two days :(

Thanks in advance

The web designer I worked with used a jquery plugin called livequery. Not sure what he did but hopefully that’ll point you in the right direction.

livequery helped. The click function wasn’t working because the dom was already loaded, I tweaked my code and used livequery and it worked. Thanks for the tip

Hi,
When i am using Jqtransform styles in my aspx form, are working fine but when i am using update panel in the page the styles specifically being disappear in the update panel. I dont know why is this happening. can some one help me out?

Thanks for the tip. This is my first time coping with jqTransform’s mangling of my HTML and JS code, and you saved me some time and a headache.

iOS has functionality which basically zooms drop downs for you. JQtransform converts the standard form element into spans. For iPhone only, how can we emulate a standard form drop down so the zoom functionality will occur?

Hi,

I have used jqtransform plugin for creating a registration form, I faced some problems in select box..am very new to designing ..i could not able to give option group in select box…and one more thing when i give popup dialog box for a particular div it doesnt shown that jqtransform method format…hope that anybody will help me to solve this issue….before 18th october 2011

Rani puthoor

Hi,

I have used jqtransform plugin for creating a registration form, I faced some problems in select box..am very new to designing ..i could not able to give option group in select box…and one more thing when i give popup dialog box for a particular div it doesnt shown that jqtransform method format…hope that anybody will help me to solve this issue….before 18th october 2011

Rani puthoor

Hi

Thanks for solution, another approach would be modifying the plugin itself.

Here is what you should modify in your plugin file: “http://pastebin.com/S1CBaQ9e”

Here is the complete source: “http://pastebin.com/Q1pYMKZ2″

HTH

oh that link under my comment is not my blog, plz remove it.
Thanks!

Thanks so much for this! I just spent the last 3 hours trying to fix this by diving into the code, but this works much better!

This page is great by the way, has helped me tremendously. New issue. This all helped me get my ASPX page working with JQtransform using .NET 4.0. I had to put this form on a .NET 2.0 site and now having this issue.

‘length’ is null or not an object. – On dropdowns. Works fine in FF, Chrome, Safari, only gives the error in IE.

Please help.

Currently using this line for the click handler:

if ($select[0].selectedIndex != $(this).attr(‘index’) ) { $select[0].selectedIndex = $(this).attr(‘index’); $select.trigger(“change”);}

I also experienced the same problem and approached it very similar.
What i did do was grab the selected value in the same way as the code example, but the different part i done was I set the “original select boxes” value, and then done a $(el).trigger(‘change’); on the dropdown so that the existing .change() binds would still occur.

Regards,
Paul Dragoonis.

$(‘select.jqTransformHidden’).live(‘change’,function(){
var thiz = $(this);
var text = thiz.find(‘option:selected’).text();
var ul = thiz.parents(‘div.jqTransformSelectWrapper:first ul’);
ul.find(‘a’).removeClass(‘selected’);
ul.find(‘a:contains(“‘ + text + ‘”)’).addClass(‘selected’);
ul.prev().find(‘span’).text(text);
});

After jqtransform the dropdownlist does not worked on keypress. I have it working now on typing some characters but when I press keydown it does not move downwards and nothing happens. Somehow the focus becomes the outer scroll not the scroll on the dropdown. Did someone experience the same problem? Let me know how to fix this. Thanks:)

there is new library I’ve created – csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems, today css3 solves many of those problems and I like the idea of controls being normal controls and looking the same in every browser

https://github.com/pkoretic/csTransPie

It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!

all suggestions are welcome!

Hi there!

I think your solution is really helpful, even if I have a big problem with jqTransForm.. i don’t know if you could help me..

I’m creating a website with Zend Framework. On this website, i have a table where all my items are shown with a sql query.
I used jqTransForm to create and layout some (one to select the type, another to select the nature, and two others)
I would like to take the value of the option selected and send it to the model, in order to select the right thing in my database and order my items by type or nature or else..
But the selected otpion is sent to a div.. and i really don’t know how to use it…

Could someone help me please?
(sorry for my bad english and my explanations..)

hello, thanks for your solution but can you provid this script
daynmic
regards

Luciano - BRAZIL

Thx!!
Save my life..

I Have other problem with jqtransform , the scroll in the select option not show up with me , and make my select option very long
can you help me with this issues please
http://imm.io/piso this is my site
and this is how to be the select option drop down http://imm.io/pitd
thanks

Est ce que vous avez fait appel au feuille de style?

Hello;
is what you have found a solution for the use of “OptionGroup”?
thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>