{"id":2592,"date":"2019-03-18T19:53:51","date_gmt":"2019-03-18T14:23:51","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=2592"},"modified":"2025-02-27T16:36:17","modified_gmt":"2025-02-27T11:06:17","slug":"struggling-to-pass-values-from-php-to-javascript-in-moodle-heres-a-solution","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/struggling-to-pass-values-from-php-to-javascript-in-moodle-heres-a-solution","title":{"rendered":"Struggling to Pass Values from PHP to Javascript in Moodle? Here&#8217;s a solution"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\">Lots of Moodle developers have been struggling to pass dynamic values to the JS page. Some developers tend to write inline JavaScript code in the PHP page itself, which is a bad practice and Moodle discourages the same.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Some create hidden elements in the DOM and access the values in the JS files. But this approach would create an unnecessary element in the DOM.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Now let\u2019s explore the correct and the easiest way to pass values to JS files.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Follow the below steps to pass variable values to JS files.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Step 1. First include the JavaScript file on your PHP page.<\/span><\/p>\n<pre><textarea class=\"xml\" name=\"code\">1.\t$PAGE-&gt;requires-&gt;js('local\/myplugin\/module.js');  <\/textarea><\/pre>\n<p><span style=\"font-size: 14pt;\">Step 2. Then initialize that file with the following values as follows;<\/span><\/p>\n<pre><textarea class=\"xml\" name=\"code\">1.\t$PAGE-&gt;requires-&gt;js_init_call('init', array(array('first'=&gt;1  \n2.\t    , 'second'=&gt;2)));  \n<\/textarea><\/pre>\n<p><span style=\"font-size: 14pt;\">where the first argument to js_init_call is the initialization function name that will be written on the JavaScript page and will be called automatically when the page loads.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Below is the code for init function to be written in the js page<\/span><\/p>\n<pre><textarea class=\"xml\" name=\"code\">1.\tvar initvalues;  \n2.\tfunction init(Y, initvariables){  \n3.\t    initvalues = initvariables;  \n4.\t    console.log(initvalues);  \n5.\t    console.log(initvalues.first);  \n6.\t    console.log(initvalues.second); \n7.\t}   \n<\/textarea><\/pre>\n<p><span style=\"font-size: 14pt;\">Note that the first parameter Y, which is an instance of the YUI object, is automatically passed to our function by the Page Requirements Manager.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">The second parameter is the variable in which we are actually receiving the initialization data<\/span><\/p>\n<div style=\"margin: 40px auto; border: 2px solid #FF4500; padding: 20px 25px; border-radius: 6px; background: 0;\">\n<div style=\"display: inline-block; vertical-align: middle; width: 62%;\"><span style=\"font-size: 14pt;\"><strong>Are You Looking for Moodle Development Solutions?<\/strong><\/span><\/div>\n<div style=\"display: inline-block; vertical-align: middle; width: 36%;\"><span style=\"font-size: 14pt;\"><a style=\"padding: 10px 22px; margin-bottom: 0; line-height: 1.3em; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #ff4500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: block;\" href=\"\/moodle-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">Call us today!<\/a><\/span><\/div>\n<\/div>\n<p><span style=\"font-size: 14pt;\">You can see that we have assigned the initvariables value to initvalues global variable and now we can use this global variable throughout the js page.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Try printing the initvalues values in console out of the scope of init function<\/span><\/p>\n<pre><textarea class=\"xml\" name=\"code\">1.\tconsole.log(initvalues);  <\/textarea><\/pre>\n<p><span style=\"font-size: 14pt;\">This will print all the values in the form of a JavaScript object.<\/span><\/p>\n<p><span style=\"color: #800000; font-size: 14pt;\"><strong>Contributed By:<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Surendra Prasad<\/span><\/p>\n<hr \/>\n<div class=\"newsletter_form\">\n<hr \/>\n<h2>Sign up our Newsletter!<\/h2>\n<div class=\"es_form_container\">\n<form class=\"es_shortcode_form\" data-es_form_id=\"es_shortcode_form\">\n<div class=\"es_lablebox\"><label class=\"es_shortcode_form_email\">Email *<\/label><\/div>\n<div class=\"es_textbox\"><input id=\"es_txt_email\" class=\"es_textbox_class\" maxlength=\"60\" name=\"es_txt_email\" required=\"\" type=\"email\" value=\"\" \/><\/div>\n<div class=\"es_button\"><input id=\"es_txt_button\" class=\"es_textbox_button es_submit_button\" name=\"es_txt_button\" type=\"submit\" value=\"Subscribe\" \/><\/div>\n<div id=\"es_shortcode_msg\" class=\"es_msg\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lots of Moodle developers have been struggling to pass dynamic values to the JS page. Some developers tend to write inline JavaScript code in the PHP page itself, which is a bad practice and Moodle discourages the same. Some create&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2595,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[353],"tags":[355,774,773],"class_list":["post-2592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lms","tag-moodle-development","tag-moodle-solutions","tag-pass-values-from-php-to-javascript"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=2592"}],"version-history":[{"count":10,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2592\/revisions"}],"predecessor-version":[{"id":11310,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2592\/revisions\/11310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/2595"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=2592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=2592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=2592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}