Issues while migrating from 1.5.6 to 2.x
2 views
Skip to first unread message
CjK
Oct 4, 2010, 9:33:52 AM10/4/10
to RightJS
Hi,
I decided to bite the bullet and upgrade my non-trivial RightJS-1.5.6
based Rails-App to RJS 2.0. I must say that the process is much more
pleasant than I first feared it would be - kudos for staying mostly
compatible while adding so much more functionality.
On the modern browser side, things look pretty good. The available
migration-docs proved helpful and changes were straight-forward.
However, our dear friend IE6 is not all happy.
First off, I'm now getting a dreaded "Error: Could not set the
selected property. Unspecified error." in IE6 when updating several
selectboxes in succession. This seems to be a well known (timing-) bug
in IE6 (e.g. see http://benhollis.net/experiments/browserdemos/ie6-adding-options.html
or http://csharperimage.jeremylikness.com/2009/05/jquery-ie6-and-could-not-set-selected.html).
But in 1.5.6 RightJS seemed to have protected us from this bug, now
this protection seems gone. Was this accidental.
For now, I added an empty "try-catch" around my $
('selectbox_1').update('<option.....</option>') lines, which works but
was not necessary before.
Second, while migrating I changed
$('div-id').className
to
$('div-id').get('class')
as noted in the docs, which works well in FF but fails in IE6 (returns
null or undefined).
Some advice would be appreciated here.
Thanks,
Claus
I decided to bite the bullet and upgrade my non-trivial RightJS-1.5.6
based Rails-App to RJS 2.0. I must say that the process is much more
pleasant than I first feared it would be - kudos for staying mostly
compatible while adding so much more functionality.
On the modern browser side, things look pretty good. The available
migration-docs proved helpful and changes were straight-forward.
However, our dear friend IE6 is not all happy.
First off, I'm now getting a dreaded "Error: Could not set the
selected property. Unspecified error." in IE6 when updating several
selectboxes in succession. This seems to be a well known (timing-) bug
in IE6 (e.g. see http://benhollis.net/experiments/browserdemos/ie6-adding-options.html
or http://csharperimage.jeremylikness.com/2009/05/jquery-ie6-and-could-not-set-selected.html).
But in 1.5.6 RightJS seemed to have protected us from this bug, now
this protection seems gone. Was this accidental.
For now, I added an empty "try-catch" around my $
('selectbox_1').update('<option.....</option>') lines, which works but
was not necessary before.
Second, while migrating I changed
$('div-id').className
to
$('div-id').get('class')
as noted in the docs, which works well in FF but fails in IE6 (returns
null or undefined).
Some advice would be appreciated here.
Thanks,
Claus
Nikolay Nemshilov
Oct 4, 2010, 9:40:21 AM10/4/10
to RightJS
Hey Claus,
Thanks for getting back with the feedback, I'll check what's the beef
with the IE6, I had changed that part a bit, probably lost something
in transition. (btw could you drop the whole example please? so I
could safely replicate the issue)
regarding the class name, #get('className') should work I think. But
we probably could have a dedicated method for that as well. btw, do
you know there is #hasClass method?
Cheers,
Nik
On Oct 4, 5:33 pm, CjK <claus.klingb...@gmail.com> wrote:
> Hi,
>
> I decided to bite the bullet and upgrade my non-trivial RightJS-1.5.6
> based Rails-App to RJS 2.0. I must say that the process is much more
> pleasant than I first feared it would be - kudos for staying mostly
> compatible while adding so much more functionality.
>
> On the modern browser side, things look pretty good. The available
> migration-docs proved helpful and changes were straight-forward.
>
> However, our dear friend IE6 is not all happy.
>
> First off, I'm now getting a dreaded "Error: Could not set the
> selected property. Unspecified error." in IE6 when updating several
> selectboxes in succession. This seems to be a well known (timing-) bug
> in IE6 (e.g. seehttp://benhollis.net/experiments/browserdemos/ie6-adding-options.html
> orhttp://csharperimage.jeremylikness.com/2009/05/jquery-ie6-and-could-n...).
Thanks for getting back with the feedback, I'll check what's the beef
with the IE6, I had changed that part a bit, probably lost something
in transition. (btw could you drop the whole example please? so I
could safely replicate the issue)
regarding the class name, #get('className') should work I think. But
we probably could have a dedicated method for that as well. btw, do
you know there is #hasClass method?
Cheers,
Nik
On Oct 4, 5:33 pm, CjK <claus.klingb...@gmail.com> wrote:
> Hi,
>
> I decided to bite the bullet and upgrade my non-trivial RightJS-1.5.6
> based Rails-App to RJS 2.0. I must say that the process is much more
> pleasant than I first feared it would be - kudos for staying mostly
> compatible while adding so much more functionality.
>
> On the modern browser side, things look pretty good. The available
> migration-docs proved helpful and changes were straight-forward.
>
> However, our dear friend IE6 is not all happy.
>
> First off, I'm now getting a dreaded "Error: Could not set the
> selected property. Unspecified error." in IE6 when updating several
> selectboxes in succession. This seems to be a well known (timing-) bug
> in IE6 (e.g. seehttp://benhollis.net/experiments/browserdemos/ie6-adding-options.html
CjK
Oct 4, 2010, 10:35:28 AM10/4/10
to RightJS
Hi Nik,
> Thanks for getting back with the feedback, I'll check what's the beef
> with the IE6, I had changed that part a bit, probably lost something
> in transition. (btw could you drop the whole example please? so I
> could safely replicate the issue)
I haven't managed to come up with an isolated test-case yet. This is
kind of hard, since it's a timing-issue and only pops up when filling
several successive select-boxes with option-data. I have an each-loop
doing that in my app but the class is huge and depends on a lot of
other code/markup, so it's not easily extracted.
Here is the relevant function, but it won't work on it's own.
Basically, in it we're building large selectbox-option-lists and then
use #update() to put them in the DOM. BTW I'm using underscore.js here
(though in this case the same could be done using RightJS of course):
[...]
updateGroupCtx: function(event) {
// Transform control-data into hashes with 'key' and 'value' keys,
except
// for plain arrays, which are kept untouched. Also, add an empty
// selection-entry ("-") to each selectbox-list
_.each(event.for_controls, function(ctrl) {
var data = event.data[ctrl + 's'], field_mapping =
this.Options[ctrl + '_fld_map'] || this.Options.default_fld_map;
var selector_element_name = ctrl + '_selector_element',
selector_element_id = this[selector_element_name].getId();
var options = isHash(data.first()) ?
this.addEmptySelectionTo(this.convert_to_options_data(reduceSingleObjectArray(data,
[field_mapping.value_field, field_mapping.id_field]),
field_mapping.value_field, field_mapping.id_field)) :
this.addEmptySelectionTo(data);
try {
// Convert data to selectbox-options and update selectbox with
the
// results
$(selector_element_id).update(new
SelectOptions(options).value());
} catch(e) {
// @PENDING: IE6-workaround:
// the above statement had to wrapped in a try-catch-block
only, because
// of IE6 timing-issues throwing "Error: Could not set the
selected
// property. Unspecified error." when setting selectbox-data +
// selected-property.
}
// Tell the world a selectbox was just updated with new content
$(document).fire(selector_element_name + '_updated', {target: $
(selector_element_id)});
}.bind(this));
},
[...]
I volunteer to be a beta-tester if you need someone to tell you if
it's now working or not.
> regarding the class name, #get('className') should work I think. But
> we probably could have a dedicated method for that as well. btw, do
> you know there is #hasClass method?
What used to be f.get('class')..... now is f._.className because the
former works in FF but not in IE, the latter works in both.
And yes, #hasClass is nice, but in this case I need the actual string:
(from my application.js):
function getGlobalId() {
var f = $('form_model_edit');
return f._.className.split('_').walk('slice', '0', '1').join('') +
f.select('form')[0].get('action').split('/').last();
}
Also, I had to change
[...]
var target = $(event.target);
$(target.form).send({.....}); # gives an error in RightJS >= 2.0
[...]
to
[...]
var target = $(event.target);
$(target._.form).send({.....});
[...]
Which works well, but perhaps there is more elegant way without
resorting to the native DOM-object?
Thanks,
Claus
> Thanks for getting back with the feedback, I'll check what's the beef
> with the IE6, I had changed that part a bit, probably lost something
> in transition. (btw could you drop the whole example please? so I
> could safely replicate the issue)
kind of hard, since it's a timing-issue and only pops up when filling
several successive select-boxes with option-data. I have an each-loop
doing that in my app but the class is huge and depends on a lot of
other code/markup, so it's not easily extracted.
Here is the relevant function, but it won't work on it's own.
Basically, in it we're building large selectbox-option-lists and then
use #update() to put them in the DOM. BTW I'm using underscore.js here
(though in this case the same could be done using RightJS of course):
[...]
updateGroupCtx: function(event) {
// Transform control-data into hashes with 'key' and 'value' keys,
except
// for plain arrays, which are kept untouched. Also, add an empty
// selection-entry ("-") to each selectbox-list
_.each(event.for_controls, function(ctrl) {
var data = event.data[ctrl + 's'], field_mapping =
this.Options[ctrl + '_fld_map'] || this.Options.default_fld_map;
var selector_element_name = ctrl + '_selector_element',
selector_element_id = this[selector_element_name].getId();
var options = isHash(data.first()) ?
this.addEmptySelectionTo(this.convert_to_options_data(reduceSingleObjectArray(data,
[field_mapping.value_field, field_mapping.id_field]),
field_mapping.value_field, field_mapping.id_field)) :
this.addEmptySelectionTo(data);
try {
// Convert data to selectbox-options and update selectbox with
the
// results
$(selector_element_id).update(new
SelectOptions(options).value());
} catch(e) {
// @PENDING: IE6-workaround:
// the above statement had to wrapped in a try-catch-block
only, because
// of IE6 timing-issues throwing "Error: Could not set the
selected
// property. Unspecified error." when setting selectbox-data +
// selected-property.
}
// Tell the world a selectbox was just updated with new content
$(document).fire(selector_element_name + '_updated', {target: $
(selector_element_id)});
}.bind(this));
},
[...]
I volunteer to be a beta-tester if you need someone to tell you if
it's now working or not.
> regarding the class name, #get('className') should work I think. But
> we probably could have a dedicated method for that as well. btw, do
> you know there is #hasClass method?
former works in FF but not in IE, the latter works in both.
And yes, #hasClass is nice, but in this case I need the actual string:
(from my application.js):
function getGlobalId() {
var f = $('form_model_edit');
return f._.className.split('_').walk('slice', '0', '1').join('') +
f.select('form')[0].get('action').split('/').last();
}
Also, I had to change
[...]
var target = $(event.target);
$(target.form).send({.....}); # gives an error in RightJS >= 2.0
[...]
to
[...]
var target = $(event.target);
$(target._.form).send({.....});
[...]
Which works well, but perhaps there is more elegant way without
resorting to the native DOM-object?
Thanks,
Claus
Nikolay Nemshilov
Oct 4, 2010, 12:09:04 PM10/4/10
to rig...@googlegroups.com
I'll check the #update method, basically it should be awright because there are tests for that, and you might double check your code, but it might be my fuckup.
In any case. I think you should make a feature request on lighthouse for Element#getClass, you might even implement it yourself and send me a pull request. it's pretty simple and will make you involved ;)
To other things
> Also, I had to change
> [...]
> var target = $(event.target);
> $(target.form).send({.....}); # gives an error in RightJS >= 2.0
No need to call `$(event.target), the `target` property is already a wrapper, and because of that you have the error, coz `form` in this case is not the dom-input unit property it's the Input dom-wrapper method that returns a wrapped form it belongs to, so your code should as simple as that
event.target.form().send({.... });
--
Nik
> Thanks,
> Claus
>
> --
> You received this message because you are subscribed to the Google Groups "RightJS" group.
> To post to this group, send email to rig...@googlegroups.com.
> To unsubscribe from this group, send email to rightjs+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/rightjs?hl=en.
>
--
Nikolay V. Nemshilov
The Web-Developer
CjK
Oct 5, 2010, 4:47:12 AM10/5/10
to RightJS
Nik,
On Oct 4, 6:09 pm, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> I'll check the #update method, basically it should be awright because there are tests for that, and you might double check your code, but it might be my fuckup.
>
I wouldn't have mentioned it if it would (not) work for both IE _and_
FF. But if something works in one browser but not in the other, I find
it suspicious :-}
> In any case. I think you should make a feature request on lighthouse for Element#getClass, you might even implement it yourself and send me a pull request. it's pretty simple and will make you involved ;)
Hey, I might even try this.
> No need to call `$(event.target), the `target` property is already a wrapper, and because of that you have the error, coz `form` in this case is not the dom-input unit property it's the Input dom-wrapper method that returns a wrapped form it belongs to, so your code should as simple as that
>
> event.target.form().send({.... });
Ah, I see. I didn't know about #form() yet, only used the form-
property so far. Thanks!
Claus
On Oct 4, 6:09 pm, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> I'll check the #update method, basically it should be awright because there are tests for that, and you might double check your code, but it might be my fuckup.
>
FF. But if something works in one browser but not in the other, I find
it suspicious :-}
> In any case. I think you should make a feature request on lighthouse for Element#getClass, you might even implement it yourself and send me a pull request. it's pretty simple and will make you involved ;)
> No need to call `$(event.target), the `target` property is already a wrapper, and because of that you have the error, coz `form` in this case is not the dom-input unit property it's the Input dom-wrapper method that returns a wrapped form it belongs to, so your code should as simple as that
>
> event.target.form().send({.... });
property so far. Thanks!
Claus
Nikolay Nemshilov
Oct 9, 2010, 4:14:27 AM10/9/10
to RightJS
Hi Claus,
I've added the Element#getClass method, will go with the next release.
But I'm not certain about that Element#update issue, your snippet is
rather complex and it's hard to say what's the actual problem. I've
got a suspicion that there is something wrong with this one `new
SelectOptions(options).value()`.
Could you help me a bit here and add some debugging in your code,
kinda like that
try {
$(selector_element_id).update(new SelectOptions(options).value());
} catch(e) {
alert(new SelectOptions(options).value());
}
I need to see the content that causes the issue to repeat the bug
--
Nik
I've added the Element#getClass method, will go with the next release.
But I'm not certain about that Element#update issue, your snippet is
rather complex and it's hard to say what's the actual problem. I've
got a suspicion that there is something wrong with this one `new
SelectOptions(options).value()`.
Could you help me a bit here and add some debugging in your code,
kinda like that
try {
$(selector_element_id).update(new SelectOptions(options).value());
} catch(e) {
alert(new SelectOptions(options).value());
}
I need to see the content that causes the issue to repeat the bug
--
Nik
CjK
Oct 12, 2010, 5:15:59 AM10/12/10
to RightJS
Hi Nik,
> I've added the Element#getClass method, will go with the next release.
Great, thanks!
> But I'm not certain about that Element#update issue, your snippet is
> rather complex and it's hard to say what's the actual problem.
Yep, when I first tried to reproduce the error outside my Rails-
Application using IE6 and my searchform's HTML with the exact same
selectbox-content, I failed. What seems important is that the error
only occurs after several (in my case: 2) selectbox-updates in a row.
I put my selectbox-content online as you wished:
http://gist.github.com/621886
There you can see the content of my five selectboxes. The error
happens when I #update() selectbox #2 (option selected='selected'
value=''>-</option><option value='00'>00</option><option
value='01'>01</option>.......).
So, I suggest in order to reproduce the error you do this:
1. Build a HTML with a form + five selectboxes.
2. In Javascript loop over those selectboxes and fill them with the
content from the gist.
3. Hopefully watch IE6 fail on the second selectbox-update.
As the error is a timing-problem, the loop (e.g. $$('my-
selectboxes').each({selectbox.update('<option>....')});) is important.
It doesn't happen in single updates even if the content is the same as
when the error occured.
Let me know if I can do more.
HTH,
Claus
> I've added the Element#getClass method, will go with the next release.
> But I'm not certain about that Element#update issue, your snippet is
> rather complex and it's hard to say what's the actual problem.
Application using IE6 and my searchform's HTML with the exact same
selectbox-content, I failed. What seems important is that the error
only occurs after several (in my case: 2) selectbox-updates in a row.
I put my selectbox-content online as you wished:
http://gist.github.com/621886
There you can see the content of my five selectboxes. The error
happens when I #update() selectbox #2 (option selected='selected'
value=''>-</option><option value='00'>00</option><option
value='01'>01</option>.......).
So, I suggest in order to reproduce the error you do this:
1. Build a HTML with a form + five selectboxes.
2. In Javascript loop over those selectboxes and fill them with the
content from the gist.
3. Hopefully watch IE6 fail on the second selectbox-update.
As the error is a timing-problem, the loop (e.g. $$('my-
selectboxes').each({selectbox.update('<option>....')});) is important.
It doesn't happen in single updates even if the content is the same as
when the error occured.
Let me know if I can do more.
HTH,
Claus
Nikolay Nemshilov
Oct 12, 2010, 5:37:41 AM10/12/10
to rig...@googlegroups.com
Hi Claus,
Thanks for the data and bug description. I think I know what's the problem now, will try to fix and patch tonight
Nik
CjK
Oct 15, 2010, 10:30:42 AM10/15/10
to RightJS
Hi Nik,
yep, this build looks good. The error in IE6 is gone.
Seems like you nailed this one :)
Thanks!
Claus
On Oct 14, 4:37 pm, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> Hi Claus,
>
> One more version to test 8)
>
> right-olds.js
> 4KViewDownload
>
> right.js
> 43KViewDownload
yep, this build looks good. The error in IE6 is gone.
Seems like you nailed this one :)
Thanks!
Claus
On Oct 14, 4:37 pm, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> Hi Claus,
>
> One more version to test 8)
>
> 4KViewDownload
>
> right.js
> 43KViewDownload
Nikolay Nemshilov
Oct 15, 2010, 10:35:11 AM10/15/10
to rig...@googlegroups.com
Splendid! Will release tomorrow then
--
Nik
Reply all
Reply to author
Forward
0 new messages