JBossDeveloper

This problem happens on JBossAS (4.2.2.GA in my case). On tomcat 6 everything is working fine.

We must ask RF team why is that.

RF team: why is that?

The component and sample source is available here:

svn://bernard.labno.pl/richfaces/ui/jQueryPlugin

svn://bernard.labno.pl/richfaces/samples/jQueryPlugin-sample

Bernard,

I cannot checkout the code:

svn: Can't connect to host 'bernard.labno.pl': A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.

Nick, this must be your connection problem, cause i'm at my customer's headquarters right now and i'm able to check-out the sources.

Downloaded the project, here is the necessary correction:

<sandbox:jQueryPlugin src="/jquery.pnotify.js"/>

<sandbox:jQueryPlugin src="/fullcalendar.js"/>

<sandbox:jQueryPlugin src="/jquery-ui-1.8.7.custom.min.js"/>

<sandbox:jQueryPlugin src="/jquery.idleTimeout.js"/>

Hi Guys,

   I am trying to use this new feature to add a jquery plugin at http://cssglobe.com/lab/tooltip/02/ on my images in a scrollableDataTable. I am kinda new to RichFaces so need some hits here. Thank you in advance.

Here is what I did so far.

1. Added the sandbox namespace for jquery plugin

      xmlns:sandbox="http://richfaces.org/sandbox/jQueryPlugin"

2. Added the jar file for the new feature

     jQueryPlugin-3.3.4-SNAPSHOT.jar

3. Included the jquery plagin script file(ImgPopUp.js=main.js)

     <sandbox:jQueryPlugin src="scripts/ImgPopUp.js" />

4. Added the required script

                    #preview{

                        position:absolute;

                        border:1px solid #ccc;

                        background:#888;

                        padding:5px;

                        display:none;

                        color:#fff;

                        }

                    /*  */   

5. Added class="preview" to the h:graphicImage component

     <h:graphicImage class="preview" value="/richfaces/jQuery/images/Binder1_Page_006.jpg"  />

What else should I do to get this jquery working? I am using Richfaces 3.2.2.GA version. Here is my full xhtml file.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:h="http://java.sun.com/jsf/html"

      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:a4j="http://richfaces.org/a4j"

      xmlns:sandbox="http://richfaces.org/sandbox/jQueryPlugin"

      xmlns:rich="http://richfaces.org/rich">           

    <script type="text/javascript">//<![CDATA[

        function processObjectsChange(suggestionBox) {           

            var items = suggestionBox.getSelectedItems();

                var jobNbr;

                var lineNbr;

                var srce;

                if (items && items.length > 0) {

                    for ( var i = 0; i < items.length; i++) {

                        jobNbr = items[i].jobNumber;

                        lineNbr = items[i].lineNumber;

                        srce = items[i].srcLoc;   

                    }

                    document.getElementById('state').innerHTML = "Job Number: "+jobNbr+"<br>Line Number: "+lineNbr+"<br>Source: "+srce;

                }else{

                    document.getElementById('state').innerHTML = '';

                }               

        }

    //]]></script>     

    <h:form id="jobDocSuggestionbox_form">

        <sandbox:jQueryPlugin src="scripts/ImgPopUp.js" />

        <p>Please type in at least three numbers of the job number you are searching for.</p>

        <h:panelGrid columns="2" columnClasses="sb_test_column1,sb_test_column2" width="100%">

            <h:panelGroup>

                <h:inputText value="#{jobDocSuggestionBox.selectedJobId}" id="text">

                </h:inputText>

                <rich:suggestionbox id="jobDocSuggestionBoxId" for="text"

                    usingSuggestObjects="true" onobjectchange="processObjectsChange(suggestion)" fetchValue="#{result.jobNumber}"

                    suggestionAction="#{jobDocSuggestionBox.autocomplete}" var="result" minChars="3" width="350">

                    <f:facet name="header">

                        <h:outputText value="Job Number" />

                    </f:facet>                   

                    <h:column>

                        <h:outputText value="#{result.jobNumber}" />

                    </h:column>           

                    <h:column>

                        <h:outputText value="#{result.lineNumber}" />

                    </h:column>           

                    <h:column>

                        <h:outputText value="#{result.srcLoc}"/>

                    </h:column>   

                    <a4j:support event="onselect" actionListener="#{jobDocSuggestionBox.onSelectEntity}">

                        <f:setPropertyActionListener value="#{result.lineNumber}" target="#{jobDocSuggestionBox.selectedJobNbr}" />

                    </a4j:support>                               

                </rich:suggestionbox>

                <div id="state"></div>

                <style>

                    .row {height: 100px}

                    .dr-sdt-c-0 {height:80px;}                   

                    .pic-normal {width: 120px;border: 2px solid #ACBECE;}

                    .wrap1 {

                        width:190px;

                        height: 130px;

                        float: left;           

                    }   

                    /*  */                   

                    #preview{

                        position:absolute;

                        border:1px solid #ccc;

                        background:#888;

                        padding:5px;

                        display:none;

                        color:#fff;

                        }

                    /*  */                                                                                  

                  </style>               

                    <rich:scrollableDataTable rowKeyVar="rkv" height="400px"

                        width="200px" id="imageList" rows="20" rowClasses="row"

                        value="#{dataTableScrollerBean.allCars}" var="category"  border="0"

                        selection="#{dataTableScrollerBean.selection}">

                        <rich:column id="thumbnail" >              

                        </rich:column>

                    </rich:scrollableDataTable>   

                <rich:spacer height="30px" />

            </h:panelGroup>

        </h:panelGrid>

    </h:form>

</ui:composition>

Please do not post the same question in both main and development forum.

Problem might be the path here:

