eventListener not working properly wit ui:repeat

[GoogleCodeExporter]

What steps will reproduce the problem?

1. I am searching for a way in gmaps4jsf to call a function on a backing bean 
by click on a marker. From similar requests in the web fora I learned, that 
this is not yet possible. Now I am looking to do it via java script functions. 
Probably a bit heavy and no examples unfortunately available.

2. Anyway to start it I implemented a simple test case whether it is possible 
to get js functions working in my case with <m:eventListener> and markers set 
with <ui:repeat>. Below is the full xhtml (see also attached file):

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j" template="/layout/template.xhtml"
    xmlns:m="http://code.google.com/p/gmaps4jsf/">

    <ui:define name="content">

        <h:form>

            <m:map width="500px" height="500px" enableDragging="true"
                autoReshape="true" type="G_SATELLITE_MAP">
                <m:mapControl name="GLargeMapControl"
                    position="G_ANCHOR_BOTTOM_LEFT" />
                <m:mapControl name="GMapTypeControl" />
                <ui:repeat var="point" value="#{nonProtectedPoints}">
                    <m:marker latitude="#{point.coordinate.latitudeDecimal}"
                        longitude="#{point.coordinate.longitudeDecimal}"
                        showInformationEvent="mouseover">
                        <m:eventListener eventName="click" jsFunction="selectCoordinate(#{point.coordinate.latitudeDecimal}, #{point.coordinate.longitudeDecimal})" />
                        <m:icon imageURL="googleIcons/blankRed.png"/>
                        <m:htmlInformationWindow
                            htmlText="#{gmaps4jsfBacking.generateInfoWindow(point)}"> 
                        </m:htmlInformationWindow>
                    </m:marker>
                </ui:repeat>
            </m:map>

            <script>

                function selectCoordinate(latitude, longitude) {
                  alert("You click on (lat, lng): " + latitude + ", " + longitude);
                }   
                function selectLocation(locationId) {
                  alert("You click on (location): " + locationId);
                }   
                function selectProtectedArea(areaCode) {
                  alert("You click on (areaCode): " + areaCode);
                }   

            </script>

        </h:form>

    </ui:define>

</ui:composition>

3.

What is the expected output? What do you see instead?

The expected output is: if I click on one of the markers I get an alert box 
displaying latitude and longitude of this marker. 
Instead I get all these alert boxes when the map is rendered and no reaction 
after that when I click on a marker.  

What version of the product are you using? On what operating system?

I started to use gmaps4jsf-1.1.3-u3.jar.
Then I tried gmaps4jsf-1.1.4-preRelease1.jar. It did not help and I found 
additional issues there (e.g. htmlInformationWindow not working any more). Thus 
I went back to the above mentioned version. The operation system is suse Linux 
10.1.

Please provide any additional information below.
The used framework is JBossAS Tools Version: 1.1.2.GA (Seam Tools for Eclipse 
2.1.2.GA, JSF Facelets and RichFaces)

I would be grateful for notification about solving the issue or possible work 
arounds as I urgently need this in a project. Please mail to 
christoph.germeier@jki.bund.de

Best thanks in advance

Christoph Germeier

Original issue reported on code.google.com by christop...@jki.bund.de on 7 Sep 2010 at 11:44

Attachments:

• gmaps4jsf.xhtml

[GoogleCodeExporter]

This is not an issue at all:

You are trying to pass parameters to the Event handler to do this, change your 
JS function as follows:
                    function selectCoordinate(latitude, longitude) {
                      return function(latlng) {
                        alert("You click on (lat, lng): " + latitude + ", " + longitude);
                      }
                    }   

This will work with both 1.1.3-u3 and 1.1.4-preRelease2-snapshot1[1].

[1] 
http://gmaps4jsf.googlecode.com/files/gmaps4jsf-1.1.4-preRelease2-snapshot1.jar 

Original comment by Hazem.sa...@gmail.com on 30 Oct 2010 at 8:51

• Changed state: Fixed

Attachments:

• test.jsp

[GoogleCodeExporter]

Hi

As Christoph is trying, im trying to call and actionlistener function on my 
backing bean by js function.

This is my JS function

function markerSelected(idMarker) {
        return function(latlng) {
            alert("setting value a hidden");
            document.getElementById('hiddenInput').value = idMarker;
            alert("clicking hidden button");
            document.getElementById('hiddenBtn').click();
            alert("bye");
        };
    }

and these are my ice componentes and map:

<ice:form id="forma">
   <ice:messages />

   <ice:inputHidden id="hiddenInput" value="#{papelerasBean.idMarkerSelected}"></ice:inputHidden>
   <ice:commandButton id="hiddenBtn" actionListener="#{papelerasBean.muestraDetalle}" style="display:none" /> 

   <m:map type="G_NORMAL_MAP" width="500px" height="500px"
                enableScrollWheelZoom="true"
                latitude="#{papelerasBean.latitudeGral}"
                longitude="#{papelerasBean.longitudeGral}" zoom="17">
      <ui:repeat value="#{papelerasBean.papeleras}" var="papelera">
    <m:marker latitude="#{papelera.latitude}"
        longitude="#{papelera.longitude}" jsVariable="pap#{papelera.id}">
       <m:icon                      shadowImageURL="http://www.google.com/mapfiles/shadow50.png"
        imageURL="#{papelera.icon}" />
       <m:htmlInformationWindow htmlText="#{papelera.direccion}" />
       <m:eventListener eventName="dblclick" jsFunction="markerSelected(#{papelera.id})" />
        </m:marker>
      </ui:repeat>

      <m:mapControl name="GLargeMapControl"></m:mapControl>

      <m:polyline lineWidth="5" hexaColor="#ff0000" geodesic="false">
    <ui:repeat value="#{papelerasBean.userSelected.ruta}" var="coor">
       <m:point latitude="#{coor.latitude}" longitude="#{coor.longitude}" />
    </ui:repeat>
      </m:polyline>

   </m:map>
</ice:form>

The problem is that the java script function only executes the first line:

alert("setting value a hidden");

it does not execute the other alerts, do i do something wrong?

Thanks in advance

Original comment by iban...@gmail.com on 20 Jan 2011 at 7:22

[GoogleCodeExporter]

I guess you have a JavaScript error in this line:
document.getElementById('hiddenInput').value = idMarker;

Check your JavaScript console.

Original comment by Hazem.sa...@gmail.com on 20 Jan 2011 at 9:44