uibinder element get with jquery selector fail on chrome/safari

Question

i have uibinder html element like below

       <g:HTMLPanel>
  <div class='thumbnailWrapper'>
     <ul>
         <li>
             <a href='#'><img src='41546-140.jpg' /></a>
             <div class='caption'>
                 <p class='captionInside'>testing javascript</p>
             </div>
         </li>
         <div class='clear'></div><!-- clear the float -->
     </ul><!-- end unordered list -->
</div><!-- end spolightWrapper div -->

<script>
jQ_Zoom();
</script>

        </g:HTMLPanel>

my javascript have no problem executed in firefox,ie. but in safari/ chrome, the javascript is not call. have a look at my uploaded sample at http://bit.ly/ayuFc1 . try open with firefox and compared with chrome/safari

my javascript

function jQ_Zoom(){

      alert('yoyo');    

alert($('.thumbnailWrapper ul li').find('img').height());

}

Answer 1

It looks like you are putting the <script> tag directly in your UiBinder xml, that doesn't look right. I think the correct solution is either:

1. Wrap the Javascript function in a JSNI call.
2. Make your Javascript <script> call in your HTML file (outside of the UiBinder).

The first option is the preferred method of integrating native Javascript with GWT.