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


          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.




            I have created a seperate thread here





            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"



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

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


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

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




                        <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}" />


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





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

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








            here is what is rendered from firefox fire bug



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





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