I need to pass a php var to a jQuery script. They are in separate files, one file to php code and another file to jQuery scripts. Is there a way of doing it? I am using Joomla 3.4.1. I just need to get Joomla version in the jQuery script.
Add a comment
|
Javascript have global variables : http://www.w3schools.com/js/js_scope.asp
inside you php file you call: JFactory::getDocument(); and you can now add some javascript at the current page with addScriptDeclaration()
In this example, we declare a myJoomlaVersion variable
<$php
$jdocument = JFactory::getDocument();
$jversion = new JVersion();
$short = $jversion->getShortVersion();
// Add Javascript
$jdocument->addScriptDeclaration(' var myJoomlaVersion = '.$short ); ?>
More info about "Inserting inline scripts from within a PHP file" https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Now you can use this variable into your javascript.
answered Jun 24 '15 at 11:15
-
Thank you for your help. I'm getting the following
SyntaxError: expected expression, got '<'– n.h.Jun 24 '15 at 14:53 -
I have edited my code. A small type on it This new one should work better Jun 25 '15 at 14:45
After this question was originally answered, Joomla introduced in version 3.5 another way of passing variables to javascript, using the addScriptOptions() method of the Joomla Document class. So I'm just adding this to make other people who are interested in this question aware of this alternative.
In your php file you can write eg:
$phpvars = array('alpha' => 1, 'beta' => 'test', 'gamma' => null);
$document = JFactory::getDocument();
$document->addScriptOptions('myvars', $phpvars);
Then in your javascript you can retrieve the values using:
var jsvars = Joomla.getOptions('myvars');
console.log(jsvars);
which will output on the browser console the Javscript Object structure:
{alpha: 1, beta: "test", gamma: null}
You can obviously use this multiple times in your code, using different keys (the key being 'myvars' in the example above).
-
2Though this is a more recent addition to Joomla than the original answer, this is the correct answer for any modern Joomla component Jan 5 '20 at 20:45
-
@Robbie Jackson, I am trying to implement an Openlayer map into my application i accordance with your tutorial. In order to reduce overhead I need to compile an openlayers "bundle" in node.js but node.js does not know what "Joomla.getOptions" means. Do you happen to know how joomla has implemented this mechanism? Then I could probably create a "stub". Thanks a lot. Apr 3 '21 at 22:15
-
@SoaringBird as far as I remember, Joomla just puts these variables into a script tag which it embeds in the document. You should be able to see it via your browser devtools inspector. The Joomla.getOptions js code is in /media/system/js/core-uncompressed.js in your joomla (3.9 ish) instance. Looking at it, it does a document.querySelectorAll() call to find them, so I reckon you could replicate that code without a great deal of difficulty. Best of luck! Apr 5 '21 at 19:31
-
Thanks a lot @Robbie Jackson. We have been writing on our solutions simultaneously. I just updated my question at joomla.stackexchange.com/questions/28963/… with a solution I found myself but yours is better. You are definitely right in your tutorial at docs.joomla.org/J3.x:Developing_an_MVC_Component/Adding_a_Map: It takes a steep learning curve to get into Openlayers. Apr 5 '21 at 19:49
You can achieve this with the use of a global function.
So, in your JS file, you would do something like this:
<script>
var myFunction;
jQuery(document).ready(function($){
myFunction = function(version)
{
console.log(version);
// You have the version here
}
});
</script>
Then, in your default.php, you can get the Joomla version and call the function like so:
<?php
$jversion = new JVersion();
$short = $jversion->getShortVersion();
?>
<script>
jQuery(document).ready(function($){
myFunction('<?php echo $short; ?>');
});
</script>
Hope this helps
