.select on a combo

[speed...@gmail.com]

Hello,

I'm trying my secod post here - I never got my first to end up on the
list, so l'ts try it through the google groups website directly now...

I'm having an issue that I hope someone here can help me with...

I have the following code:

HTML:
----------
<select id="orderOption[hjkhhjh.ch]" domain="hjkhhjh.ch"
name="orderOption[hjkhhjh.ch]">
<option value="N100005" domain="hjkhhjh.ch" prepaid_total="18.50 EUR"
postpaid_total="23.15 EUR">Registreer voor 1 Jaar</option>
<option value="N100006" domain="hjkhhjh.ch" prepaid_total="36.30 EUR"
postpaid_total="45.40 EUR">Registreer voor 2 Jaar</option>
<option value="N100009" domain="hjkhhjh.ch" prepaid_total="53.40 EUR"
postpaid_total="66.60 EUR">Registreer voor 3 Jaar</option>
<option value="N100007" domain="hjkhhjh.ch" prepaid_total="87.00 EUR"
postpaid_total="109.00 EUR">Registreer voor 5 Jaar</option>
<option value="N100008" domain="hjkhhjh.ch" prepaid_total="170.50 EUR"
postpaid_total="213.50 EUR">Registreer voor 10 Jaar</option>
</select>

What I'm trying to do is when a user selects an option from the list,
the prepaid_total and postpaid_total price should show on a different
div...

this is the javascript that worked up until a few weeks ago when I
upgraded to the new release of prototype:
JAVASCRIPT:
--------------------

orderOptions.observe('change', function(event) {
alert('clicked for ' + orderOptions.getAttribute
('domain'));
rec = $('domainSearchResult').select('[domain="' +
orderOptions.getAttribute('domain') + '"]');
tdPrepaid = rec[0].select('[f="prepaid"]');
tdPostpaid = rec[0].select('[f="postpaid"]');

alert(orderOptions.getValue());
selectedItem = orderOptions.select('[value="' +
orderOptions.getValue() + '"]');
alert(selectedItem);
tdPrepaid[0].update(selectedItem[0].getAttribute
('prepaid_total'));
tdPostpaid[0].update(selectedItem[0].getAttribute
('postpaid_total'));
});

The two first alerts give me what I expect, the third one just returns
NOTHING... I used to be able to select the options with the value
like that, but it seems to be no longer working...

Any idea?

Also - I know adding attributes to the elements like that is not the
way to go - I just don't know how I can do this otherwise :(

[david]

Hi speedpacket,

> this is the javascript that worked up until a few weeks ago when I
> upgraded to the new release of prototype:

I've tested with with prototype v1.6.0.2 and 1.6.1 and both does not
return anything.
But I'm not sure, because I have to modify the code you give.
Please, send us a link, or a whole code, we'll have to test and guess
how to set variables like orderOptions, domainSearchResult, ...

> Also - I know adding attributes to the elements like that is not the
> way to go - I just don't know how I can do this otherwise :(

There is the new Element.store which is done for that. give it a try.
see: http://api.prototypejs.org/dom/element.html#store-class_method
It could save a lot depending to what you want do.

--
david

On 18 sep, 14:17, "speedpac...@gmail.com" <speedpac...@gmail.com>
wrote:

[speed...@gmail.com]

Hi,

First and foremost - thanks for the feedback! It's MUCH appreciated!
To test, you can go to www.flexin.be

Once arrived on that site, log in using te...@speedpacket.com / test123
(top right)

Then go to http://flexin.be/site/en/ProductSubscriptionDomain/addToCart/index.html
(it will return an error if you are not logged in yet)

Next, search for a domain name; if it is available, it will result in
a row in the table which gives you some order options; change the
order option to two years for instance - that is where we run into
this issue...

There may still be some debugging code on the page, but it should give
you an idea as to what we want to achieve (the prices shown should
reflect that for the period selected...)


Thanks again for the feedback! Very much appreciated!

David.

[Marko]

Hi,

Instead of adding attributes on element you can rewrite it like this:

<option value="N100005" domain="hjkhhjh.ch" prepaid_total="18.50 EUR"
postpaid_total="23.15 EUR">Registreer voor 1 Jaar</option>

=>

<option value="code|domain|pre_total|post_total">Registreer voor 1 Jaar</option>

=>

<option value="N100005|hjkhhjh.ch|18.50 EUR|23.15 EUR">Registreer voor 1 Jaar</option>


You can get value like this:

selectedItem = orderOptions.select('[value="' +
orderOptions.getValue() + '"]');

=>
As this is equal to orderOptions you can do:

selectedItem = $F(this)



Then you can split it and get array:

selectedItem.split("|")



You can also rewrite your selects like this:

Instead of: <td f="prepaid">
write just: <td class="prepaid">

tdPrepaid = rec[0].select('[f="prepaid"]');

