CODEWITHSUNDEEP
javascriptphpjsonjoomla
xanderh
xanderh

Reputation: 113

passing php variables to javascript in joomla

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.

Upvotes: 1

Views: 2042

Answers (1)

Craig
Craig

Reputation: 9330

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

Upvotes: 3

Related Questions