CODEWITHSUNDEEP
javascriptphpfunction
Yeo Tze Tian
Yeo Tze Tian

Reputation: 123

Performing two functions in a single click

I have two functions which i would like to combine together. The first function is an Ajax script that will call a location by the ID and returning the result in

div id="showLocation"

echo '<input type="button" name="submitLocation" id="submitLocation" value="show location" onclick="showLocation('.$row['ID'].'); return false;" />';

echo '<div id="showLocation"><b></b></div>';

The second function is to trigger the google map, letting it know the location to display on the map. 

 <input type="button" value="Geocode" onclick="codeAddress()">

show location function

function showLocation(str) {
  if (str=="") {
    document.getElementById("showLocation").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("showLocation").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","viewLocation.php?q="+str,true);
  xmlhttp.send();
}

code address function

function codeAddress() {
  var address = document.getElementById('showLocation').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });

Upvotes: 0

Views: 100

Answers (4)

EasyBB
EasyBB

Reputation: 6574

You should be able to create one single function with these.

function geoLocationCombo(str){
    showLocation(str);
    codeAddress();
}

Though you can also create a single function with both of these together.

 function performGeolocationCheck(str) {

     if (str == "" || !str) {
         document.getElementById("showLocation").innerHTML = "";
         return;
     }

     if (window.XMLHttpRequest) {
         // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp = new XMLHttpRequest();
     } else { // code for IE6, IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             var address = xmlhttp.responseText;
             geocoder.geocode({
                     'address': address
                 }, function (results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                         map.setCenter(results[0].geometry.location);
                         var marker = new google.maps.Marker({
                             map: map,
                             position: results[0].geometry.location
                         });
                     } else {
                         alert('Geocode was not successful for the following reason: ' + status);
                     }
                 }
             }
             xmlhttp.open("GET", "viewLocation.php?q=" + str, true);
             xmlhttp.send();
         }

Just a quick example my friend, as the combination is worth showing.

POLYFILL:

if (!document.addEventListener)
{
  document.addEventListener=function(type,fn){
        document.attachEvent("on"+type,fn);
      };
}

Upvotes: 2

jun_mich0327
jun_mich0327

Reputation: 28

You can also use addEventListener or attacEvent.

<script>
// just to check if button exists
if (document.getElementById("submitLocation")) {
var submitLocation = document.getElementById("submitLocation");
if (!submitLocation.addEventListener)
{
    // add event for IE 9 below
    submitLocation.attachEvent('onclick', function () {
        showLocation(str);
        codeAddress(); 
    });
} esle {
    submitLocation.addEventListener('click', function () {
        showLocation(str);
        codeAddress(); 
    });
}
}
</script>


<input type="button" id="submitLocation" value="Geocode" onclick="GeocodeClick()">

Upvotes: 0

Tai
Tai

Reputation: 1254

Great answers above I just wanted to add a few things you may want to remember. I'm assuming that you're somewhat new to this sort of thing based on the question. If not, maybe this will serve a reference for someone else. Creating a single function that may call more functions is called nesting. Nesting functions is a common trick to make programs simpler to follow. For example a setup function may call a variety of other functions involved in setup. It can help keep though processes together.

The above answers are correct however it is important to note for future reference that you may run into issues of scope or need to remember to pass in variables to both.

When you code something like this to encompass two functions (nesting) you can add a certain amount of complexity and additional work for the stack. Depending on the language it may mean that you need to add additional garbage collection calls. 

function geoLocationCombo(str){
    showLocation(str);
    codeAddress();
}

You can also store inner local variables if you want when nesting for example: 

function geoLocationCombo(str){
    location l = showLocation(str);
    codeAddress(l);
}

Upvotes: 1

Eddie
Eddie

Reputation: 26854

<input type="button" value="Geocode" onclick="GeocodeClick()">

Make a function to call the 2 functions.

function GeocodeClick(){
        showLocation(str);
        codeAddress(); 
}

Upvotes: 2

Related Questions