0

I have a dueling listbox with a 'Select All' option, and the javascript behind the 'Select All' is:

$('#' + source).remove().appendTo('#' + destination);

In situations where the source listbox contains a few thousand entries, I get a "Warning: Unresponsive Javascript" message in Firefox only (Chrome works fine). Worst of all, if I click 'continue' after the message, the action never completes. The FF version is 41.0.1.

If I understand what FF is doing, I guess it suspects that there is a long (possibly recursive) loop and tries to intercept it, but I don't think this is the case, and I can't release to people if it behaves this way.

Is there any way I can alter the javascript so FF doesn't complain? Is there a more efficient pure JS way to accomplish the .appendTo() that doesn't cause FF distress?

Mark Kadlec
  • 8,036
  • 17
  • 60
  • 96
  • 3
    It doesn't help you, but I would begin to question having a UI that has a listbox that "contains a few thousand entries" - it doesn't sound like good UX – James Thorpe Oct 06 '15 at 15:09
  • 1
    @JamesThorpe, I totally agree, but it's a dynamic listbox that normally does not contain that many, but in some worst case scenarios it can get like that. I didn't design it, right now I'm just trying to get it to work. – Mark Kadlec Oct 06 '15 at 15:22
  • 2
    Fair enough! We've all had that sort of thing to fix :) – James Thorpe Oct 06 '15 at 15:26

2 Answers2

1

why are you calling remove? appendTo will move the element(s); there isn't a reason to chain appendTo on remove here... As James stated, having thousands of nodes in the DOM is not good UX but either way the code should be cleaned up to:

$('#' + source).appendTo('#' + destination);

harris
  • 100
  • 3
  • Thanks @harris, I actually changed to create an html string and .append() to the destination control, but I'm still getting the warning in FF. I'm definitely going to talk to the design team to ask why we allow 300,000 rows to be moved. – Mark Kadlec Oct 07 '15 at 14:32
1

Try to execute the functions one by one:

First $('#' + source).remove();

Then $('#' + source).appendTo('#' + destination);

Use console.log('this is what happens now') functions to see where the execution stops.

Also, try wrapping the offending code with a:

window.onload = function() {
    // your code here
};
Ciprian
  • 872
  • 1
  • 10
  • 30
  • Thanks @Ciprian, I already determined it is the .appendTo() since it's 300,000 rows and used console.log() to pinpoint. Also, I can't do the call .onload since it's dynamically executed off of a link. – Mark Kadlec Oct 07 '15 at 14:36