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

    rich:dragSource, doesn't work at all

    arli
    arli Oct 2, 2012 12:01 PM

      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
          healeyb Oct 2, 2012 5:38 PM (in response to arli)

          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..

            • Actions
          • 2. Re: rich:dragSource, doesn't work at all
            arli
            arli Oct 3, 2012 8:10 AM (in response to healeyb)

            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

              • Actions
            • 3. Re: rich:dragSource, doesn't work at all
              healeyb
              healeyb Oct 3, 2012 7:16 PM (in response to arli)

              Ok, does it work with h:panelGroup?

                • Actions
              • 4. Re: rich:dragSource, doesn't work at all
                arli
                arli Oct 4, 2012 11:09 AM (in response to healeyb)

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

                  • Actions
                • 5. Re: rich:dragSource, doesn't work at all
                  healeyb
                  healeyb Oct 6, 2012 4:19 AM (in response to arli)

                  Do you have h:head tags in the template?

                  1 of 1 people found this helpful
                    • Actions
                  • 6. Re: rich:dragSource, doesn't work at all
                    maida-35
                    maida-35 Oct 6, 2012 8:29 AM (in response to healeyb)

                    Hi,

                     

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

                     

                     

                    ________________________________

                    ebooks with resale rights

                      • Actions
                    • 7. Re: rich:dragSource, doesn't work at all
                      arli
                      arli Oct 8, 2012 7:39 AM (in response to healeyb)

                      yes, I have h:head in template

                        • Actions
                      • 8. Re: rich:dragSource, doesn't work at all
                        just-greg
                        just-greg Oct 8, 2012 2:04 PM (in response to arli)

                        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!!

                          • Actions
                        • 9. Re: rich:dragSource, doesn't work at all
                          arli
                          arli Oct 10, 2012 8:52 AM (in response to just-greg)

                          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?

                            • Actions
                          • 10. Re: rich:dragSource, doesn't work at all
                            just-greg
                            just-greg Oct 10, 2012 10:09 AM (in response to arli)

                            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!

                              • Actions
                            • 11. Re: rich:dragSource, doesn't work at all
                              arli
                              arli Oct 25, 2012 11:02 AM (in response to arli)

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

                                • Actions