thr3ads.net - Rails spinoffs - IE-only error on serialize(), only when new inputs added with innerHTML [May 2007]

If this information is useful, please help other people find it:
Share via:

Charles St-Pierre

2007-May-17 20:18 UTC

IE-only error on serialize(), only when new inputs added with innerHTML

Hi, I need gurus help.

Prototype.js = 1.5.0
Scriptaculous = 1.7.0

I''ve been trailing a JS error that appears in IE 6 WinXP. Firefox is
ok.

I have a statically generated form. Data is imported by AJAX. Form is
saved with AJAX.
All is good.

Smack in the middle of the form, there is a list of items (sortable
with the help of Scriptaculous). Inside the <LI>s are <input
hidden>s,
registering the orders. Changing those and saving.
All is good.

Next to the list is a <select> providing a list of possible new
additions to the list. You select the item and press a button. A JS
function output a string containing markup for the item and append it
to the innerHTML of the list container <UL>.

function addItem(){
	var list = $(''list'');                                        
//
reference
	var item = document.edition.selectItems.value; // select current
value
	var objItem =
eval(''(''+item.replace(/''/g,''\"'')+'')'');
// transfers
value in JS object
	var addstr = strListItem(objItem);                      // produce
string from other function with
	var currentHTML = list.innerHTML;                    // store old
innerHTML
	list.innerHTML = '''';                                         
//
clear innerHTML
	list.innerHTML = currentHTML + addstr;              // put back full
innerHTML
	Sortable.destroy(\"list_p\");                                 //
explicitely destroy Sortable
	Sortable.create(\"list_p\",{onUpdate:updateOrdre}); // recreate
sortable
	updateOrdre(list);                                                 //
run ordering function
}

This is the str output function

function strListItem(objItem){
	var list = $(''list'');
	var id = objItem.id;
	var fn = objItem.FirstName;
	var ln = objItem.LastName;
	var str = ''<li
id="p_''+id+''"><span
class="handle"><img src="../images/
arrow_UD.gif" alt="Ordre"
/><''+''/span>''
		+'' <input type="hidden"
name="intOrdre_''+id+''" value=""
/>''
		+'' <label class="fix">''+fn+''
''+ln+''</label>''
		 +'' <input type="button" name="delete"
value="X" onClick\"confirmation = confirm(''Want to
delete?'');if(confirmation)
{doDelPharm(''p_''+id+'''');}\"
/></li>'';
	return str;
}

I had a "handle" option in Sortable.create, but it gave me an error in
IE...

var Enumerable = {
  each: function(iterator) {
    var index = 0;
    try {
      this._each(function(value) {
        try {
          iterator(value, index++);
        } catch (e) {
          if (e != $continue) throw e;
        }
      });
    } catch (e) {         <----------------------------------right
here
      if (e != $break) throw e;
    }
    return this;
  },

I hoped for the best when I could add items to the list in IE without
having this problem. But when I clicked save, BANG! same error. I
commented all the "saveEdition" function and uncommented one line at a
time until the error appeared. Voilà!

var data = Form.serialize(document.edition);

Before, I had the nicer form
$(''edition'').serialize()
or the shorter form
document.edition.serialize();
but no difference.

In short the question is:
Form.serialize(form)  -> each = error JS  =>WHY?!?

If you want more detail, I''ll provide.

BTW. does any of you know a GOOD solution to troubleshoot javascript
inside IE for Win? I downloaded Microsoft Script Debugger, it just
keep crashing.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Gareth Evans

2007-May-17 20:34 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

I''m doing .net development using VWD but I find when I have the
"disable
script errors" options turned off (ie script errors are enabled) it catches
JS errors for me too. You can''t really do much though, just view the
line at
which the error occurred.
I''ve also been using companionjs (like debugbar) as well as the ms
developer
toolbar but all in all, nothing so fancy as full blown firebug.

Gareth


On 5/18/07, Charles St-Pierre <webmestre-3uEXlLq2xPI@public.gmane.org>
wrote:>
>
> Hi, I need gurus help.
>
> Prototype.js = 1.5.0
> Scriptaculous = 1.7.0
>
> I''ve been trailing a JS error that appears in IE 6 WinXP. Firefox
is
> ok.
>
> I have a statically generated form. Data is imported by AJAX. Form is
> saved with AJAX.
> All is good.
>
> Smack in the middle of the form, there is a list of items (sortable
> with the help of Scriptaculous). Inside the <LI>s are <input
hidden>s,
> registering the orders. Changing those and saving.
> All is good.
>
> Next to the list is a <select> providing a list of possible new
> additions to the list. You select the item and press a button. A JS
> function output a string containing markup for the item and append it
> to the innerHTML of the list container <UL>.
>
> function addItem(){
>        var list = $(''list'');                             
//
> reference
>        var item = document.edition.selectItems.value; // select current
> value
>        var objItem =
eval(''(''+item.replace(/''/g,''\"'')+'')'');
//
> transfers
> value in JS object
>        var addstr = strListItem(objItem);                      // produce
> string from other function with
>        var currentHTML = list.innerHTML;                    // store old
> innerHTML
>        list.innerHTML = '''';                              
//
> clear innerHTML
>        list.innerHTML = currentHTML + addstr;              // put back
> full
> innerHTML
>        Sortable.destroy(\"list_p\");                             
//
> explicitely destroy Sortable
>        Sortable.create(\"list_p\",{onUpdate:updateOrdre}); //
recreate
> sortable
>        updateOrdre(list);
> //
> run ordering function
> }
>
> This is the str output function
>
> function strListItem(objItem){
>        var list = $(''list'');
>        var id = objItem.id;
>        var fn = objItem.FirstName;
>        var ln = objItem.LastName;
>        var str = ''<li
id="p_''+id+''"><span
class="handle"><img
> src="../images/
> arrow_UD.gif" alt="Ordre"
/><''+''/span>''
>                +'' <input type="hidden"
name="intOrdre_''+id+''" value=""
/>''
>                +'' <label
class="fix">''+fn+''
''+ln+''</label>''
>                 +'' <input type="button"
name="delete" value="X" onClick> \"confirmation =
confirm(''Want to delete?'');if(confirmation)
> {doDelPharm(''p_''+id+'''');}\"
/></li>'';
>        return str;
> }
>
> I had a "handle" option in Sortable.create, but it gave me an
error in
> IE...
>
> var Enumerable = {
> each: function(iterator) {
>    var index = 0;
>    try {
>      this._each(function(value) {
>        try {
>          iterator(value, index++);
>        } catch (e) {
>          if (e != $continue) throw e;
>        }
>      });
>    } catch (e) {         <----------------------------------right
> here
>      if (e != $break) throw e;
>    }
>    return this;
> },
>
> I hoped for the best when I could add items to the list in IE without
> having this problem. But when I clicked save, BANG! same error. I
> commented all the "saveEdition" function and uncommented one line
at a
> time until the error appeared. Voilà!
>
> var data = Form.serialize(document.edition);
>
> Before, I had the nicer form
> $(''edition'').serialize()
> or the shorter form
> document.edition.serialize();
> but no difference.
>
> In short the question is:
> Form.serialize(form)  -> each = error JS  =>WHY?!?
>
> If you want more detail, I''ll provide.
>
> BTW. does any of you know a GOOD solution to troubleshoot javascript
> inside IE for Win? I downloaded Microsoft Script Debugger, it just
> keep crashing.
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Dave Crane

2007-May-18 01:11 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Hi Charles,

On Thursday 17 May 2007 21:18, Charles St-Pierre wrote:> I''ve been trailing a JS error that appears in IE 6 WinXP. Firefox
is
> ok.
>What does the text of the error say? Long shot, but it might help - the error 
text will be completely meaningless, but there is a fairly crude black art of 
matching errors to see if they resemble the text produced by other error 
conditions.
> I had a "handle" option in Sortable.create, but it gave me an
error in
> IE...
>Just a hunch, this has caught me out several times. FF is more forgiving than 
IE when it comes to object literals, and will ignore any trailing commas, 
e.g.

Sortable.create(
  ''myDiv'',
  {
      ghosting:true,
      handle: ''myHandle'',    //<-- here is the offending
comma
  }
);

whereas IE will carp with an unhelpful error that doesn''t immediately
make it
obvious what the problem is. Could be if you''re adding and removing
entries
from the sortable options, you left a comma behind somewhere?
> BTW. does any of you know a GOOD solution to troubleshoot javascript
> inside IE for Win? I downloaded Microsoft Script Debugger, it just
> keep crashing.
>Nope. I use the Script Editor (bundled with >gulp< FrontPage, or with Vis 
Studio if you use it. The freebie versions of Vis Studio might have it as 
part of them, if you''ve got 300MB free disk space needs eating up.
Script
Editor is more robust that the free debugger, and gives better immediate pane 
output on complex objects, but it still sucks. The biggest problem is that it 
doesn''t  recognise inner-scope functions when it comes to setting 
breakpoints, so you can''t set breakpoints in your code interactively
for
1) functions declared as part of a class prototype - i.e. pretending to be 
object methods
2) callback functions passed in anonymously 
3) anonymous iterator functions used in the spiffy prototype.js Array methods

which together accounts for over 90% of the code that I write. You can add 
debugger; statements to the code to stop the debugger inside these functions, 
but that''s a PITA.

HTH

Dave


-- 
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous in Action http://manning.com/crane3

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Dave Crane

2007-May-22 12:02 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Hi Charles,

On Tuesday 22 May 2007 14:36, Charles St-Pierre wrote:> Hi Dave, and thank you for your time
>
> (sorry if I respond only today. Long weekend here in Montreal, Canada)
>No worries. Long weekends are good for the soul. We have two of them in May 
here in the UK :)
> > > I''ve been trailing a JS error that appears in IE 6
WinXP.
> >
> > What does the text of the error say?
>
> Line:686
> Error: Object doesn''t support this property or method
>
> And debug point to the "catch(e)" line I pointed to.
>Well, that''s a pretty generic message, even by IE''s standards 
- not sure what
to suggest there, unfortunately. Looking at dragdrop.js (v 1.7.0), around 
line 685, there''s some code inside a call to Array.each() that tries to
find
a handle on each element. Maybe worth peppering a few debugger; statements 
around there to see if you can locate the problem? $(e).down(), for example, 
in line 687, will only get triggered if the handle option is set.
>
> That is ok, tripple checked. However, you''ve given me things to
work
> on.
> What I actualy do is add HTML string in the innerHTML of the UL, and
> re-run Sortable.create. Is there a better way?
>Nope, that''s the right way to do it - if you modify your container
(other than
by dragging and dropping), recreate the Sortable. IIRC, there''s some
nifty
clean-up code under the hood that will remove the old Sortable before 
applying the new one, so you don''t end up with multiple event handlers
on the
nodes that were already there.
> > Nope. I use the Script Editor (bundled with >gulp< FrontPage, or
with Vis
> > Studio if you use it. The freebie versions of Vis Studio might have it
as
> > part of them, if you''ve got 300MB free disk space needs
eating up.
>
> Thanks for the info, I''ll check it out.
-- 
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous in Action http://manning.com/crane3

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Charles St-Pierre

2007-May-22 13:36 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Hi Dave, and thank you for your time

(sorry if I respond only today. Long weekend here in Montreal, Canada)
> > I''ve been trailing a JS error that appears in IE 6 WinXP.
> What does the text of the error say?
Line:686
Error: Object doesn''t support this property or method

And debug point to the "catch(e)" line I pointed to.
> > I had a "handle" option in Sortable.create, but it gave me
an error in
> > IE...
>
> Just a hunch, this has caught me out several times. FF is more forgiving
than
> IE when it comes to object literals, and will ignore any trailing commas,
> Could be if you''re adding and removing entries
> from the sortable options, you left a comma behind somewhere?
That is ok, tripple checked. However, you''ve given me things to work
on.
What I actualy do is add HTML string in the innerHTML of the UL, and
re-run Sortable.create. Is there a better way?
> Nope. I use the Script Editor (bundled with >gulp< FrontPage, or with
Vis
> Studio if you use it. The freebie versions of Vis Studio might have it as
> part of them, if you''ve got 300MB free disk space needs eating up.
Thanks for the info, I''ll check it out.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jerod Venema

2007-May-22 22:29 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

For what it''s worth, I''ve had some bad luck with innerHTML is
IE, which
occurred in code somewhat similar to yours. (I was slapping innerHTML into a
pre-existing element, in any case). Not sure if it''s related or not,
but
it''s a pretty simple bit of code to create a "div" wrapper
that IE seemed to
like a lot more...see here: http://jerod.jerodandangela.com/?p=5

By removing the innerHTML call from an existing DOM element, and replacing
with "appendChild", IE seems to accept it. Perhaps something similar
is
happening here?

Just a shot in the dark...

-Jerod


On 5/22/07, Dave Crane
<dave-qrf20pp95eSLQvtTh0HkdajZmZ73YKuj@public.gmane.org>
wrote:>
>
> Hi Charles,
>
> On Tuesday 22 May 2007 14:36, Charles St-Pierre wrote:
> > Hi Dave, and thank you for your time
> >
> > (sorry if I respond only today. Long weekend here in Montreal, Canada)
> >
> No worries. Long weekends are good for the soul. We have two of them in
> May
> here in the UK :)
>
> > > > I''ve been trailing a JS error that appears in IE 6
WinXP.
> > >
> > > What does the text of the error say?
> >
> > Line:686
> > Error: Object doesn''t support this property or method
> >
> > And debug point to the "catch(e)" line I pointed to.
> >
> Well, that''s a pretty generic message, even by IE''s
standards  - not sure
> what
> to suggest there, unfortunately. Looking at dragdrop.js (v 1.7.0), around
> line 685, there''s some code inside a call to Array.each() that
tries to
> find
> a handle on each element. Maybe worth peppering a few debugger; statements
> around there to see if you can locate the problem? $(e).down(), for
> example,
> in line 687, will only get triggered if the handle option is set.
>
> >
> > That is ok, tripple checked. However, you''ve given me things
to work
> > on.
> > What I actualy do is add HTML string in the innerHTML of the UL, and
> > re-run Sortable.create. Is there a better way?
> >
> Nope, that''s the right way to do it - if you modify your container
(other
> than
> by dragging and dropping), recreate the Sortable. IIRC, there''s
some nifty
> clean-up code under the hood that will remove the old Sortable before
> applying the new one, so you don''t end up with multiple event
handlers on
> the
> nodes that were already there.
>
> > > Nope. I use the Script Editor (bundled with >gulp<
FrontPage, or with
> Vis
> > > Studio if you use it. The freebie versions of Vis Studio might
have it
> as
> > > part of them, if you''ve got 300MB free disk space needs
eating up.
> >
> > Thanks for the info, I''ll check it out.
>
> --
> ----------------------
> Author
> Ajax in Action http://manning.com/crane
> Ajax in Practice http://manning.com/crane2
> Prototype & Scriptaculous in Action http://manning.com/crane3
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Dave Crane

2007-May-23 12:38 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Hi Charles,

(I''m sending this conversation back to the RoR spinoffs list - I
presume you
hadn''t intended to mail me personally.)
> I''m not used to using debugger, could you give me a hand as to
where
> to put the statements so that they could be usefull?
>In general, you need only one debugger; statement per 
anonymous/inner/not-top-level function, to allow the MS debuggers to get 
started. Once they''re inside that scope, they can happily drill down
into
other function calls as usual. The only thing they don''t understand is 
setting breakpoints interactively by clicking the LHS gutter of the text 
editor.

Debugging inside a ternary operator is a bit of a pain, so I suggest you 
rewrite it a little (temporarily!) as follows.
> (this.findElements(element, options) || []).each( function(e) {
>    // handles are per-draggable
>    var handle = e;
>    if (options.handle){
>      debugger;
>      handle=$(e);
>      handle=handle.down(''.''+options.handle,0);   
//<--- step into
>    }      
>    options.draggables.push(
>         new Draggable(e, Object.extend(options_for_draggable,
> { handle: handle })));
>    Droppables.add(e, options_for_droppable);
>    if(options.tree) e.treeNode = element;
>    options.droppables.push(e);
> });
>You''ll only hit the debugger statement if you''re using
ahandle, can verify
that $(e) exists, and then step into Element.down() to see what''s going
on
there. 

If you''re using the free script debugger, the best way to see
what''s happening
is to use the command window to type in expressions, and have them evaluated 
on the fly.

HTH

Dave
-- 
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous in Action http://manning.com/crane3

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Charles St-Pierre

2007-May-23 13:25 UTC

head link

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Thanks to all who gave me a hand in this.

I found a solution (but not the cause of the error).

Instead of appending html to the current innerHTML of the UL, I kept
the data in a javascript object, modifying the object when needed and
recreating the whole list everytime. Since the list is rarely longer
than 3 entries, its not too heavy.

I had the idea looking at the innerHTML of the div after adding the
item but before using Sortable.create (which provoqued the error). The
original entries had _extended attributes, but not the new one.
Wandering if that was not the cause of my worries, I redesigned my
application so that the list was always composed of new list items.

Voilà!

Jerod, your idea could probably have worked also. I need to get myself
into some DOM manipulation.

Anyway, is it possible that you can''t add a blank list item to an
already sortable list by using simple innerHTML call, for IE? The
question is still standing. Having used the DOM, I probably could have
extended the list item before appending it.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - May 2007 - IE-only error on serialize(), only when new inputs added with innerHTML

IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML

Re: IE-only error on serialize(), only when new inputs added with innerHTML