11 Replies Latest reply on Oct 25, 2012 11:02 AM by arli

    rich:dragSource, doesn't work at all

    arli

      Hi!

        I faced with a problem with drag&drop on richfaces 4.2.2.Final

       

      I tried to run showcase example of drag and drop, but it doesn't work at all. I noticed that no javascript calls like

      generates in html when on example page everything works fine.

      No errors. nothing. Just doesn't work.

       

      here is xhtml code

       

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/templates/template.xhtml">
      
                     <ui:define name="content">
      
                  <div class="grid_12">
                  <div class="oldBrowser" style="display: none">You are using an old version of IE, you should change
                      your browser ASAP!</div>
      
      
          <h:form id="form">
      
              <h:panelGrid columnClasses="panelc valign, valign, valign, valign" columns="4" width="100%">
      
                  <rich:panel style="width:133px">
                      <f:facet name="header">
                          <h:outputText value="Source List" />
                      </f:facet>
                      <h:dataTable id="src" columns="1" value="#{dragDropBean.source}" var="fm" footerClass="footerClass">
                          <h:column>
                              <a4j:outputPanel layout="#{dragDropBean.lay}" styleClass="rf-ind-drag">
                                  <rich:dragSource type="#{fm.family}" dragValue="#{fm}" />
                                  <h:outputText value="#{fm.name}"></h:outputText>
                              </a4j:outputPanel>
                          </h:column>
                          <f:facet name="footer">
                              <a4j:commandButton action="#{dragDropBean.reset}" value="Start Over"
                                  render="src,phptable,cftable,dnettable" />
                          </f:facet>
                      </h:dataTable>
                  </rich:panel>
                  <rich:panel styleClass="dropTargetPanel">
                      <f:facet name="header">
                          <h:outputText value="PHP Frameworks" />
                      </f:facet>
                      <rich:dropTarget acceptedTypes="php" dropValue="PHP" dropListener="#{dragDropEventBean.processDrop}"
                          render="phptable, src" />
      
                      <h:dataTable id="phptable" columns="1" value="#{dragDropBean.targetPHP}" var="fm">
                          <h:column>
                              <h:outputText value="#{fm.name}"></h:outputText>
                          </h:column>
                      </h:dataTable>
                  </rich:panel>
                  <rich:panel styleClass="dropTargetPanel">
                      <f:facet name="header">
                          <h:outputText value=".NET Frameworks" />
                      </f:facet>
                      <rich:dropTarget acceptedTypes="dotNet" dropValue="DNET" dropListener="#{dragDropEventBean.processDrop}"
                          render="dnettable, src" />
                      <h:dataTable id="dnettable" columns="1" value="#{dragDropBean.targetDotNet}" var="fm">
                          <h:column>
                              <h:outputText value="#{fm.name}"></h:outputText>
                          </h:column>
                      </h:dataTable>
                  </rich:panel>
                  <rich:panel styleClass="dropTargetPanel">
                      <f:facet name="header">
                          <h:outputText value="ColdFusion Frameworks" />
                      </f:facet>
                      <rich:dropTarget acceptedTypes="cf" dropValue="CF" dropListener="#{dragDropEventBean.processDrop}"
                          render="cftable, src" />
      
                      <h:dataTable id="cftable" columns="1" value="#{dragDropBean.targetCF}" var="fm">
                          <h:column>
                              <h:outputText value="#{fm.name}"></h:outputText>
                          </h:column>
                      </h:dataTable>
                  </rich:panel>
              </h:panelGrid>
          </h:form>
          <a4j:outputPanel ajaxRendered="true">
              <h:messages></h:messages>
          </a4j:outputPanel>
      </div>
                </ui:define>
      </ui:composition>
      
      

       

       

       

      help me please.

        • 1. Re: rich:dragSource, doesn't work at all
          healeyb

          I found that when dragSource is a child of a component then the component must have a specific id= or drag 'n drop

          won't work.

           

          Regards,

          Brendan.

           

           

           


          Java Enterprise Developer


          JSF Richfaces Ajax Java 6/7 (scjp) EE 6 HTML CSS JavaScript jQuery MySQL JPA Hibernate Eclipselink

          Spring Oracle SQL JPQL Sybase EJB CDI Glassfish Apache JAX-RS Primefaces UNIX Paypal and more..

          • 2. Re: rich:dragSource, doesn't work at all
            arli

            No. I added id to a4j:outputPanel but it didn't help. But I find one more interesting thing. There is a a4j:command button. If I press it after loading page drag starting to work, but no draggable javascript appears and drop doesn't work. In debag mode it doesn't enter in method processDrop.

            I'm really can't understand what is happening

            • 3. Re: rich:dragSource, doesn't work at all
              healeyb

              Ok, does it work with h:panelGroup?

              • 4. Re: rich:dragSource, doesn't work at all
                arli

                No. With the h:panelGroup it shows the same behavior.

                • 5. Re: rich:dragSource, doesn't work at all
                  healeyb

                  Do you have h:head tags in the template?

                  1 of 1 people found this helpful
                  • 6. Re: rich:dragSource, doesn't work at all
                    maida-35

                    Hi,

                     

                    It such a good topic and thanks for sharing your ideas....

                     

                     

                    ________________________________

                    ebooks with resale rights

                    • 7. Re: rich:dragSource, doesn't work at all
                      arli

                      yes, I have h:head in template

                      • 8. Re: rich:dragSource, doesn't work at all
                        just-greg

                        Add an execute ID for your dropTarget.

                        Probably add an ID to your drag source and then execute it.

                        (Or just executing the ID of one of it's parents).

                         

                        {code}

                        <rich:dropTarget acceptedTypes="cf" dropValue="CF"  execute="theIdOfTheDragSource_OrItsParent"

                        dropListener="#{dragDropEventBean.processDrop}"
                                            render="cftable, src" />

                        {code}

                         

                        That's what's worked for me at any rate.

                         

                        Good luck!!

                        • 9. Re: rich:dragSource, doesn't work at all
                          arli

                          doesn't help.

                          can you look into the source of generated html page.

                          do you have script like

                           

                          $(document).ready(function() { new RichFaces.ui.Draggable("form:src:0:j_idt333",{"parentId":"form:src:0:j_idt332","indicator":null,"type":"php"} ) new RichFaces.ui.Draggable("form:src:1:j_idt333",{"parentId":"form:src:1:j_idt332","indicator":null,"type":"cf"} )  and so on?

                          and what version of richface do you use?

                          • 10. Re: rich:dragSource, doesn't work at all
                            just-greg

                            I use Richfaces 4.2.2 Final

                             

                            Have you tested with multiple browsers?

                             

                            Which JSF implementation are you using? Mojarra ? MyFaces ?

                             

                            Just for thoroughness.....try testing with dropTarget acceptedType set to "all" or list them all explicitly just to test.

                            I recall I had some issues with that at one point.

                             

                            Here is a small subsection of what I use (Note I use the tree and not the table...but it's very similar).

                            (I edited it down slightly to remove extraneous junk).

                            It's not optimized or anything (Executing/Rendering the entire tree for example...but oh well).

                             

                             

                            {code}

                            <a4j:outputPanel id="segmentPanelDragId">

                            <rich:dropTarget acceptedTypes="loop segment element"

                                    execute="mapTreeID @this"

                                    dropListener="#{tb.processDropMove}" render="mapTreeID"

                                    id="segmentdropTarget1" dropValue="#{item}"

                                    oncomplete="alert('Testing To See if this completed');"

                                    immediate="true" onbegin="alert('Test to see if this started!');"

                                    />

                            <rich:dragSource type="segment" dragValue="#{item}" />

                            </a4j:outputPanel>

                             

                            {code}

                             

                             

                            Hope it helps!

                            • 11. Re: rich:dragSource, doesn't work at all
                              arli

                              Problem dissapeared when I replaced < body> tag with < h:body>