Problem with drag and drop using richfaces4 + liferay6.

[vijaya.allen]

I am having problem with drag and drop component using richfaces4 + liferay6. I am not even able to drag the item. Please find the attached facelet code and the generated html code. I am able to get other components like panel, tab, popup, calendar with same setup.

[ilya_shaikovsky]

at first please make sure you using lates portlet bridge and richfaces (ideally nightly builds). There were some problems in first released versions.

Then check that JS resources for the components  being loaded or the error status retured  (Using firebug Net tab for example)

[vijaya.allen]

Thanks for your quick reply. Yes i am using the latest bridge (portletfaces-bridge-api-2.0.0, portletfaces-bridge-impl-2.0.0). Also i could see all the js files are included. I also enabled the IE script debugging (did not find any issues). For your reference i am attaching those

<link rel="stylesheet" type="text/css" href="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_db=eAFLq7x7HgAFkAKM&_3_WAR_webformportlet_INSTANCE_D1k5_rfRes=skinning.ecss&p_p_cacheability=cacheLevelPage&p_p_col_count

=1&p_p_col_id=column-1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal"></link><script

src="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=jsf.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=javax.faces&p_p_cacheability=cacheLevelPage&p_p_col_co

unt=1&p_p_col_id=column-1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=jquery.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=richfaces.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=richfaces-base-

component.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=dnd-

indicator.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><link rel="stylesheet"

type="text/css" href="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_db=eAFLq7x7HgAFkAKM&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&_3_WAR_webformportlet_INSTANCE_D1k5_rfRes=indica

tor.ecss&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal"></link><script src="http://localhost:8080/web/guest/test?

_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=jquery.position.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=richfaces-

utils.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=richfaces-

event.js&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=jquery-ui-

core.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=jquery-

dnd.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=dnd-

draggable.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script><script

src="http://localhost:8080/web/guest/test?_3_WAR_webformportlet_INSTANCE_D1k5_javax.faces.resource=dnd-

droppable.js&_3_WAR_webformportlet_INSTANCE_D1k5_ln=org.richfaces&p_p_cacheability=cacheLevelPage&p_p_col_count=1&p_p_col_id=column-

1&p_p_id=3_WAR_webformportlet_INSTANCE_D1k5&p_p_lifecycle=2&p_p_mode=view&p_p_state=normal" type="text/javascript"></script>

[ilya_shaikovsky]

Yes draggable script is referenced.. but if it was succesfully loaded? Could check with fiddler, or just try firefox with firebug(Net tab)

[vijaya.allen]

In my portlet (generated html) i do not see below codes.............any suggestion?

<script type="text/javascript">$(document).ready(function() {
new RichFaces.ui.Draggable("form:src:0:j_idt136",{"parentId":"form:src:0:j_idt135","indicator":"ind","type":"php"} )

[vijaya.allen]

I could see below code is added in org.richfaces.javascript.

JavaScriptServiceImpl, but for some reason this code is not rendered as part of the generated HTML.

new RichFaces.ui.Draggable("j_id1:form:j_idt7",{"parentId":"j_id1:form:j_idt6","indicator":null,"type":"family"} )

[vijaya.allen]

Another clue ScriptsRenderer.

encodeEnd not been invoked while using dragSource from Liferay portlet. Possiblly we might have some issues in

org.portletfaces.bridge.BridgeImpl

[ilya_shaikovsky]

so once again.. you using some latest released version or snapshot for PBR? I highly recommend to try snapshot as believe there were some issues in earlier milestones.. if not helps could also point the guys from PBR forum to that thread to check.

[vijaya.allen]

Yes i am using the latest bridge which released on May 04, 2011. I am also including this issue in PBR forum.

I am able to get the drag look and feel with the below change in org.richfaces.renderkit.DnDRenderBase

@Override

protected void doEncodeEnd(ResponseWriter writer, FacesContext context, UIComponent component) throws

IOException {

buildAndStoreScript(context, component);

DnDScript dragScript = buildClientScript(context, component);

ResponseWriter responseWriter = context.getResponseWriter();

responseWriter.write(

"<script>"

);

responseWriter.write(dragScript.toScript());

responseWriter.write(

"\n</script>"

);

System.

out.println("dragScript="

+ dragScript);

}

Now i see issue with drop, when i debugged i see the below flow

dnd-droppable.js ==> drop

dnd-droppable.js ==> __callAjax

richfaces.js ==> richfaces.ajax

also it is invoking below

jsf.ajax.request(source, event, parameters);

But i do not see the dropEvent is invoked.

I also tried normal <a4j:ajax> that works fine.