11 Replies Latest reply on Jun 22, 2011 6:24 PM by Anil Jacob

    rich:jquery not working with jquery extension cloud zoom

    Anil Jacob Newbie

      Hi,

       

         I have a rich query extention(cloud zoom) that i am trying to integrate with the richfaces. I am dynamically loading an image and as soon as the image is loaded I want the jquery extension to fire. When I refresh the whole page the jquery extension is firing but when dynamically load the image the query is not firing. Any help is greatly appreciated.

       

       

      Thanks

      Anil

        • 1. rich:jquery not working with jquery extension cloud zoom
          Nick Belaevski Master

          Hi Anil,

           

          Can you please explain more how do you load image dynamically?

          • 2. Re: rich:jquery not working with jquery extension cloud zoom
            Anil Jacob Newbie

            Sure Nick,

             

               I have a richdatatable of image thumbnails on the nav bar. When user clicks on it I load an image dynamically to the content area. That is when i want the cloud zoom(or jqzoom) to fire and show the zoom window next to the image in the content area. I currently have it kinda working with jqzoom jquery extension, but its unreliable(and creates a lot of div's without cleaning up) because i am using the onRowMouseUp event to call the jquery function on mouseover(which is a very convoluted way!). 

             

            I tried calling the rich:jquery in the rerenderer of a4j:support, but that didnt work. that is when I used the onRowMouseUp  event on the datatable.

             

            I tied the the timing="onload"  but the problem then is the jqzoom dont work only when I click the thumbnail and load the image in the content arean and then do a page refresh.

             

            Any help is greatly appreciated. I am struggling with this issue since last one month.

             

            Thanks

            Anil

             

            Below is the code...

             

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html 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:sandbox="http://richfaces.org/sandbox/jQueryPlugin"
                  xmlns:a4j="http://richfaces.org/a4j"
                  xmlns:rich="http://richfaces.org/rich">
                 
            <head>
            <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
            <title>
                <ui:insert name="title"/>
            </title>
            <link rel="STYLESHEET" type="text/css" href="${facesContext.externalContext.requestContextPath}/css/common.css"/>
            <link rel="stylesheet" href="${facesContext.externalContext.requestContextPath}/css/jqzoom.css"/>

             


            <ui:include src="/templates/include/dynamic-css.xhtml" />
            </head>

             

            <body>
            <sandbox:jQueryPlugin src="/scripts/jquery.jqzoom1.0.1.js"></sandbox:jQueryPlugin>
            <ui:include src="/templates/include/header.xhtml" />
            <h:form id="jobDocSuggestionbox_form">
                <script type="text/javascript">//<![CDATA[
                    jQuery(function() {
                        jQuery(".jqzoom").jqzoom();
                    });       
                    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>

             

            <table class="left_menu" cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr>
                    <td>
                               
                            <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}" reRender="imageList,aliasJQueryPanel">
                                            <f:setPropertyActionListener value="#{result.lineNumber}" target="#{jobDocSuggestionBox.selectedLineNbr}" />
                                        </a4j:support>                               
                                    </rich:suggestionbox>
                                    <div id="state"></div>
                                    <style>
                           
                                        .row {height: 100px;}
                                        .rich-sdt-column-cell-body {height: 100px; text-align: center;valign:center}                   
                                        #preview{
                                            position:absolute;
                                            border:1px solid #ccc;
                                            background:#888;
                                            padding:5px;
                                            display:none;
                                            color:#fff;
                                            }
                                        .content_container {
                                            left: 0;
                                            position: absolute;
                                            top: 95px;
                                        }
                                        .content_container_left_brick {
                                            background-color: transparent;
                                            width: 235px;
                                        }
                                        .rich-sdt-column-cell {
                                            -moz-box-sizing: border-box;
                                            -moz-user-focus: normal;
                                            background-color: black;
                                            border-bottom: 0 solid;
                                            border-right: 0 solid;
                                        }                                                                                                                               
                                      </style>   
                       
                                        <rich:scrollableDataTable rowKeyVar="rkv" height="700px"
                                            width="200px" id="imageList" rows="400" rowClasses="row"
                                            value="#{jobDocSuggestionBox.imgRecs}" var="thbnl"  border="0"
                                            selection="#{jobDocSuggestionBox.thbNlselection}" onRowMouseUp="selectRowT1(this)">
                                           
                                            <rich:column id="thumbnail" width="180px">
                                                    <h:graphicImage class="preview" value="#{thbnl.imgLocThumbnail}"  />                                                                                                                                      
                                            </rich:column>
                                            <a4j:support event="onRowClick" actionListener="#{jobDocSuggestionBox.onSelectImage}" reRender="imgViewerAreaPanel,jqzoomJQuery">
                                                <f:setPropertyActionListener value="#{thbnl.imgLocMedium}" target="#{jobDocSuggestionBox.selectedImage}" />
                                            </a4j:support>                               
                                           
                                        </rich:scrollableDataTable>
                                        <a4j:outputPanel id="aliasJQueryPanel" ajaxRendered="true">
                                            <rich:jQuery selector="#imageList tr img" query="mouseover(function(){var imgFileName=this.src;imgFileName = imgFileName.replace(&quot;MAOPThumbnail&quot;, &quot;MAOPMedium&quot;);jQuery(&quot;body&quot;).append(&quot;&lt;p id='preview'&gt;&lt;img src='&quot;+ imgFileName +&quot;' alt='&quot;+imgFileName+&quot;' /&gt;&lt;/p&gt;&quot;);jQuery(&quot;#preview&quot;).css(&quot;top&quot;,(5) + &quot;px&quot;).css(&quot;left&quot;,(325) + &quot;px&quot;).fadeIn(&quot;fast&quot;);})"/>
                                                <rich:jQuery selector="#imageList tr img" query="mouseout(function(){jQuery(&quot;#preview&quot;).remove()})"/>                                               
                                        </a4j:outputPanel>
                                   
                                   
                   
                                    <rich:spacer height="30px" />
                                   
                                </h:panelGroup>
                            </h:panelGrid>
                       
                    </td>
                </tr>
            </tbody>
            </table>

             

            <table cellpadding="0" cellspacing="0" border="0" class="content_container" width="100%">
            <tbody>
                <tr>
                    <td>
                        <div class="content_container_left_brick"></div>
                    </td>
                    <td width="100%" class="content_container_pdddings">
                        <fieldset class="demo_fieldset">
                            <legend class="demo_legend">Job Document Viewer</legend>
                            <div class="sample-container">
                                <a4j:outputPanel id="imgViewerAreaPanel">
                                    <h:outputLink id="imgViewerAreaHref" value="/MAOPDocViewer2#{jobDocSuggestionBox.selectedImageHighRes}" class="jqzoom" title="#{jobDocSuggestionBox.imgFileName}">
                                           
                                            <h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{jobDocSuggestionBox.selectedImage}" />                               
                                    </h:outputLink>                                                                                           
                                </a4j:outputPanel>
                                <rich:jQuery name="selectRowT1" id="jqzoomJQuery" timing="onJScall" query="mouseover(function(){jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();});    })" />
                            </div>
                        </fieldset>
                       
                    <rich:spacer style="height:10px;" />
                    <rich:separator style="height:1px" />   
                    </td>
                </tr>
            </tbody>
            </table>

             

            </h:form>
            </body>
            </html>

             

             

             

             

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html 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:sandbox="http://richfaces.org/sandbox/jQueryPlugin"
                  xmlns:a4j="http://richfaces.org/a4j"
                  xmlns:rich="http://richfaces.org/rich">
                 
            <head>
            <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
            <title>
                <ui:insert name="title"/>
            </title>
            <link rel="STYLESHEET" type="text/css" href="${facesContext.externalContext.requestContextPath}/css/common.css"/>
            <link rel="stylesheet" href="${facesContext.externalContext.requestContextPath}/css/jqzoom.css"/>

             


            <ui:include src="/templates/include/dynamic-css.xhtml" />
            </head>

             

            <body>
            <sandbox:jQueryPlugin src="/scripts/jquery.jqzoom1.0.1.js"></sandbox:jQueryPlugin>
            <ui:include src="/templates/include/header.xhtml" />
            <h:form id="jobDocSuggestionbox_form">
                <script type="text/javascript">//<![CDATA[
                    jQuery(function() {
                        jQuery(".jqzoom").jqzoom();
                    });       
                    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>

             

            <table class="left_menu" cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr>
                    <td>
                               
                            <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}" reRender="imageList,aliasJQueryPanel">
                                            <f:setPropertyActionListener value="#{result.lineNumber}" target="#{jobDocSuggestionBox.selectedLineNbr}" />
                                        </a4j:support>                               
                                    </rich:suggestionbox>
                                    <div id="state"></div>
                                    <style>
                           
                                        .row {height: 100px;}
                                        .rich-sdt-column-cell-body {height: 100px; text-align: center;valign:center}                   
                                        #preview{
                                            position:absolute;
                                            border:1px solid #ccc;
                                            background:#888;
                                            padding:5px;
                                            display:none;
                                            color:#fff;
                                            }
                                        .content_container {
                                            left: 0;
                                            position: absolute;
                                            top: 95px;
                                        }
                                        .content_container_left_brick {
                                            background-color: transparent;
                                            width: 235px;
                                        }
                                        .rich-sdt-column-cell {
                                            -moz-box-sizing: border-box;
                                            -moz-user-focus: normal;
                                            background-color: black;
                                            border-bottom: 0 solid;
                                            border-right: 0 solid;
                                        }                                                                                                                               
                                      </style>   
                       
                                        <rich:scrollableDataTable rowKeyVar="rkv" height="700px"
                                            width="200px" id="imageList" rows="400" rowClasses="row"
                                            value="#{jobDocSuggestionBox.imgRecs}" var="thbnl"  border="0"
                                            selection="#{jobDocSuggestionBox.thbNlselection}" onRowMouseUp="selectRowT1(this)">
                                           
                                            <rich:column id="thumbnail" width="180px">
                                                    <h:graphicImage class="preview" value="#{thbnl.imgLocThumbnail}"  />                                                                                                                                      
                                            </rich:column>
                                            <a4j:support event="onRowClick" actionListener="#{jobDocSuggestionBox.onSelectImage}" reRender="imgViewerAreaPanel,jqzoomJQuery">
                                                <f:setPropertyActionListener value="#{thbnl.imgLocMedium}" target="#{jobDocSuggestionBox.selectedImage}" />
                                            </a4j:support>                               
                                           
                                        </rich:scrollableDataTable>
                                        <a4j:outputPanel id="aliasJQueryPanel" ajaxRendered="true">
                                            <rich:jQuery selector="#imageList tr img" query="mouseover(function(){var imgFileName=this.src;imgFileName = imgFileName.replace(&quot;MAOPThumbnail&quot;, &quot;MAOPMedium&quot;);jQuery(&quot;body&quot;).append(&quot;&lt;p id='preview'&gt;&lt;img src='&quot;+ imgFileName +&quot;' alt='&quot;+imgFileName+&quot;' /&gt;&lt;/p&gt;&quot;);jQuery(&quot;#preview&quot;).css(&quot;top&quot;,(5) + &quot;px&quot;).css(&quot;left&quot;,(325) + &quot;px&quot;).fadeIn(&quot;fast&quot;);})"/>
                                                <rich:jQuery selector="#imageList tr img" query="mouseout(function(){jQuery(&quot;#preview&quot;).remove()})"/>                                               
                                        </a4j:outputPanel>
                                   
                                   
                   
                                    <rich:spacer height="30px" />
                                   
                                </h:panelGroup>
                            </h:panelGrid>
                       
                    </td>
                </tr>
            </tbody>
            </table>

             

            <table cellpadding="0" cellspacing="0" border="0" class="content_container" width="100%">
            <tbody>
                <tr>
                    <td>
                        <div class="content_container_left_brick"></div>
                    </td>
                    <td width="100%" class="content_container_pdddings">
                        <fieldset class="demo_fieldset">
                            <legend class="demo_legend">Job Document Viewer</legend>
                            <div class="sample-container">
                                <a4j:outputPanel id="imgViewerAreaPanel">
                                    <h:outputLink id="imgViewerAreaHref" value="/MAOPDocViewer2#{jobDocSuggestionBox.selectedImageHighRes}" class="jqzoom" title="#{jobDocSuggestionBox.imgFileName}">
                                           
                                            <h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{jobDocSuggestionBox.selectedImage}" />                               
                                    </h:outputLink>                                                                                           
                                </a4j:outputPanel>
                                <rich:jQuery name="selectRowT1" id="jqzoomJQuery" timing="onJScall" query="mouseover(function(){jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();});    })" />
                            </div>
                        </fieldset>
                       
                    <rich:spacer style="height:10px;" />
                    <rich:separator style="height:1px" />   
                    </td>
                </tr>
            </tbody>
            </table>

             

            Nick Belaevski wrote:

             

            Hi Anil,

             

            Can you please explain more how do you load image dynamically?

            </h:form>
            </body>
            </html>

            timing=""

            • 3. Re: rich:jquery not working with jquery extension cloud zoom
              Anil Jacob Newbie

              Did you get a chance to look at it Nick?

               

              Thanks

              Anil

              • 4. Re: rich:jquery not working with jquery extension cloud zoom
                Nick Belaevski Master

                Anil,

                 

                I'm sorry but haven't got a chance to investigate in-depth yet.

                • 5. Re: rich:jquery not working with jquery extension cloud zoom
                  Anil Jacob Newbie

                  Hi Nick,

                   

                   

                      When you get time can you take a look into this?

                   

                  Thanks

                  Anil

                  • 6. Re: rich:jquery not working with jquery extension cloud zoom
                    Anil Jacob Newbie

                    Hi Nick,

                     

                        Just wanted to ping to make sure this is on your list. any help is much appreciated.

                     

                    Thanks

                    Anil

                    • 7. Re: rich:jquery not working with jquery extension cloud zoom
                      Nick Belaevski Master

                      Anil,

                       

                      I'm still loaded with other tasks - but your question is on my list

                      • 8. Re: rich:jquery not working with jquery extension cloud zoom
                        Anil Jacob Newbie

                        Hi Nick, sorry to keep bugging you, did you get a chance to look into this issue.

                         

                        Thanks

                        Anil

                        • 9. Re: rich:jquery not working with jquery extension cloud zoom
                          Nick Belaevski Master

                          Anil,

                           

                          I'm sorry, but still couldn't get to it.

                          • 10. Re: rich:jquery not working with jquery extension cloud zoom
                            Nick Belaevski Master

                            Ok, I've taken a look. Here is the sample of my code:

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                            <html 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:sandbox="http://richfaces.org/sandbox/jQueryPlugin"
                                      xmlns:a4j="http://richfaces.org/a4j"
                                      xmlns:rich="http://richfaces.org/rich">
                            
                            
                            <head>
                            <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
                            <title><ui:insert name="title" /></title>
                            <a4j:loadStyle src="/css/jqzoom.css" />
                            
                            
                            <a4j:loadScript src="resource:///jquery.js" />
                            <a4j:loadScript src="/js/jquery.jqzoom-core.js" />
                            </head>
                            
                            
                            <body>
                                      <h:form id="jobDocSuggestionbox_form">
                                                <rich:dataTable value="#{capitalsBean.capitals}" var="capital" rowKeyVar="idx">
                                                          <rich:column>
                                                          #{capital.name}
                                                          </rich:column>
                                                          <a4j:support event="onRowClick" reRender="imgViewerAreaPanel"
                                                                    oncomplete="jQuery('.jqzoom').jqzoom()">
                                                                    <f:setPropertyActionListener value="#{capital}"
                                                                              target="#{selectedCapital}" />
                                                                    <f:setPropertyActionListener value="#{idx}"
                                                                              target="#{selectedCapitalIndex}" />
                                                          </a4j:support>
                                                </rich:dataTable>
                                                <div class="sample-container">
                                                          <a4j:outputPanel id="imgViewerAreaPanel">
                                                                    <h:outputLink id="imgViewerAreaHref"
                                                                              value="#{facesContext.externalContext.requestContextPath}/images/capitals/#{selectedCapitalIndex}.JPG"
                                                                              class="jqzoom">
                                                                              <h:graphicImage id="imgViewerArea"
                                                                                        style="border: 1px solid #666;"
                                                                                        value="#{selectedCapital.stateFlag}" />
                                                                    </h:outputLink>
                                                          </a4j:outputPanel>
                                                </div>
                            
                            
                                      </h:form>
                            </body>
                            </html>
                            
                            

                             

                            Garbage images are left in body if there were errors loading images, so make sure you have valid paths - graphicImage does additional processing of paths, while h:outputLink dooes not!

                            • 11. Re: rich:jquery not working with jquery extension cloud zoom
                              Anil Jacob Newbie

                              Thank you very much Nick for your time and effort, that worked. I used to use ICEFaces, you have a convert now.

                               

                              I think what i was missing was calling the jqzoom on the onComplete event.

                               

                              Anil