Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I am trying to call javascript function with parameter that are php variables. I have tried 2 approaches.

  1. calling javascript function in php with script tags in echo i.e

    <?php
echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';
?>

  2. assigning php variables values to javascript variables 

     <script>
 var lat="<?php echo $lat;?>";
 var lang="<?php echo $lang; ?>";
 var zoom="<?php echo $zoom; ?>";
 alert(lat+lang+zoom);
 initialize(lat,lang,zoom);
 </script>

In first case function is called as I cross-checked from page source but parameters passed are undefined. And in 2nd case values are successfully saved in javascript varibles ,Check it by alert(), but fuction is not called.

please anybody help me .I will be thankful.

Here is the whole code:

<!DOCTYPE html>

<html>

<head>

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

    </script>
<?php
     if(  isset($_POST['lat']) && isset($_POST['lang']) && isset($_POST['zoom']) && isset($_POST['city'])):

        $lat=$_POST['lat']; 

        $lang=$_POST['lang'];

        $zoom=$_POST['zoom'];

        $city=$_POST['city'];
        $zom=(int)$zoom;
              var_dump($lang);
        var_dump($lat);
        //var_dump($zoom);
              var_dump($zom);
          //echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';

    endif;

?>          


<script>
var lat="<?php echo $lat; ?>";
var lang="<?php echo $lang; ?>";
var zoom="<?php echo $zoom; ?>";
alert(lat+lang+zoom);
initialize(lat,lang,zoom);
</script>

    <script>


function initialize(a,b,zom){        

    if (!a || !b ||!zom){ 
    alert('came on not' +a+b +zom);

    //      var centerLoc=new google.maps.LatLng( 33.61701054652337,73.37824736488983);

          zoom=16;

    }

    else

    {
        alert('came');

        var zoom =parseInt(zom);

        var centerLoc=new google.maps.LatLng(a,b);

    }

       var mapProp = {

            center:centerLoc,

            zoom:zoom,

            //mapTypeId:google.maps.MapTypeId.ROADMAP

            mapTypeId:google.maps.MapTypeId.SATELLITE

       };  

       var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp);

            marker=new google.maps.Marker({

                  position:centerLoc,

                  title:'Click to zoom'

             });

    google.maps.event.addListener(marker,'click',function() {

                map.setZoom(map.getZoom()+1);

                map.setCenter(marker.getPosition());

       });

            marker.setMap(map);

}

       google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body style= "background-color:gainsboro;">

    <form method="POST"  action="myPage.php" >

        Enter latitude:     <input type ="text" name="lat" id="lat" / ><br/>

        Enter longitude:    <input type ="text" name="lang"  id="lang"/ ><br/>

        Enter City Name:    <input type="text" name="city" id="city"/><br/>

        Enter Zoom level:   <input type ="text" name="zoom"  id="zoom"/ ><br/>

                        <input type="button" value ="Perview" onclick=" initialize(

                     document.getElementById('lat').value,

                     document.getElementById('lang').value,

                     document.getElementById('zoom').value)"/>

                        <input type="Submit"  value="Save" />

    </form>

                        <center><div id="googleMap"  style="width:1000px;height:500px;"></div></center>

</body>

</html>
share|improve this question
2  
Check the JavaScript console for errors. – str Mar 24 at 18:26
When you execute echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';, what do you get in the source code of the generated page? – Jean Mar 24 at 18:26
initialize(30,70,5); – Rabeel Mar 24 at 18:27
Try to debug your js - for example, using Chrome's console – evgenyl Mar 24 at 18:29
Do you call this function, or it just "exists"? You would perhaps need to call it in body onload, something onclick etc. – Voitcus Mar 24 at 18:30
show 15 more commentsadd comment (requires an account with 50 reputation)

3 Answers

up vote 1 down vote

Call the function when the browser finished loading the javascript.

<script>
     window.onload = function() {
         var lat="<?php echo $lat; ?>";
         var lang="<?php echo $lang; ?>";
         var zoom="<?php echo $zoom; ?>";
         alert(lat+lang+zoom);
         initialize(lat,lang,zoom);
     };
</script>
share|improve this answer
Thanks for your response but I dont need it to be called on window load – Rabeel Mar 24 at 20:04
add comment (requires an account with 50 reputation)
up vote 1 down vote

Use json_encode(). If you don't there will always be the possibility you escaped your data incorrectly as it passes from the PHP to the HTML/JS layer.

$vars = array($lat, $lang, $zoom);
// JSON_HEX_TAG and JSON_HEX_AMP are to remove all possible surprises that could be
// caused by vars that contain '</script>' or '&' in them. The rules for 
// escaping/encoding inside script elements are complex and vary depending 
// on how the document is parsed.
$jsvars = json_encode($vars, JSON_HEX_TAG | JSON_HEX_AMP);

echo "<script>initialize.apply(null, $jsvars)</script>";

In general, for your sanity, all data that is in PHP that you need to make available to js running on the current page should be collected into a single PHP array and then placed into a single js object. For example:

<?php
$jsdata = array(
   'formvars' => array('lat','lang','zoom',
   'username' => $username,
   'some_other_data' => $more stuff
);
?>
<script>
  var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;
  initialize(JSDATA.formvars.lat, JSDATA.formvars.lang, JSDATA.formvars.zoom);
</script>

Now there is only a single point of contact between the JS and PHP/HTML layers so you can easily keep track of what you are putting into the JS namespace.

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

Just call on the predefined java script code like jsFunction() ; in your php code

share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.