2012-03-19 10 views
9

Avendo difficoltà a eseguire il debug di questo.jQuery UI Droppable Uncaught TypeError

Utilizzo dell'interfaccia utente jQuery Droppable in un'applicazione Backbone mediante CoffeeScript.

Non c'è niente di sbagliato nella funzionalità, tutto sta funzionando come lo intendevo, ma sto ancora ricevendo questo errore della console ogni volta che un oggetto viene rilasciato.

Uncaught TypeError: Cannot read property 'options' of undefined 

Codice in materia di droppable:

@$el.droppable 
     tolerance: 'pointer' 
     hoverClass: 'drop_hover' 
     accept: '.item' 

     drop: (e, ui) => 
      draggedItem = ui.draggable 

      itemId = draggedItem.attr 'data-id' 

      allInstances = @model.collection.models 

      findItems = for instance in allInstances 
          instanceItems = instance.get 'items' 
          instanceItems.getByCid itemId 


      compacted = _.compact findItems 

      droppedItem = compacted[0] 

      droppedCollection = droppedItem.collection 

      droppedCollection.remove droppedItem if _.include droppedCollection.models, droppedItem 

      @itemCollection.add droppedItem unless _.include @items, droppedItem 

Come ho già detto la funzionalità funziona correttamente, ho appena vorrebbe sbarazzarsi della errore se qualcuno sa qualcosa potrei provare a eseguire il debug.

Stack Trace

Uncaught TypeError: Cannot read property 'options' of undefined 
a.ui.plugin.add.stopjquery-ui.js:49 
a.ui.version.a.extend.plugin.call  jquery-ui.js:9 
a.widget._trigger      jquery-ui.js:49 
a.widget._mouseStop      jquery-ui.js:49 
a.widget._mouseUp      jquery-ui.js:28 
a.widget._mouseUp      jquery-ui.js:49 
a.widget._mouseDown._mouseUpDelegate jquery-ui.js:28 
f.event.dispatch      jquery-1.7.1.min.js:3 
f.event.add.h.handle.i     jquery-1.7.1.min.js:3 

Grazie per qualsiasi aiuto.

+0

è la traccia dello stack dell'errore che ti dà qualche suggerimento? – dira

+0

Niente di utile per me. L'ho aggiunto alla domanda. – mgaughan

+0

Sembra quindi un problema di jQuery. Date un'occhiata a questo http://forum.jquery.com/topic/on-draggable-destroy-uncaught-typeerror-cannot-read-property-options-of-undefined – dira

risposta

2

Questo sembra essere finalmente fissato correttamente v1.11.0, senza tutte le soluzioni proposte qui:

http://bugs.jqueryui.com/ticket/6889

Sembra che la rimozione dell'elemento trascinabile originale ora non comporterà questo errore perché le proprietà sono ora memorizzate nel campo instance. Ho confermato che la v1.11.0 corregge questo errore esatto che è apparso sulla v1.10.4.

1

@dira ha indicato una discussione con un problema relativo allo stesso codice nell'interfaccia utente di jQuery, ma la soluzione non ha funzionato per me.

Ho finito per commentare il codice nella fonte dell'interfaccia utente jQuery e l'errore è andato via.

Come prima, tutto funziona come desiderato.

Il blocco ho commentato:

$.ui.plugin.add("draggable", "cursor", { 
    start: function(event, ui) { 
    var t = $('body'), o = $(this).data('draggable').options; 
    if (t.css("cursor")) o._cursor = t.css("cursor"); 
    t.css("cursor", o.cursor); 
    }, 
    stop: function(event, ui) { 
    var o = $(this).data('draggable').options; 
    if (o._cursor) $('body').css("cursor", o._cursor); 
    } 

});

2

Mi sono imbattuto nello stesso errore, e penso, dai miei test che ciò accade quando si scollega o si rimuove l'oggetto rilasciato sull'evento di rilascio. quando si usa l'elemento originale come helper.

Sto ancora cercando un modo migliore per staccare e reinserire l'elemento trascinato nel DOM

8

E sembra essere correlato a distruggere l'oggetto caduto durante l'evento di rilascio. Sono stato in grado di aggirare il problema, ritardando la chiamata distruggere:

function(evt,ui) { 
    setTimeout((function() { 
     $(this).draggable("destroy"); 
    }).bind(ui.draggable),50); 
} 
+0

Dove dovrei scrivere questo? Ricevo lo stesso errore a cui hai risposto. Ho votato la tua risposta in quanto sembra risolvere anche la mia domanda. – NullPointer

5

Per me, nessuna delle soluzioni proposte ha funzionato. Come hai già detto, questo è dovuto alla rimozione dell'elemento prima che la goccia finisca. La mia soluzione molto semplice a questo non era l'elemento remove(), ma solo l'elemento detach() e l'appunto da qualche altra parte.

Quindi per me mi sono trasferito da:

aDiv.droppable({ 
    drop: function(event, ui){ 
    ui.draggable.remove(); 
    anotherDiv.append(ui.draggable); 
    } 
}) 

che mi ha dato l'eccezione opzioni:

aDiv.droppable({ 
    drop: function(event, ui){ 
    ui.draggable.detach(); 
    anotherDiv.append(ui.draggable); 
    } 
}) 

Come il jQuery's detach() documentation states questo funziona perché" ... mantiene tutti i dati associati a jQuery gli elementi rimossi. "

Se staccare e aggiungere è un'opzione per voi, mi sembra una soluzione molto pulita.

+1

Grazie amico, mi ha aiutato. In caso di ripetizione (1000 volte) di detach(), ciò causerà una perdita di memoria? –

+0

Stacca solo "sblocca" l'elemento dal DOM, quindi non crea nuovi oggetti. L'impronta di memoria dovrebbe rimanere all'incirca uguale. Anche se, se davvero non avessi più bisogno degli elementi, li eliminerei definitivamente in un secondo momento. Forse un 'setTimeout (..., 1000)' che in realtà li rimuove dopo un ritardo, funziona per te. –

+0

Ho sentito che 'setTimeOut (..., 0)' fa sì che la funzione agisca in qualche modo in modo asincrono, posso usarla qui o devo usare una certa quantità di tempo (come quello che hai detto)? –

1

Il mio approccio per risolvere questo è quello di utilizzare l'evento STOP di trascinamento.

Quando un oggetto viene rilasciato e pronto per essere rimosso, riporta un evento alla vista trascinabile per impostare @isRemove = true. La vista trascinabili dovrebbe avere qualcosa di simile in caso di STOP:

self = @ 
@$(".selector").draggable 
    stop: (event, ui) -> 
    if self.isRemove 
     self.remove() 
Problemi correlati