Drag Drop error message
nathandennis Feb 8, 2008 12:03 PMi 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?