{code:xml}<sandbox:jQueryPlugin src="scripts/ImgPopUp.js" />{code:xml}

Did you notice how it is done in demo?

{code:xml}<sandbox:jQueryPlugin src="/fullcalendar.js"/>{code:xml}

Mark the leading slash.

Sorry about the double post. i have deleted the post from the other place. I did add the leading slash but still no luck. :-(. As you can see from thr FB console, the java script ImgPopUp.js is ot loaded at all.

Change your script loading strategy to DEFAULT.

Thank you for your continued support. I did change the loading strategy to DEFAULT. Now the jquery script is loading but, when i mouse over the image in the table its not poping up. I get the following error in the FB. It says

ImgPopUp.js.jsf (line 2)

$(document).ready is not a function

this.imagePreview=function(){xOffset=1...t).ready(function(){imagePreview();});

Here is the full java script in ImgPopUp.js

this.imagePreview = function(){   

    /* CONFIG */

        xOffset = 10;

        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor

        // you might want to adjust to get the right result

    /* END CONFIG */

    $("a.preview").hover(function(e){

        this.t = this.title;

        this.title = "";   

        var c = (this.t != "") ? "<br/>" + this.t : "";

        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                

        $("#preview")

            .css("top",(e.pageY - xOffset) + "px")

            .css("left",(e.pageX + yOffset) + "px")

            .fadeIn("fast");                       

    },

    function(){

        this.title = this.t;   

        $("#preview").remove();

    });   

    $("a.preview").mousemove(function(e){

        $("#preview")

            .css("top",(e.pageY - xOffset) + "px")

            .css("left",(e.pageX + yOffset) + "px");

    });           

};

// starting the script on page load

$(document).ready(function(){

    imagePreview();

});

and my code in to call the Jquery inside of the scrollableDataTable

                    <rich:scrollableDataTable rowKeyVar="rkv" height="400px"

                        width="200px" id="imageList" rows="20" rowClasses="row"

                        value="#{dataTableScrollerBean.allCars}" var="category"  border="0"

                        selection="#{dataTableScrollerBean.selection}">

                        <rich:column id="thumbnail" >

                            <h:graphicImage class="preview" value="/richfaces/jQuery/images/1s.jpg"  />                                                                      

                        </rich:column>

                    </rich:scrollableDataTable>

                    <rich:jQuery selector="#document" timing="onload" query="imagePreview"/>

Never mind, my JQuery plugin is working now. Thank you very much Bernard! This is awsome!!!!

Thanks you Bernard and team for all the previous help....

I have a page where I use a suggestion box to populate a datatable of image thumbnails. I have a jquery plugin that shows the bigger image of the thumbnail in a pop up when the user mouse hovers over the datatable of thumbnails.

suggestiobbox->onselect->populate datable with thumbnail images->user hovers over the thumbnails->bigger image should pop up.

I want the Jquery plugin work when the datatable is dynamically repopulated from the suggestion box. Currently my JQuery plugin tag is like this, the jquery plugin works only when I refresh the page, not when the datatable gets repopulated with the new thumbnails nased on the suggestion box selection.

Is there anyway I can get my JQuery reloaded aftet the datatable is dynamically populated? Please help

                <h:inputText value="#{jobDocSuggestionBox.selectedJobId}" id="text">

                </h:inputText>

                <rich:suggestionbox id="jobDocSuggestionBoxId" for="text"

                    usingSuggestObjects="true" onobjectchange="processObjectsChange(suggestion)" fetchValue="#{result.jobNumber}"

                    suggestionAction="#{jobDocSuggestionBox.autocomplete}" var="result" minChars="3" width="350">

                    <f:facet name="header">

                        <h:outputText value="Job Number" />

                    </f:facet>                   

                    <h:column>

                        <h:outputText value="#{result.jobNumber}" />

                    </h:column>           

                    <h:column>

                        <h:outputText value="#{result.lineNumber}" />

                    </h:column>           

                    <h:column>

                        <h:outputText value="#{result.srcLoc}"/>

                    </h:column>   

                    <a4j:support event="onselect" actionListener="#{jobDocSuggestionBox.onSelectEntity}" reRender="imageList">

                        <f:setPropertyActionListener value="#{result.lineNumber}" target="#{jobDocSuggestionBox.selectedJobNbr}" />

                    </a4j:support>                               

                </rich:suggestionbox>

                <div id="state"></div>

                <style>

                    .row {height: 200px;}

                    .rich-sdt-column-cell-body {height: 200px; text-align: center;}                   

                    #preview{

                        position:absolute;

                        border:1px solid #ccc;

                        background:#888;

                        padding:5px;

                        display:none;

                        color:#fff;

                        }                                                                          

                  </style>   

                    <rich:scrollableDataTable rowKeyVar="rkv" height="400px"

                        width="200px" id="imageList" rows="20" rowClasses="row"

                        value="#{jobDocSuggestionBox.imgRecs}" var="thbnl"  border="0"

                        selection="#{jobDocSuggestionBox.thbNlselection}">

                        <rich:column id="thumbnail" width="180px">

                                <h:graphicImage class="preview" value="#{thbnl.imgLocThumbnail}"  />                                                                                                                                      

                        </rich:column>

                    </rich:scrollableDataTable>

                    <rich:jQuery selector="#document" timing="onload" query="imagePreview"/>

Make this changes:

{code:xml}<a4j:support event="onselect" actionListener="#{jobDocSuggestionBox.onSelectEntity}" reRender="imageList,imagePreviewPlugin">{code:xml}

{code:xml}<rich:jQuery id="imagePreviewPlugin" selector="#document" timing="onload" query="imagePreview"/>{code:xml}