3 Replies Latest reply on Feb 8, 2008 6:55 PM by nathan dennis

    Drag Drop error message

    nathan dennis Expert

      i have a very complex web 2.0 app. the page has multiple a4j:outputpanels in it as well as multiple forms.

      i'm getting an error message... "drop: Element with [pic_ep]:foo 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!"

      i will post snippets because the full xhtml is extremely large.



      <h:form id="pic_ep">
      <!-- edit frame -->
       <a:jsFunction name="rerenderSideBar"
       reRender="sidebarcontainer"
       oncomplete="rerenderEditCont()"/>
       <a:jsFunction name="rerenderEditCont"
       reRender="editcontainer"
       oncomplete="document.getElementById('sidebardisable').style.zIndex = 0;">
       </a:jsFunction>
       <rich:panel style="position:relative; width:420px; height:440px; float:left;">
       <f:facet name="header">Edit Picture</f:facet>
      
       <a:outputPanel id="editcontainer">
       <div id="editframe"
       style="position:relative; width:400px; height:400px;"
       align="center">
      
       <!-- fragment for layer edit -->
       <ui:repeat value="#{picAction.layerframe2}" var="editvar">
       <rich:dropSupport dropValue="#{ddresult}"
       dropListener="#{picAction.processDrop}" acceptedTypes="pic"
       reRender="editcontainer, sidebarcontainer">
      .
      .
      .
      </rich:dropSupport>
      </ui:repeat>
       </div>
       </a:outputPanel>
       </rich:panel>
       </h:form>
      .
      .
      .
      <h:form enctype="multipart/form-data">
       <a:outputPanel id="picturetableframe">
       <h:messages globalOnly="true" styleClass="message"/>
       <rich:panel>
       <rich:dataGrid value="#{userpictureList.resultList}"
       var="picturelist"
       columns="5"
       elements="10"
       rendered="#{not empty userpictureList.resultList}">
       <rich:dragSupport dragIndicator=":firstindicator"
       dragType="pic" dragValue="#{picturelist}">
       <rich:dndParam type="drag" name="smallimage">
       <h:graphicImage value="http://#{picturelist.tserver}/#{picturelist.turl}/#{picturelist.tmedianame}"
       style="border:0px;" />
       </rich:dndParam>
       </rich:dragSupport>
      
       <h:graphicImage value="http://#{picturelist.tserver}/#{picturelist.turl}/#{picturelist.tmedianame}"
       style="border:0px;"
       alt="#{picturelist.media.medianame}"
       onclick="loadModularEditFrame('#{picturelist.tmedianame}');"
       />
      
       <f:facet name="footer">
       <rich:datascroller></rich:datascroller>
       </f:facet>
       </rich:dataGrid>
      .
      .
      .
       </rich:panel>
       </a:outputPanel>
      .
      .
      .
      </h:form>
      


      i have working examples of drag and drop that i have already created in a test application.
      the issue i suspect might have something to do with the complex structure of the page. ie.. dragging between forms or ajax output panels ....

      is there something i should know about this scenario that i might have over looked in the documentation?

      generated source:
      <form id="pic_ep" name="pic_ep" method="post" action="/picture/prototype5.seam" enctype="application/x-www-form-urlencoded">
      
      <input type="hidden" name="pic_ep" value="pic_ep"/>
      
      <!-- edit frame --><script id="pic_ep:j_id8" type="text/javascript">
      //<![CDATA[
      
       function rerenderSideBar(){A4J.AJAX.Submit('_viewRoot','pic_ep',null,{'parameters':{'pic_ep:j_id8':'pic_ep:j_id8'} ,'actionUrl':'/picture/prototype5.seam','oncomplete':function(request,event,data){rerenderEditCont()}} )};
      
      //]]>
      </script><script id="pic_ep:j_id9" type="text/javascript">
      //<![CDATA[
      
       function rerenderEditCont(){A4J.AJAX.Submit('_viewRoot','pic_ep',null,{'parameters':{'pic_ep:j_id9':'pic_ep:j_id9'} ,'actionUrl':'/picture/prototype5.seam','oncomplete':function(request,event,data){document.getElementById('sidebardisable').style.zIndex = 0;}} )};
      
      //]]>
      </script><div class="dr-pnl rich-panel" id="pic_ep:j_id10" style="position: relative; width: 420px; height: 440px; float: left;"><div class="dr-pnl-h rich-panel-header" id="pic_ep:j_id10_header">Edit Picture</div><div class="dr-pnl-b rich-panel-body" id="pic_ep:j_id10_body"><span id="pic_ep:editcontainer">
       <div align="center" id="editframe" style="position: relative; width: 400px; height: 400px;">
       <!-- sets initial top and left css values by outputing value straight from seams... no onload mess needed -->
      
       <!-- fragment for layer edit -->
       <div id="dragger_0" style="border: 1px solid rgb(204, 204, 204); visibility: visible; position: absolute; top: 23px; left: 77px; z-index: 0; width: 294px; height: 368px; background-color: rgb(238, 238, 238);" onmousedown="startLayerDrag('dragger_0', 0, 3, 1)" onmouseup="endLayerDrag()">Background<img src="http://dev8//bgep//bg1.jpg" alt="Background" style="border: 0px none ;"/>
       <div id="dragger0Resize" style="font-family: Marlett; position: absolute; right: 0px; bottom: 0px; z-index: 1; cursor: se-resize; color: rgb(51, 51, 51);" onmousedown="return startResize('dragger_0', 0, 1)" onmouseup="endResize()">o</div>
      
       </div><script id="pic_ep:j_id13:0:j_id14">
      //<![CDATA[
      new DnD.SimpleDropZone('pic_ep:j_id13:0',{'acceptedTypes':['pic'] ,'dndParams':'{}'} ).drop = function(event,drag){var options = {'parameters':{'pic_ep:j_id13:0:j_id14':'pic_ep:j_id13:0:j_id14'} ,'actionUrl':'/picture/prototype5.seam'} ;options.parameters['dropTargetId'] = 'pic_ep:j_id13:0:j_id14';Object.extend(options.parameters,drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','pic_ep',event,options);};
      //]]>
      </script>
       <div id="dragger_1" style="border: 1px solid rgb(204, 204, 204); visibility: visible; position: absolute; top: 4px; left: 25px; z-index: 1; width: 257px; height: 132px; background-color: rgb(238, 238, 238);" onmousedown="startLayerDrag('dragger_1', 1, 3, 1)" onmouseup="endLayerDrag()"> layer 1<img src="http://xxx.xxx.xxx.xxx/xxx/text_layer" alt=" layer 1" style="border: 0px none ;"/>
       <div id="dragger1Resize" style="font-family: Marlett; position: absolute; right: 0px; bottom: 0px; z-index: 2; cursor: se-resize; color: rgb(51, 51, 51);" onmousedown="return startResize('dragger_1', 1, 1)" onmouseup="endResize()">o</div>
       </div><script id="pic_ep:j_id13:1:j_id14">
      //<![CDATA[
      new DnD.SimpleDropZone('pic_ep:j_id13:1',{'acceptedTypes':['pic'] ,'dndParams':'{}'} ).drop = function(event,drag){var options = {'parameters':{'pic_ep:j_id13:1:j_id14':'pic_ep:j_id13:1:j_id14'} ,'actionUrl':'/picture/prototype5.seam'} ;options.parameters['dropTargetId'] = 'pic_ep:j_id13:1:j_id14';Object.extend(options.parameters,drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','pic_ep',event,options);};
      //]]>
      </script>
       <div id="dragger_2" style="border: 1px solid rgb(204, 204, 204); visibility: visible; position: absolute; top: 236px; left: 212px; z-index: 2; width: 166px; height: 129px; background-color: rgb(238, 238, 238);" onmousedown="startLayerDrag('dragger_2', 2, 3, 1)" onmouseup="endLayerDrag()"> layer 3<img src="http://xxx.xxx.xxx.xxx/xxx/text_layer" alt=" layer 3" style="border: 0px none ;"/>
      
       <div id="dragger2Resize" style="font-family: Marlett; position: absolute; right: 0px; bottom: 0px; z-index: 3; cursor: se-resize; color: rgb(51, 51, 51);" onmousedown="return startResize('dragger_2', 2, 1)" onmouseup="endResize()">o</div>
       </div><script id="pic_ep:j_id13:2:j_id14">
      //<![CDATA[
      new DnD.SimpleDropZone('pic_ep:j_id13:2',{'acceptedTypes':['pic'] ,'dndParams':'{}'} ).drop = function(event,drag){var options = {'parameters':{'pic_ep:j_id13:2:j_id14':'pic_ep:j_id13:2:j_id14'} ,'actionUrl':'/picture/prototype5.seam'} ;options.parameters['dropTargetId'] = 'pic_ep:j_id13:2:j_id14';Object.extend(options.parameters,drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','pic_ep',event,options);};
      //]]>
      </script>
      .
      .
      .


      any clues?

        • 1. Re: Drag Drop error message
          nathan dennis Expert

          is there a richfaces problem that stops me from writing a dynamic number of dropzones this way?

          
           <ui:repeat value="#{picAction.layerframe2}" var="editvar">
           <rich:dropSupport dropValue="#{ddresult}"
           dropListener="#{picAction.processDrop}" acceptedTypes="pic"
           reRender="editcontainer, sidebarcontainer">
          


          it seems to be the source of the problem.

          • 2. Re: Drag Drop error message
            Henry Mok Newbie

            wrap your drop support inside a panel

            <ui:repeat value="#{picAction.layerframe2}" var="editvar">
            <rich:panel styleClass="dropTargetPanel" style="width:100px">
            <rich:dropSupport dropValue="#{ddresult}" dropListener="#{picAction.processDrop}" acceptedTypes="pic" reRender="editcontainer, sidebarcontainer">
            </rich:panel>

            • 3. Re: Drag Drop error message
              nathan dennis Expert

              ahh,,, that makes more sense. i dont know why didnt catch on that it was referring to the parent element. i havent looked at the richfaces source yet.. but i about bet they referred to it using "this"... a bunch of the html was generated as dhtml from javascript and it couldnt find it... duh...

              thanks for the help..