6683

PrototypeJS Element.prototype.appendChild issue

Question:

Due to Ajax loaded content, I had to change a function from:

document.observe('dom:loaded',function() { $$('.userListHeaderCell').invoke('observe', 'click', function() { this.toggleClassName('desc'); var colnumber = this.up().childElements().indexOf(this); var content = this.up(2); sortColumn(content, colnumber, this.hasClassName('desc')); }); });

TO:

document.observe('click', function(e, el) { if (el = e.findElement('.userListHeaderCell.sortable')) { el.toggleClassName('desc'); var colnumber = el.up().childElements().indexOf(el); var content = el.up(2); sortColumn(content, colnumber, el.hasClassName('desc')); } });

The sortColumn looks like:

function sortColumn(content, colnumber, desc) { content.select('.userListRow').sort(function(a,b){ var atext = a.down(colnumber).innerHTML.stripTags().toLowerCase(); var btext = b.down(colnumber).innerHTML.stripTags().toLowerCase(); return atext.localeCompare(btext) * (desc ? -1 : 1); }).each(Element.prototype.appendChild, content); }

The toggle and colnumber work and content is an object HTMLDivElement, but it seems that I need to convert the content variable or use another function, but not sure what in the sortColumn. The error I get is:

"Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: <a href="https://www.someurl.com/scripts/prototype.js" rel="nofollow">https://www.someurl.com/scripts/prototype.js</a> :: :: line 804" data: no]

What do I need to change in order to make this work?

Thanks.

EDIT:

Error in IE shows: Unable to get value of the property 'call': object is null or undefined prototype.js, line 804 character 9

I believe the issue is with Element.prototype.appendChild

Tried adding Element.extend(content), but doesn't seem to help.

Example data:

<pre class="lang-html prettyprint-override"><div id="contentbox_Users" class="userList"> <div class="userListHeader"> <div class="userListHeaderCell col1 sortable">First Name</div> <div class="userListHeaderCell col2 sortable">Last Name</div> </div> <div id="contentbox_People"> <div class="userListRow"> <div class="userListCell col1">John</div> <div class="userListCell col2">Smith</div> </div> <div class="userListRow"> <div class="userListCell col1">Bob</div> <div class="userListCell col2">Ray</div> </div> <div class="userListRow"> <div class="userListCell col1">Fred</div> <div class="userListCell col2">Jones</div> </div> </div> </div>

Answer1:

Since it is my code that is failing I should have a go.

The line,

}).each(Element.prototype.appendChild, content);

is a shorthand way of saying,

}).each(function(row) { content.appendChild(row); });

You can try it that way to see if things are better. I don't recognise the error but a quick google suggests it is from Firefox and relates to passing a non-element to a native function that expects one. In situations such as this I tend to stick lots of console.log(...) calls everywhere (and press F12 in Firefox) and see what happens. Logging the array <em>should</em> show all the rows as HTML elements.

Recommend

  • Why UICollectionView with UICollectionViewFlowLayout not show cells, but ask for size?
  • Select2 - Deny to can clean the input field and disable the form if results not found
  • Javascript - Recursive function to iterate through elements
  • Access Control Allow Origin header not present with fetch api call
  • HTML5 video only works in IE. The other browsers shows the black screen
  • Enabling DTD support in Sql Server
  • ThreadStatic in asynchronous ASP.NET Web API
  • Scipy Leastsq Optional Output Variable (Mesg)
  • Convert SQLite database to XML
  • Scala multiline string placeholder
  • WPF Visiblity Binding to Boolean Expression with multiple Variables
  • Conversion from string “a” to type 'Boolean' is not valid
  • Assign variable to the value in HTML
  • jQuery ready not fired after rails link_to is clicked
  • Converting a WriteableBitmap image ToArray in UWP
  • HTML download movie download link
  • Updating server-side rendering client-side
  • htaccess rewriting URLs with multiple forward slashes
  • Weird JavaScript statement, what does it mean?
  • How do you troubleshoot character encoding problems?
  • Do create extension work in single-user mode in postgres?
  • Akka Routing: Reply's send to router ends up as dead letters
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Arrays break string types in Julia
  • Is there a mandatory requirement to switch app.yaml?
  • How to format a variable of double type
  • Comma separated Values
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Linking SubReports Without LinkChild/LinkMaster
  • Is it possible to post an object from jquery to bottle.py?
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • How to Embed XSL into XML
  • How to load view controller without button in storyboard?