Drag Drop error message
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?
