passing php variables to javascript in joomla

Question

I am trying to make a module for joomla that makes a map using the google maps API.

The map itself works fine if the data is hardcoded in the javascript file, but I want to be able to use it easily on multiple sites, so setting all the options from the joomla backend would be preferable. I've been trying to do this with a JSON call, but it returns an error 500 when the page loads. My dev site is: http://dev.xander.dk.web1.symatic.dk/

The relevant code is as follows:

mod_google_maps.php (making the variables and connecting them to the fields in mod_google_maps.xml)

<?php
/**

 * Hello World! Module Entry Point
 * 
 * @package    Joomla.Tutorials
 * @subpackage Modules
 * @link http://docs.joomla.org/J3.x:Creating_a_simple_module/Developing_a_Basic_Module
 * @license        GNU/GPL, see LICENSE.php
 * mod_helloworld is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 */

// no direct access
defined('_JEXEC') or die;
// Include the syndicate functions only once
require_once( dirname(__FILE__) . '/helper.php' );

$mapCenterLat = $params->get('mapCenterLat', '55.395239');
$mapCenterLng = $params->get('mapCenterLng', '10.380180');
$zoom = $params->get('zoom', '18');
$mapDisableUi = $params->get('mapDisableUi', false);
$markerLat = $params->get('markerLat', '55.395239');
$markerLng = $params->get('markerLng', '10.380180');
$markerTitle = $params->get('markerTitle', 'symatic');

helper.php

<?php
function getMapOptionsAjax(){
    $data = array('mapCenterLat' => $mapCenterLat, 'mapCenterLng' => $mapCenterLng, 'zoom' => $zoom, 'mapDisableUi' => $mapDisableUi, 'markerLat' => $markerLat, 'markerLng' => $markerLng, 'markerTitle' => $markerTitle );
    echo json_encode($data);
};
?>

maps.js (only the relevant JSON call)

jQuery.get('index.php?option=com_ajax&module=google_maps&method=getMapOptions&format=json', function(data){
    var mapResponse = data;
    console.log(mapResponse);
});

I have left out the rest of the maps.js file as it is not relevant to this question, and because it works with hardcoded values.

oleq · Accepted Answer · 2015-01-15 13:02:52Z

3

The 500 error is because you are trying access undefined variables in your getMapOptionsAjax().

I believe you are thinking about this the wrong way around.

If you are only wanting to set values that were defined in the backend via Joomla's module manager those are effectively static values (i.e. your $params). So you should set them in your modules template file, i.e. /modules/mod_google_maps/tmpl/default.php

In that file you can add a section that sets some Javascript variables for use by your maps.js file. e.g.

<script>
    var mapCenterLat = <?php echo $params->get('mapCenterLat', '55.395239'); ?>;
    var mapCenterLng = <?php echo $params->get('mapCenterLng', '10.380180'); ?>;
    var zoom = <?php echo $params->get('zoom', '18'); ?>;
    var mapDisableUi = <?php echo $params->get('mapDisableUi', false); ?>;
    var markerLat = <?php echo $params->get('markerLat', '55.395239'); ?>;
    var markerLng = <?php echo $params->get('markerLng', '10.380180'); ?>;
    var markerTitle = '<?php echo $params->get('markerTitle', 'symatic'); ?>';
</script>

Which will render and be sent to the browser as something like this:

<script>
    var mapCenterLat = 55.395239;
    var mapCenterLng = 10.380180;
    var zoom = 18;
    var mapDisableUi = false;
    var markerLat = 55.395239;
    var markerLng = 10.380180;
    var markerTitle = 'symatic'; // Note the quotes added around the echo
</script>

Note: the mapDisableUi will return the value it is assigned in mod_google_maps.xml

Note: the single quotes ' added around the echo for the string value of markerTitle

edited Jan 15, 2015 at 13:02

oleq

15.9k1 gold badge40 silver badges69 bronze badges

answered Jan 11, 2015 at 3:20

Craig

9,3302 gold badges36 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xanderh Over a year ago

That was pretty much perfect. Two things though: First off, every line of the script needs a semi-colon at the end, otherwise it won't work. Secondly, mapDisableUi returned true/false as it should, as that is the two values I assigned it in the xml file. But this was incredibly useful. If you don't mind, could you explain how to make an AJAX call like this work, for future reference?

Craig Over a year ago

@xanderh mybad on the semi-colons, but it was just typed into the browser so caveat emptor, for AJAX calls and Joomla see this answer on the Joomla Q&A StackExchange site.

Collectives™ on Stack Overflow

passing php variables to javascript in joomla

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related