[aniljcb]

Thanks Bernard,

  I did make those changed but it still didnt work.Then I tried the following

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

That didnt work either. Then i got rid of the ImagePop.js file completly and moved its contents into the xhtml file like this

{code:xml}
                    <a4j:outputPanel id="imagePreviewPlugin" ajaxRendered="true">
                        <rich:jQuery selector="#imageList tr img" query="mouseover(function(){var imgFileName=this.src;imgFileName = imgFileName.replace(&quot;MPPThumbnail&quot;, &quot;MPPMedium&quot;);jQuery(&quot;body&quot;).append(&quot;&lt;p id='preview'&gt;&lt;img  alt='&quot;+imgFileName+&quot;' /&gt;&lt;/p&gt;&quot;);jQuery(&quot;#preview&quot;).css(&quot;top&quot;,( 25) + &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>
{code}

This finally worked, still wondering why it didnt work when it is called from inside the file ImgPop.js

now i am having scrollable datatable issue.... 

here is the code for my datatable of images

{code:xml}
                    <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>
{code}

Since I say the rows="20". i could see the image preview for the first 20 images in the table using the JQuery plugin, when I scroll to 21 and above images in the table the preview is missing. Is this a bug?

[aniljcb]

Bernard,

   going back to the previous issue, do you know why the JQuery tag do not call the JQuery function even after the Jquery tag is called in a rerenderer.

Example:-

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

        jQuery(function() {

            alert('inside the page');

            jQuery(".jqzoom").jqzoom();

        });

    </script>

.....................

                                <a4j:support event="onRowClick" actionListener="#{jobDocSuggestionBox.onSelectImage}" reRender="imgViewerAreaPanel,jqzoomJQuery">

                                    <f:setPropertyActionListener value="#{thbnl.imgLocMedium}" target="#{jobDocSuggestionBox.selectedImage}" />

                                </a4j:support>

...................

                    <a4j:outputPanel id="jqzoomJQuery">

                        <rich:jQuery selector=".jqzoom" query="jqzoom"/>

                    </a4j:outputPanel>

the jqzoom jquery plugin is getting called only when the page is loaded/reloaded. When the a row is selected the jquery plugin is not getting called.

Thanks for you help again

[aniljcb]

Never mind....figured it out

added  onRowMouseUp="selectRowT1(this)" on the richdatatable

and on the jquery that i need to trigger dynamically I used this

<rich:jQuery name="selectRowT1" timing="onJScall" query="mouseover(function(){jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();});    })" />

Thanks Christopher!

[rcordoba]

Hi Bernard,

   I´m trying to use jQueryPlugin to integrate an external jquery plugin (JFlow plus) in Richfaces 3.3.3. I succeed to make the plugin work, but now all the richfaces components, such as, calendar or suggestionBox stopped to work.

This is my plugin code inserted in the body:

<!-- JFlow Plus Slider Jquery Plugin -->

     <link href="css/jflow.style.css" type="text/css" rel="stylesheet"/>

  <script type="text/javascript">

  jQuery(document).ready(function(){

     jQuery("#myController").jFlow({

  controller: ".jFlowControl", // must be class, use . sign

  slideWrapper : "#jFlowSlider", // must be id, use # sign

  slides: "#mySlides",  // the div where all your sliding divs are nested in

  selectedWrapper: "jFlowSelected",  // just pure text, no sign

  effect: "flow", //this is the slide effect (rewind or flow)

  width: "1000px",  // this is the width for the content-slider

  height: "400px",  // this is the height for the content-slider

  duration: 400,  // time in milliseconds to transition one slide

  pause: 5000, //time between transitions

  prev: ".jFlowPrev", // must be class, use . sign

  next: ".jFlowNext", // must be class, use . sign

  auto: true

     });

  });

  </script> 

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

  <sandbox:jQueryPlugin src="/scripts/jflow.plus.min.js" />

One note: I wasn´t able to make the plugin work with the original link to jquery library: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>. So, I downloaded the jquery code and save it in /scripts/jquery.google.js.

Hope you can help me.

Thanks.

Roberto.

[blabno]

Hi,

Do not include

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

cause jquery from RichFaces will be automatically included by the jQueryPlugin

[rcordoba]

Hi Bernard,

   thanks for your quick response.

I have removed what you said, but then the JFlow plugin doesn´t work anymore.

Maybe, it´s because JFlow is using JQuery 1.4.2 (this is the line with the external library call)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

and, as you said at the very beggining of this discussion, Richfaces 3.3.3 is using Jquery 1.3.

Any suggestion?

Thanks,

Roberto.

[blabno]

Try reading this:

• https://community.jboss.org/wiki/CommonClientSide#jsconflicts
• http://tudip.blogspot.in/2012/04/use-newer-version-of-jquery-with.html
• http://tech.top21.de/techblog/20100819-boosting-the-performance-of-jquery-1-3-2-with-the-sizzle-selector-engine-1-0-of-jquery-1-4-2.html

[rcordoba]

Hi Bernard,

   thank you so much. I finally made it work just following this post you suggested:

http://tudip.blogspot.in/2012/04/use-newer-version-of-jquery-with.html

However, there is still something that is not working.

I have in the same view, a suggestionBox, calendar and comboBox inputs, and below them the Slider JFlow jquery plugin. The problem is when I click on the calendar input, the calendar is shown to choose a date, but when the slider change the image, the calendar is hidden automatically and you have to click again to show it. However, this is not happening with the suggestionBox and comboBox, I mean, when you click on the suggestionBox, the options are shown and are not hidden when the slide change.

I need the calendar stays opened.

Any suggestion?

Thank you so much.

Roberto.