Using jQuery tools from within GWT — is there a way to allow exchanges?

Question

I have a GWT web-app with a nearly full page Google map window. Inside the the map, I have infowindows which include links. What I want to do is use jquery tools overlays (http://flowplayer.org/tools/overlay/apple.html) to open the overlay and display it on top of the map once the link inside the info window is clicked.

Now, the link source is generated dynamically, and it is hosted on a different server, so i have to open it in an iframe and set the source of the iframe before it opens. this seems simple enough since i only have 1 iframe on the page:

    function changeSource(url){
         $("#menuIFrame").attr("src",url);
    }

To call this before opening the overlay (which is done on mouse release), i create the following element in the google maps infowindow via GWT:

<a href="http://whatever.com/menu/" onClick="changeSource('http://whatever.com/menu/');" rel=#menu"> View menu </a>

Jquery tools works by opening whatever div has the id assigned to the value of 'rel', but because i have my javascript/jquery on my LandingPage.html in GWT, there appears to be some sort of disconnect between the two because the overlay is never added to the window.

Here's my app: http://truxmapper.appspot.com/

As you can see, the other overlays will work fine, but once you click an infowindow and try to view the menu, it will simply use the href to open the url in that window.

Does anyone know of a solution that will allow me to accomplish my goal? Thanks!

Answer 1

This answer provided me with some information that I found useful, but it didnt include the 'solution' i found.

i couldnt find a method to have a link from within GWT trigger the "a[rel]" jQuery selector used by jQuery tools. Since it was however, making it to the javascript function, i simply declared the overlay:

$(function() {
$("#menu").overlay({effect: 'apple', mask: 'gray'});    

});

and changed the changeSource function to:

    function changeSource(url){
    $("#menuIFrame").attr("src",url);
    $("#menu").overlay().load();
}

Now, from within GWT the link is href="javascript:changeSource('menu_url.html');" and this seems to be working properly.

Thanks.

Answer 2

Clicking on the link will open the page in the current window as there's nothing stopping it. The onclick handler for the link needs to return false to prevent the default action (open url) from happening. It should look like:

<a href=".." onClick="changeSource(..); return false;" rel=#menu">View menu</a>

Note the return false after changeSource is called. Or you can modify changeSource to return the value itself and simply return whatever changeSource returns. The changeSource function would look like:

function changeSource() {
    // do some work
    return false;
}

Link becomes:

<a href=".." onClick="return changeSource(..);" rel=#menu">View menu</a>

This stops the page from navigating away, and should work as expected from thereon. If it doesn't, it's most likely a problem with jQuery tools. In my testing, the popup window did not show up by default as <div class="menu_overlay">..</div> was hidden with CSS. I did some further hackery to show it by further modifying the onClick to:

onClick="$('.menu_overlay').show(); return changeSource(..);"