When working with GWT, you can easily attach an event listener to any element on the host page

Question

When working with GWT, you can easily attach an event listener to any element on the host page

I am looking to implement a MouseOver event handler for any tag, specifically targeting anchor tags in a legacy HTML page.

Following a GWT guide, I successfully utilized their JSNI method to retrieve all anchor tags with some minor adjustments for errors.

Now, my goal is to bind all the elements collected in an ArrayList to an event handler. How can I achieve this?

Below is the code snippet that I have written:

  private native void putElementLinkIDsInList(BodyElement elt, ArrayList list) /*-{
    var links = elt.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++ ) {
      var link = links.item(i);
      link.id = ("uid-a-" + i);
      <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87ebeef4f3a9c7ede6f1e6a9f2f3eeeba9c6f5f5e6fecba0ebecf7">[email protected]</a>::add(Ljava/lang/Object;) (link.id);
    }
  }-*/;

  /**
   * Find all anchor tags and if any point outside the site, redirect them to a
   * "blocked" page.
   */
  private void rewriteLinksIterative() {
    ArrayList links = new ArrayList();
    putElementLinkIDsInList(Document.get().getBody(), links);
    for (int i = 0; i < links.size(); i++) {
      Element elt = DOM.getElementById((String) links.get(i));
      rewriteLink(elt, "www.example.com");
    }
  }

 /**
   * Block all accesses out of the website that don't match 'sitename'
   * 
   * @param element
   *          An anchor link element
   * @param sitename
   *          name of the website to check. e.g. "www.example.com"
   */
  private void rewriteLink(Element element, String sitename) {
    String href = DOM.getElementProperty(element, "href");

    if (null == href) {
      return;
    }

    // We want to re-write absolute URLs that go outside of this site
    if (href.startsWith("http://")
        && !href.startsWith("http://" + sitename + "/")) {
      DOM.setElementProperty(element, "href", "http://" + sitename
          + "/Blocked.html");
    }
  }

javascript gwt

Answer 1

Answer №1

If you're looking to select specific elements within a document, consider using the

Document.getElementsByTagName("a")

method. This will give you a NodeList that can be cast to AnchorElements to access the 'href' attribute.

Here is an example of how you can achieve this:

NodeList<Element> elems = Document.get().getElementsByTagName("a");
for (int i = 0; i < elems.getLength(); i++) {
  Element elem = elems.getItem(i);
  AnchorElement a = AnchorElement.as(elem);
  if (!a.getHref().startsWith("http://yoursite.com")) {
    a.setHref("http://yoursite.com/blockedpage");
  }
}

To add an event handler, you can wrap the Element in an Anchor using wrap()

for (int i = 0; i < elems.getLength(); i++) {
  Element elem = elems.get(i);
  Anchor a = Anchor.wrap(elem);
  a.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      Window.alert("yay!");
    }
  });
}

(If the handler will always do the same thing, consider creating one ClickHandler and adding it to all elements instead of creating a new handler for each element)

Answer 2

If you're looking to select specific elements within a document, consider using the

Document.getElementsByTagName("a")

method. This will give you a NodeList that can be cast to AnchorElements to access the 'href' attribute.

Here is an example of how you can achieve this:

NodeList<Element> elems = Document.get().getElementsByTagName("a");
for (int i = 0; i < elems.getLength(); i++) {
  Element elem = elems.getItem(i);
  AnchorElement a = AnchorElement.as(elem);
  if (!a.getHref().startsWith("http://yoursite.com")) {
    a.setHref("http://yoursite.com/blockedpage");
  }
}

To add an event handler, you can wrap the Element in an Anchor using wrap()

for (int i = 0; i < elems.getLength(); i++) {
  Element elem = elems.get(i);
  Anchor a = Anchor.wrap(elem);
  a.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      Window.alert("yay!");
    }
  });
}

(If the handler will always do the same thing, consider creating one ClickHandler and adding it to all elements instead of creating a new handler for each element)

When working with GWT, you can easily attach an event listener to any element on the host page

Answer №1

Similar questions

Reduce the size of a container element without using jquery

File uploading using JQuery and AJAX

How can I use jQuery to automatically redirect to a different HTML page after updating a dynamic label?

ajax ignores output from php

Is there a way to adjust the contents of an iframe to match the dimensions of the iframe itself?

Comparing Window.Location.reload() to AJAX: Which is the better

Set a delay for an AJAX request using jQuery

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

Storing the Outcome of a mongodb Search in a Variable

Utilizing eval properly in JavaScript

The visibility of the Google +1 button is lost during the partial postback process in ASP.NET

What is the reason behind the array.map() function not altering the original array?

Is it possible to select multiple drop-down lists on a webpage using Python and Selenium?

Is there a way I can link a variable to a URL for an image?

What is the Angular approach for configuring a form's encoding type to application/json?

Send an array and a single string to a PHP script using an Ajax request

Retrieve 10000 sets of coordinates in real time with the help of Google Maps

JavaScript Alert function doesn't wait for execution

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Enable automatic profile login for the Firebase application