-
1. Drag and Drop. ID was not found in the DOM tree
nbelaevski Jan 12, 2011 2:17 PM (in response to sergiomartin)Hi Sergio,
Code looks ok. Can you please check what ID do outputPanel & panel components have in the generated HTML code? Also what is RF version/environment?
-
2. Drag and Drop. ID was not found in the DOM tree
sergiomartin Jan 21, 2011 11:57 AM (in response to nbelaevski)The version of RichFaces we arecurrently using is 3.3.2 GA
The code corresponding to the rich:panel that holds the dropSupport is thefollowing:
<rich:panel style="width:100px;height:100px;"id="drop_panel">
<f:facetname="header"> Drop here the concepts to be added to theannotation </f:facet>
<rich:dropSupportid="conceptsDropSupport" acceptedTypes="ConceptBean"reRender="conceptsTable, drop_panel"
dropListener="#{actionsContainer.ontologyActions.dropSuggestion}"/>
<h:dataTableid="droptable" columns="1"value="#{selectedSuggestionsContainer}" var="itemdrop">
<h:column>
<h:outputText value="#{itemdrop.label}"></h:outputText>
</h:column>
</h:dataTable>
</rich:panel>
The javascript alert in my local machine says:
drop: Element with [formOntologyTree:includeOntologyTree:drop_panel] ID was notfound in the DOM tree. Probably element has no client ID or client ID hasn'tbeen written. DnD's disabled. Check please!Note: Curiously if I move the rich:dropSupport inside the h:dataTable itdoesn't show the javascript alert, but the drop event is not fired then
As for the code generated in Mozilla Firefox by richfaces, I see that the ID isthere!
<div class="rich-panel "id="formOntologyTree:includeOntologyTree:drop_panel"style="width:100px;height:100px;"><divclass="rich-panel-header "id="formOntologyTree:includeOntologyTree:drop_panel_header"> Drophere the concepts to be added to the annotation</div><divclass="rich-panel-body "id="formOntologyTree:includeOntologyTree:drop_panel_body"><scriptid="formOntologyTree:includeOntologyTree:conceptsDropSupport">newDnD.SimpleDropZone('formOntologyTree:includeOntologyTree:drop_panel',{'acceptedTypes':['ConceptBean'],'dndParams':'{}'} ).drop = function(event,drag){var options ={'similarityGroupingId':'formOntologyTree:includeOntologyTree:conceptsDropSupport','parameters':{'formOntologyTree:includeOntologyTree:conceptsDropSupport':'formOntologyTree:includeOntologyTree:conceptsDropSupport'}} ;options.parameters['dropTargetId'] ='formOntologyTree:includeOntologyTree:conceptsDropSupport';Object.extend(options.parameters,drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop){ if (!dzOptions.ondrop.call(this, event)) return;};A4J.AJAX.Submit('formOntologyTree',event,options);};</script><tableid="formOntologyTree:includeOntologyTree:droptable">
Searching in Internet (http://www.koders.com/javascript/fidF83AE3C425A99DA39C5573CD1292645E4421B3E6.aspx?s=ajax) I've found this snipet of code that may belong to the DnD just by the alertmessage.
DnD.SimpleDraggable = Class.create();
Object.extend(DnD.SimpleDraggable.prototype, DnD.Draggable.prototype);
Object.extend(DnD.SimpleDraggable.prototype, {
initialize: function(id, options) {
this.id =$(id);
if (!this.id){
alert("drag:Element with [" + id + "] ID was not found in the DOM tree. Probablyelement has no client ID or client ID hasn't been written. DnD's disabled.Check please!");
return ;
}
this.options = options;this.dragIndicatorId =this.options.dragIndicator;
Thaks a lot!