How to add an HTML link that triggers an event?

[NewSmartGWTGuy]

Hello,

I am wondering how I would go about adding a javascript action to a link within an HTMLFlow. I have the server returning HTML which is dumped into an HTMLFlow an displayed in my center pane. I would like to be able to add hyperlinking within a page (ie. a table of contents) that fire an event.

Since this is all rendered as JS at the end, I figured that I would just have to find the 'onclick' event within the navigation and add that to my HTMLFlow. It's not proving to be that simple though. I'm definitely not a javascript pro, but if there was a programmatic way to determine the correct function name that is called by smartgwt then I should be able to add script code directly into the HTMLFlow that does the same thing right?

thanks

[svjard]

Not exactly, it depends on what type of event you are looking to execute on the hyperlink click. Give an example of what you would like to accomplish and we can work on an example from there.

[NewSmartGWTGuy]

My TreeGrid is pretty simple and I'm trying to replicate a click on one of it's node as an <a link>

The code is

navTreeGrid.addCellClickHandler(new CellClickHandler() {
   public void onCellClick(CellClickEvent event) { 
      reportHTML.clear();
      updateReportSectionContent(
                        event.getRecord().getAttribute("clickEventTarget"));
   }  
});

Where "clickEventTarget" is a string like "3.4.6"

So all I need to be able to do is call 'updateReportSectionContent' with a string.

Something like <a href='LiveReport.html' onClick="updateReportSectionContent('3.4.6')">Report Section 3.4.6</a>

would be perfect.

I did find this in the generated JS. So I guess I just need to know what 'this$static' is.

function $updateReportSectionContent(this$static, id){
var proxy;
$clear(this$static.reportHTML);
this$static.reportHTML.setAlign(($clinit_370() , CENTER));
$setContents(this$static.reportHTML, '<center><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loading...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="/css/RuntimeMovie.gif"<\/center><\/td> <\/tr><\/table><\/div><img src="/images/honeybottom.png" width="35%" border="0"/><\/div><\/div>');
$draw(this$static.reportHTML);
proxy = create_2();
proxy.getSectionContent(this$static.locale, this$static.reportID, id, $LiveReport$4(new LiveReport$4, this$static, id));
}

Thanks!

[svjard]

You need to use JSNI, see http://code.google.com/support/bin/answer.py?hl=en&answer=75695, it actually isn't too bad.

[NewSmartGWTGuy]

This ended up being a very small amount of code, but it did take me several iterations to get it working correctly.. thought I'd give a better example than the one google provides.

First of all, here's what I wanted to do: Expose a function that I had defined in my main GWT class so that it could be executed via an HTML link.

My main class is com.mypackage.client.LiveReport
and it has a method called updateSectionContent that is called in ClickHandlers from other widgets. I want this method exposed to an HTML link. SectionIds are represented as Strings.

The code which I need in my LiveReport.java class is very simple.

public static native void initHyperLink (LiveReport lr) /*-{
   $wnd.updateSectionContent = function (sectionID) {
     lr.@com.mypackage.client.LiveReport::updateSectionContent(Ljava/lang/String;)(sectionID);
	   };
	}-*/;

To dynamically build the function, you have to call the initHyperLink function in onModuleLoad():

initHyperLink(getInstance());

where getInstance() returns the singleton reference to the active GWT object.

And then the HTML code was easy:

<a href="#" onClick='javascript:updateSectionContent('sectionId')'>sectionId</a>

[ttran]

I think I may similar issue but reversed. I have a ListGridFieldType.LINK on a ListGrid. The link would be a url (filename) therefore it will force a download dialog from the browser. However, I want to be able to trap this and ask some question before I allow the client to download the file.

What method should I overide to do this?

I also tried to add a button and not a link. Onclick of the button I open up my dialog box so that the user can answer some question. However, what is proper JavaScript to fire the onclick of a URL (file link)?

TIA,
Tommy

[Isomorphic_Paul]

Not sure exactly what your use case is but you can call the standard GWT Window.Location.assign(...) to redirect the browser to a specific URL, which I think will give you what you need.

[ttran]

That's exactly what I needed. Thnx,

[ttran]

Paul,
This is working for one of my case. However, I do have another case where I need to open multilple URL from a list of URL. The call here seem to be a singleton. Therefore, it is only opening the last URL sent?

TIA,
Tommy,

[Isomorphic_Paul]

Well this is getting into raw GWT / native browser behavior rather than SmartGWT territory really - Window.Location.assign() simply redirects the browser to the URL you specify (it's an equivalent of window.location = "some string" in javascript).
Not sure if there's a clear way to kick off simultaneous downloads of multiple files... One option might be to use Window.open() to pop several new browser windows or similar but I'm not sure if that would be a pleasant user experience. It depends a bit on what you're trying to achieve...

Perhaps also check out the GWT documentation here for more ideas: http://www.gwtapps.com/doc/html/com....nt.Window.html.