=>
tdPrepaid = rec[0].select('.prepaid');



This way you will preserve valid HTML

I think you get idea how to rewrite it.

- Marko

[speed...@gmail.com]

Hi Marko,

Great idea on combining the different attributes into one value
attribute with the pipe character. I'll consider it for a later
version, because this obviously also requires changes on the
serverside as we'll end up with other values being sent to the
server...

The class tihngy I knew and was on my todo list to change to that...

Unfortunately it doesn't fix my issue at this time (unless I'm
misinterpreting what you are saying...)
Have you gotten a chance to look into that biyt of code not giving me
the result I believed I should have received (and did before I
upgraded...)

Thanks again for the feedback - I really do appreciate it!

David.

[jacknife]

hi,
have you tried to use the Element class methods readAttribute/
writeAttribute instead that ordinary getAttribute/setAttribute?
i recently experienced some issues using getAttribute to retrieve
setted parameters.

Federico



On Sep 18, 7:33 pm, "speedpac...@gmail.com" <speedpac...@gmail.com>
wrote:

[speed...@gmail.com]

Hi Federico,


the readattroibute isn't giving the issues; that works fine, and the
alert does indeed return the expected value.
The line in the code no longer working is

selectedItem = orderOptions.select('[value="' + orderOptions.getValue
() + '"]');

where orderOptions is the combo, and the selectedItem should be an
option element which has additional attributes set to it...

Thanks for the feedback though.

Any more ideas, as I'm lost with this issue.

David.

[speed...@gmail.com]

Hi,

Does noboday know what I should do to have this fixed?
I don't understand what is wrong with the code - if anything
really... :(

Once again thanks to all for your kind assistance!

[Daniel Rubin]

speed...@gmail.com wrote:
> Hi Federico,
>
>
> the readattroibute isn't giving the issues; that works fine, and the
> alert does indeed return the expected value.
> The line in the code no longer working is
>
> selectedItem = orderOptions.select('[value="' + orderOptions.getValue
> () + '"]');

Hi David,

Element.select() returns a list of elements, so you may want to try down
instead:
selectedItem = orderOptions.down('[value="' + orderOptions.getValue()
+ '"]');

Furthermore, I'm not sure that .select() on a SELECT element is not
something very different from Element.select() (a SELECT being somewhat
akin to an INPUT -- but I don't know really).

So I hope and feel rather confident that the .down() will help.

Have fun
----Daniel

[speed...@gmail.com]

Hi again!

Thanks for the feedback. It's very much appreciated! (what would we
all do without those around here giving their spare time to help
others out... I hope one day I'll be able to help some people out on
this fantastic list!)

Nevertheless, I tried doing what you suggested, but I'm going
completely CRAZY here, I think...

This is what I got so far:

alert(orderOptions); // ==> returns my combobox html element perfectly
alert(orderOptions.getValue()); // ==> returns the current value
perfectly
alert(orderOptions.down('[value="' + orderOptions.getValue() +
'"]')); // ==> returns "undefined"

The combo itself has the following HTML:

<select id="orderOption[qsfqsfqsf.cn]" domain="qsfqsfqsf.cn"
name="orderOption[qsfqsfqsf.cn]">
<option value="N100005" domain="qsfqsfqsf.cn" prepaid_total="20.20
EUR" postpaid_total="25.25 EUR">Registreer voor 1 Jaar</option>
<option value="N100006" domain="qsfqsfqsf.cn" prepaid_total="39.60
EUR" postpaid_total="49.50 EUR">Registreer voor 2 Jaar</option>
<option value="N100009" domain="qsfqsfqsf.cn" prepaid_total="58.20
EUR" postpaid_total="72.75 EUR">Registreer voor 3 Jaar</option>
<option value="N100007" domain="qsfqsfqsf.cn" prepaid_total="95.00
EUR" postpaid_total="118.75 EUR">Registreer voor 5 Jaar</option>
<option value="N100008" domain="qsfqsfqsf.cn" prepaid_total="186.50
EUR" postpaid_total="233.00 EUR">Registreer voor 10 Jaar</option>
</select>

I have no idea what is causing this behaviour, as it used to work
perfectly before...

Is anyone else having ideas?

David.


On Sep 21, 7:22 pm, Daniel Rubin <dru...@dimedis.de> wrote:

[Marko]

Hi,

Before you go totally crazy please create self-contained-test-page and I will return you working version.

- Marko

[speed...@gmail.com]

Hi Marko,


This should do it, I believe:
-----------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<!-- TODO: Obviously, change this if you're using a different encoding
-->
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript'>
document.observe('dom:loaded', function() {

// TODO: Delete this and the button below if you don't need them
// for what you're trying to replicate
orderOptions = $('orderOption[test.com]');

orderOptions.observe('change', function(event) {
alert('Combobox selected: ' + orderOptions.identify());

alert('Current value for the combo is ' + orderOptions.getValue());

alert('Selected Item: ' + orderOptions.down('[value="' +
orderOptions.getValue() + '"]'));
}
});




</script>
</head>
<body><div>

<select id="orderOption[test.com]" domain="test.com" name="orderOption
[qsfqsfqsf.cn]">
<option value="N100005" domain="test.com" prepaid_total="20.20 EUR"

postpaid_total="25.25 EUR">Registreer voor 1 Jaar</option>

<option value="N100006" domain="test.com" prepaid_total="39.60 EUR"

postpaid_total="49.50 EUR">Registreer voor 2 Jaar</option>

<option value="N100009" domain="test.com" prepaid_total="58.20 EUR"

postpaid_total="72.75 EUR">Registreer voor 3 Jaar</option>

<option value="N100007" domain="test.com" prepaid_total="95.00 EUR"

postpaid_total="118.75 EUR">Registreer voor 5 Jaar</option>

<option value="N100008" domain="test.com" prepaid_total="186.50 EUR"

postpaid_total="233.00 EUR">Registreer voor 10 Jaar</option>
</select>

</div></body>
</html>

-----------------------------------------------

Just change the combo...

[Marko]

Hi David,

There is just one missing ) before the end }); but this code works for
me in FF 3.5 with prototype version 1.6.1.

