jQuery component inside a dataTable

[twistah]

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.

[nbelaevski]

Hello,

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

[aniljcb]

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}

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