3 Replies Latest reply on Mar 30, 2011 3:54 AM by Anil Jacob

    jQuery component inside a dataTable

    PÃ¥l Oliver Kristiansen Newbie

      Why cant I use the jQuery component inside a dataTable?
      I would like to setup a jQuery "trigger" based upon a property in the table entities.

        • 1. Re: jQuery component inside a dataTable
          Nick Belaevski Master

          Hello,

          You can use it. Describe use case and how do you implement it in more details.

          • 2. jQuery component inside a dataTable
            Anil Jacob Newbie

            Hello Nick,

             

              I have similar problem where i try to trigger a jquery when the onrowclick event happens on a daratable row. The JQuery seems to be triggered only when I refresh the page, not when a new row on the page is clicked. i am trying to use the jQuery plugin called jQzoom. i have a table of thumbnails, when the user clikc the thumbnails I load the image in the content area and I expect the jquery jqzoom plugin to be triggered on the image in the content page.

             

            http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

             

            I have created a seperate thread here

             

            http://community.jboss.org/message/595867#595867

             

             

            Thanks for helping

             

             

             

             

            here is the relevent code...

             

             

             

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

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

             

             

             

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

                                            width="200px" id="imageList" rows="400" 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>

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

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

                                            </a4j:support>                               

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

             

                        <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="/MPPDocViewer2#{jobDocSuggestionBox.selectedImage}" class="jqzoom" >

                                            <h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{jobDocSuggestionBox.selectedImage}" />

                                    </h:outputLink>

                                    <rich:jQuery selector=".jqzoom" timing="immediate" query="jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();})"/>                                           

                                </a4j:outputPanel>

                            </div>

                        </fieldset>

             

                    <rich:spacer style="height:10px;" />

                    <rich:separator style="height:1px" />   

                    </td>

                </tr>

            </tbody>

            </table>

             

             

             

            here is what is rendered from firefox fire bug

             

            {code:xml}

            <div class="sample-container"><span id="jobDocSuggestionbox_form:imgViewerAreaPanel"><a id="jobDocSuggestionbox_form:imgViewerAreaHref" name="jobDocSuggestionbox_form:imgViewerAreaHref" href="/MPPDocViewer2/images/MAPP/MPPMedium/2011030617371701.tif" class="jqzoom"><img id="jobDocSuggestionbox_form:imgViewerArea" src="/MPPDocViewer2/images/MAPP/MAPPMedium/2011030617371701.tif" style="border: 1px solid #666;" /></a><script type="text/javascript">//<![CDATA[

            {

                var selector = ".jqzoom";

                try {

                    selector = eval(".jqzoom");

                } catch (e) {}

                jQuery(selector).jQuery(function() {jQuery(".jqzoom").jqzoom();});

            }

            //]]></script></span>

                            </div>

            {code}

            • 3. jQuery component inside a dataTable
              Anil Jacob Newbie

              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();});    })" />