I've made pastie version of it and changed from alert to console.log for
Firebug.

I've also made small function that returns selected option as I think it
should be done.

Here is pastie:
http://pastie.org/624937

- Marko

[speed...@gmail.com]

Hi Marko,

Thanks again for this.
I'm starting to lose my faith here, but this still hasn't been
resolved...

Basically, this is (still) my issue:

THIS:

alert(orderOptions.getValue());

returns a CORRECT value, indicating that I do have an option under the
combo that returns a good value... So when TRYING to select the
<option for that orderOptions combo like this:

selectedItem = orderOptions.select('[value="' + orderOptions.getValue
() + '"]');

selectedItem is simply empty.
I have gone through the code a dozen times, I have changed my code to
use googleapis in stead of my own hosted version because I was afraid
it may have been screwed, but still have NO result whatsoever.

Anyone else have an idea?
It used to work, but suddenly stopped working :(

On 21 sep, 20:52, Marko <gm.ma...@gmail.com> wrote:
> Hi David,
>
> There is just one missing ) before the end }); but this code works for
> me in FF 3.5 with prototype version 1.6.1.
>
> I've made pastie version of it and changed from alert to console.log for
> Firebug.
>
> I've also made small function that returns selected option as I think it
> should be done.
>
> Here is pastie:http://pastie.org/624937
>
> - Marko
>

[Marko]

Hi again :-)

I forgot to mention that your code works in FF 3.0, and not 3.5. Sorry my mistake. Have you tried my code on pastie?

It will return you option element on change.

- Marko

[speed...@gmail.com]

OMG - I have been tesing on 3.5 for ages now LOL
How did you find out? Is there gonna be a patch soon? How can I go
around this?

Your code doesn't work on 3.5 either, does it?

David.

On 28 sep, 17:19, Marko <gm.ma...@gmail.com> wrote:
> Hi again :-)
>
> I forgot to mention that your code works in FF 3.0, and not 3.5. Sorry
> my mistake. Have you tried my code on pastie?
>
> It will return you option element on change.
>
> - Marko
>

[Marko]

I have both 3.0 and 3.5 installed and sometimes I start 3.0 instead of 3.5 :-).

I've wrote workaround function:

 /*
    * Function retuns selected option for given select element.
    * As options are stored as array on select element, and we can get
    * selected element as select.selectedIndex we can retrieve selected element like this
    * select[select.selectedIndex]
    * variable select is just for example
    */
    function $Fe(element){
     var el = $(element)
     return el[el.selectedIndex]
    }

 console.log($Fe(orderOptions))
 

This part will return to  you selected option element.

So use it instead of your old code.

Marko

[speed...@gmail.com]

My hero!!!!!
Let's hope prototype just creates function to get the option from a
combo :)

Thanks so much for this - it drove me MAD!

On 28 sep, 17:28, Marko <gm.ma...@gmail.com> wrote:
> I have both 3.0 and 3.5 installed and sometimes I start 3.0 instead of
> 3.5 :-).
>
> I've wrote workaround function:
>
>  /*
>     * Function retuns selected option for given select element.
>     * As options are stored as array on select element, and we can get
>     * selected element as select.selectedIndex we can retrieve selected element like this
>     * select[select.selectedIndex]
>     * variable select is just for example
>     */
>     function $Fe(element){
>      var el = $(element)
>      return el[el.selectedIndex]
>     }
>
>  console.log($Fe(orderOptions))
>
> This part will return to  you selected option element.
>
> So use it instead of your old code.
>
> Marko
>

[Marko]

No problem. I'm glad I have helped you.