How to link the anchor tags inside the table to a js function?

Question

Hi :) I need some help for this. I have a problem on how to show my modals in simply clicking the "View Location" button inside the table. Once I hit it the modals will show but I cant do this. Here' s my code:

echo "<td><a href='');\">View Location</a></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";

This is my js coming from the free source:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function ic() {
$("#btnShow").click(function ic() {
    $("#dialog").dialog({
        modal: true,
        title: "Google Map",
        width: 600,
        hright: 450,
        buttons: {
            Close: function ic() {
                $(this).dialog('close');
            }
        },
        open: function ic() {
            var mapOptions = {
                center: new google.maps.LatLng(14.8527393, 120.8160376),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map($("#dvMap")[0], mapOptions);
        }
    });
});
});
</script>

My problem is in this part echo "View Location"; I have no idea to make it functional. Is anyone here knows how to solve this? Thanks for helping!

Answer 1

If you are using PHP try this:

echo "<td><button id="btnShow">View Location</button></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function ic() {
    $("#dialog").dialog({
        modal: true,
        title: "Google Map",
        width: 600,
        hright: 450,
        buttons: {
            Close: function ic() {
                $(this).dialog('close');
            }
        },
        open: function ic() {
            var mapOptions = {
                center: new google.maps.LatLng(14.8527393, 120.8160376),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map($("#dvMap")[0], mapOptions);
        }
    });
});
});
</script>

Answer 2

The jQuery syntax $("#btnShow").click is saying "When something with an ID of btnShow is clicked."

Therefore, by giving your link an ID of btnShow, you'll cause the function to fire.

echo "<td><a href='' id='btnShow'>View Location</a></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";

If you want the button to have a hand cursor, you may want echo "<td><a style='cursor: pointer;' href='' id='btnShow'>View Location</a></td>"; echo "<td><a style='cursor: pointer;' href='' id='btnShow'>View Location</a></td>";

EDIT: I think I've misunderstood. If you're trying to popup a location based on the person, and not have the page change windows, you'll have to do this through AJAX.

The PHP would be something like:

echo "<td><a href='' onclick='btnShow(".$query2['ID'].")'>View Location</a></td>";

Essentially what the code above does now is call a jquery function called "btnShow(ID)" which you'd have to create. This function would do an AJAX call to a PHP page that grabs the latitude and longitude from a server based on the ID you've passed. On success, it would then call your 'free source' formula, replacing the latitude and longititude with the values retrieved from the AJAX call.

I realize this sounds daunting but jQuery makes AJAX calls much easier than they sound. I wish I had more time at the moment to type out a function for you, however I do not. I hope this at least moved you in the right direction though!

EDIT 2: To be clear, the function that you're calling right now - the free source one - has a set latitude and longitude. No matter what "View Location" button you click, it will ALWAYS show the same location. If you're trying to do this, then I can give you a simple script.

However, if you're trying to change location based on the person, this is way more in depth, and would be achieved using the method I've outlined in my original edit.