2 Replies Latest reply on Jan 21, 2011 11:57 AM by sergio martin

    Drag and Drop. ID was not found in the DOM tree

    sergio martin Newbie

      Hello everybody.

      I have this code (simplified for testing purposes), wich is showing a weird behaviour.

       

          <a4j:outputPanel id="dragpanel">          

                 <rich:dragSupport id="dragsupport" dragIndicator="indicator" dragType="sug" >                       

                          <a4j:actionparam value="Test1" name="name"/>    

                  </rich:dragSupport>

                  <h:outputText value="Test1"/>

          </a4j:outputPanel>

       

          <rich:panel style="width:100px;height:100px;" id="droppanel">

              <f:facet name="header">Drop Zone</f:facet>

              <rich:dropSupport acceptedTypes="sug"/>

          </rich:panel>    

       

      Everytime I try to load the page including that code, I´m getting this 2 alerts:

       

      Alert1:

      drag: Element with [form1:colorbox_include:dragpanel] ID was not found in the DOM tree. Probably element has no client ID or client ID hasn't been written. DnD's disabled. Check please!

       

      Alert2:

      drop: Element with [form1:colorbox_include:droppanel] ID was not found in the DOM tree. Probably element has no client ID or client ID hasn't been written. DnD's disabled. Check please!

       

      The code is in a page that is loaded with a4j:include:

      <a4j:include viewId="/pages/ontology-tree.xhtml" id="colorbox_include"/>

       

      I have read that drag/drop support can be attached only to components that output their client ids, but in this case, as you can see in the alert, all the components have their client ids...

      ¿Any clue on whats happening?

        • 1. Drag and Drop. ID was not found in the DOM tree
          Nick Belaevski Master

          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
            sergio martin Newbie

            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!