Question

I have asked something similar but not the same at here (and it’s already answered). Now I have some follow up question and I think it’s better to ask anew (I’ve read the rules and I hope I don’t break any. But if I do please kindly remind me).

I’m loading several cities’ id, name, and positions from a MySQL table and then populate it into an HTML table. There’s also a Google Maps with markers pointing to those cities.

I want an info window to pop up on the city marker when user click one of the HTML row (tr tag). I’m using PHP, Javascript, and XML without any jQuery. I have achieved this far.

Now I’m trying to make the HTML table to be sortable. So when user clicked the th, the data will be sorted according to the th being clicked (for this sample however, it’s only sortable by ID).

The problem is after it’s sorted at least once, the Info Window won’t pop up anymore when the tr is clicked.

My HTML:

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>/* when the th clicked it'll call js function */
             <a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
       </th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

My PHP for creating an XML to populate the markers (my-xml-generator.php):

<?php
    $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
    $arrCities = mysql_query ($query);

    $dom = new DOMDocument('1.0', 'utf-8');
    $node = $dom->createElement ('markers');
    $parNode = $dom->appendChild ($node);

    header('Content-type: text/xml');

    while ($row = mysql_fetch_assoc($arrCities))
    {
            $node = $dom->createElement ('marker');
            $newNode = $parNode->appendChild ($node);
            $newNode->setAttribute ('id', $row['id']);
            $newNode->setAttribute ('name', $row['name']);
            $newNode->setAttribute ('lat', $row['lat']);
            $newNode->setAttribute ('lng', $row['lng']);
    }

    echo $dom->saveXML();
?>

My Google Maps Javascript:

    var gmap = new google.maps.Map (mapDiv, options);

    var arrMarkers = []; 
    var infoWindow = new google.maps.InfoWindow;

    // add markers to the map
    DownloadUrl ("my-xml-generator.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName ("marker");

        for (var i = 0; i < markers.length; i++)
        {
            var id = markers[i].getAttribute("id");

            var lat = parseFloat (markers[i].getAttribute("lat"));
            var lng = parseFloat (markers[i].getAttribute("lng"));
            var pos = new google.maps.LatLng (lat, lng);


            var markerOptions =
            {
                position    : pos,
                map         : gmap,
                draggable   : false
            };

            // add the marker
            var marker = new google.maps.Marker (markerOptions);
            arrMarkers.push(marker);

            // assign onclick event for each tr
            // this is the part that I have to somehow re-run after the sorting is done
            var tr = document.getElementById(id);
            google.maps.event.addDomListener (tr, "click",
                (function(i) {
                    var row = i;
                    return function() {
                        RowClick (row);
                    }
                })(i)
            );


            // add info window
            var html = '<div>' + id + '</div>';

            BindInfoWindow (marker, gmap, infoWindow, html);
        }
    });


    function BindInfoWindow (marker, map, infoWindow, html)
    {
        google.maps.event.addListener (marker, "click", function()
        {
            infoWindow.setContent (html);
            infoWindow.open (map, marker);
        });
    }


    function RowClick (i)
    {
        google.maps.event.trigger (arrMarkers[i], "click");
    }


    function DownloadUrl (url, callback)
    {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4)
            {
                xhr.onreadystatechange = DoNothing;
                callback(xhr, xhr.status);
            }
        };

        xhr.open ('GET', url, true);
        xhr.send (null);
    }

    function DoNothing() {}

My GetData() function (simple and usual one):

function GetData (dataSource, divID)
{
    var xhr = new XMLHttpRequest();

    xhr.open ("GET", dataSource);

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4)
        {               
                var targetDiv = document.getElementById (divID);
                targetDiv.innerHTML = xhr.responseText;
        }
    }

    xhr.send (null);
}

My sort.php (my way of sorting is by running a query again to retrieve the desired sorted results and output the tr rows to the table’s innerHTML):

<?php
   $by = $_GET['by'];
   $val = $_GET['val'];

   $query = "SELECT id, name, lat, lng FROM city ORDER BY $by $val";
   $arrCities = mysql_query ($query);

   // set the new order value
   $val == 'ASC' ? 'DESC' : 'ASC';
?>

   <tr>
       <th>
             <a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
       </th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

When a tr is clicked, the Info Window of the city contained in that tr will pop up correctly. And the sorting also works

But after it was being sorted once than the click events of the tr are obviously gone. How can I reassign it again after it was sorted?

Answer 1

1. Store the ID of the markers.
2. Encapsulate the JS in charge of binding the markers to the rows.
3. Call the encapsulated JS inside the DownloadUrl callback and the GetData function.

Store ID

Make arrMarkers an object: var arrMarkers = {};

Encapsulate Bindings

function BindMarkerRows() {

    for(var id in arrMarkers) {
        var tr = document.getElementById(id);

        google.maps.event.addDomListener (tr, "click",
            (function(marker) {
                return function() {
                    google.maps.event.trigger (marker, "click");
                }
            })(arrMarkers[id])
        );
    }
}

Update DownloadUrl

DownloadUrl ("my-xml-generator.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName ("marker");

    for (var i = 0; i < markers.length; i++) {

        var id = markers[i].getAttribute("id");

        var lat = parseFloat (markers[i].getAttribute("lat"));
        var lng = parseFloat (markers[i].getAttribute("lng"));
        var pos = new google.maps.LatLng (lat, lng);


        var markerOptions =
        {
            position    : pos,
            map         : gmap,
            draggable   : false
        };

        // add the marker
        var marker = new google.maps.Marker (markerOptions);
        arrMarkers[id] = marker; //Here we access the object as an associative array
    }

    BindMarkerRows();
}

Update GetData

function GetData (dataSource, divID)
{
    var xhr = new XMLHttpRequest();

    xhr.open ("GET", dataSource);

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4)
        {
            var status = xhr.status;

            if ((status >= 200 && status < 300) || status === 304)
            {
                var targetDiv = document.getElementById (divID);
                targetDiv.innerHTML = xhr.responseText;
                BindMarkerRows();
            }
        }
    }

    xhr.send (null);
}