Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#9040 closed bug (duplicate)

"Uncaught TypeError: Cannot read property 'left' of null" when dragging an element over a sortable

Reported by: leoquijano Owned by: leoquijano
Priority: minor Milestone: none
Component: ui.draggable Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

Description

Hi,

When configuring a droppable area inside of a sortable:

<ul class="mainSortable">
  <li>
    <div class="dropZone"></div>
  </li>
  ...
</ul>

<ul class="anotherSortable">
  <li class="item"></li>
  ...
</ul>

...

jQuery(".mainSortable").sortable({
  refreshPositions: true,
  ...
}

jQuery(".anotherSortable").sortable({ ... });

jQuery(".dropZone").droppable({
  accept: ".item",
  ...
});

And using the "refreshPositions" option on the main sortable, it will fail if an element in the main sortable is removed. The droppable "refreshPositions" method will try to re-calculate positions for all items, even for the removed ones, and jQuery will break with an "Uncaught TypeError: Cannot read property 'left' of null" error.

The offending code inside the refreshPositions() method in jquery-ui.1.8.18.custom.min.js:

var p = t.offset();
item.left = p.left;
item.top = p.top;

I'm adding an IF statement to prevent this, and allow the refreshPositions method to ignore the non-existing item on the main sortable.

var p = t.offset();
if(p) {
  item.left = p.left;
  item.top = p.top;
}

Since I don't see an attach option, patch information is included below:

--- <html>jquery-ui-1.8.18.custom.min.js (<b>12-dic-2012 20:33:51</b>)</html>
+++ <html><b>Current File</b></html>
@@ -1165,8 +1165,10 @@
 			}
 
 			var p = t.offset();
+      if(p) {
 			item.left = p.left;
 			item.top = p.top;
+      }
 		};
 
 		if(this.options.custom && this.options.custom.refreshContainers) {

Change History (4)

comment:1 Changed 7 years ago by tj.vantoll

Owner: set to leoquijano
Status: newpending

Hi leoquijano, thanks for taking the time to contribute to the jQuery UI project. In order to look into your ticket we're going to need a test case that shows the issue and that it still exists in the latest version.

You can use this to get started - http://jsfiddle.net/tj_vantoll/wjxe4/.

Thanks.

comment:2 Changed 7 years ago by leoquijano

Status: pendingnew

Here's a jsFiddle that will reproduce the problem. It's actually related to the "toleranceElement", so I didn't have to include the secondary sortable or the droppable configuration.

http://jsfiddle.net/wjxe4/34/

comment:3 Changed 7 years ago by tj.vantoll

Resolution: duplicate
Status: newclosed

Duplicate of #6921.
leoquijano,

I'm going to close this as a duplicate of #6921 because this appears to be the same problem you're experiencing. #6921 has a pull request that suggests essentially the same patch that you are proposing.

comment:4 Changed 7 years ago by leoquijano

Seems like that's the case. Ok, thanks :-)

Note: See TracTickets for help on using tickets.