Getting data back from a mustache template Moodle 3.7 - javascript

I am doing some development in moodle 3.7 for a new admin tool plugin. In this plugin I am generating a page from a custom made .mustache template. This template contains a number of values that are defined and managed within it, that I want to access within my .php file once a submit button is pressed.
Currently however I am unable to access these submitted values that are defined within the template. I can see their values in debugging under $form->_form->_submitValues but I cannot get to them due to _form being a protected variable of $form. I called $form->get_data(), but that only gave me access to the elements that I defined in php as non html elements (hidden for example), not in the template. I'm not sure if this is the right place to ask this question, but if anyone has any help they could give me on a path forward it would be much appreciated.
I am adding the template to the page using the function:
$mform->addElement(
'html',
$OUTPUT->render_from_template(PLUGIN_TOOL_NAME/members', $rendercontext)
);
Please let me know any other information you may need.

Any variables that you want to have access to must be defined in the mform using these functions:
$mform->addElement('hidden', 'VARIABLE_NAME');
$mform->setType('VARIABLE_NAME', PARAM_INT);
Any JavaScript that needs to update these values must be in a separate .js file, not in your template. If the JavaScript works in your mustache file, it will still do exactly the same thing if you put it in a different .js file, as long as that .js file is included on the page.
One thing to note: if you use the functions I defined above, the variable will not have an ID. instead it will have a name equal to whatever you put as VARIABLE_NAME. This means however that you cannot use document.getElementByID() to get the instance of your variable. instead you will have to use document.getElementsByName("VARIABLE_NAME")[0] to get access to your element.
If both of these things are done than you should see the value update and be sent to your mform on submit within the $data variable.

Related

Access a variable from a jsp file

I have created two jsp pages. I passed a list from jsp page and displayed the contents of the list in the second page using this: ${user.rate},${user.location}etc..
Now, I want to store one of these elements in a local variable for performing some arithmetic operations. I don't know how to save the variables locally and use it.
Kindly help me.
I found the answer. I used c tags to store my values.
<c: set var=name_of_variable value=${user.location} />
And I can access the variable using the 'name_of_variable'.

Using gsp layout declared variable in javaScript file that is being loaded in the same page

I recently started learning grails and I am trying to use a gsp variable declared in the layout of the page as:
<g:set var="abtestType" value="newSearchBar" />
in the js file that is being loaded on the same page. Things that I have tried:
alert(${abtestType});
alert(<%=abtestType%>);
alert("abtestType:"+abtestType);
but its showing error as variable is not defined. Probably I am trying to fetch it in wrong way, need help regarding this.
Even thinking about doing so neither makes sense nor applicable.
Reason for such statement is that when a gsp page is rendered to an html page, it replace grails tags with appropriate html tags or value. Similarly it replaces the ${} or <%%> with html or javascript or whatever that goes on front-end.
Hence the code that you have tried could have worked fine if you were having those javascript code lines in the gsp itself but as you have called externalised js file it actually don't know anything about gsp or jsp or any other Language's front-end support.
The one way of doing that if using global variable in javascript. e.g.
declare abtestType above like below:
<script>
var abtestType = "${abtestType}"
</script>
Now you have access to global variable abtestType in your javascript.
Use it in your javascript but remember now you need to have this variable iff the code using it is called otherwise very same error would you get i.e. variable is not defined
There is another way that I found in this post but is a manipulation actually.
Is there any analogue in Javascript to the __FILE__ variable in PHP?
Also, another good links is
Pass vars to JavaScript via the SRC attribute
Hope it helps!

what is the mean of question mark with variable name after the name of js file in src attribute of the script tag?

can any one explain for me what is the mean of question mark with variable name after the name of js file in src attribute of the script tag ?.
for example here
src="http://localhost/SamaJordan/wp-includes/js/jquery/jquery-migrate.min.js ?ver=1.2.1 "
in the above example you can find this ?ver=1.2.1.
we know that after php file name it is considered as a variable and we can get its value by using the super global array GET , but how can we take advantage of it when we send it after the javascript file name?
To prevent the site from breaking during updates. When whole site is updated including the JS files, users may end up using the new HTML but is still using the old js because the browser caches the files. If you add a unique identifier like "scripts?version=1.1" then it will be considered as a separate file and will use the new JS.

Getting data into js program through parameter or by reading Joomla URL of calling page

This seems a dumb question but as a new JS programmer I can't find a way to do this. I can pass parameters to functions but cannot see how to pass a parameter to a program.
I have a JS program called from within a Joomla module. The program uses AJAX to get data from an XML file, manipulate it and then output it to HTML through a jQuery call of:
jQuery('#eventsContent').append(htmlEvents.join(''));`
where, in the HTML I have: "
<div id="eventsContent"></div>
Depending on what page I am on in a Joomla module (or which module I am calling the program from), I want to set a variable within the JS program which tell me how to filter the data. My reference, within the module to the program is simply in the program declaration of:
<script type="text/javascript" src="program_name.js"></script>
Is there some way I can append my parameter there and then access it in the program?
Even better yet for me as it would then be a single module, is there a way the program can read the current page from the URL. From it, I could derive the variable value.
Can this be done one way or another?

Dojo widget inline editing

I created a dojo widget for displaying a form data. I want to enable inline editing in this widget. First I started experimenting by writing html as strings in JavaScript. I don't want to do this. dojo provides an interface dojo.cache() to load html files as templates. Used this method to load the template data for form view.
For form edit. An ajax call will be sent and I will recieve the field type data. Based on this I have to parse the html to an inline editor.
My question is, How to use dojo.cache() and acquire the html based on the input type. The template might contain data like
<input type="text" />
or
<select></select>
or
<textarea></textarea>
or
<div class="autocomplete"></div>
or something more ... Can I define all these templates in one file and get the file using dojo.cache() ? In this case I'm stuck at how to select the required field.
I'm not sure how complex the templates that you would be bringing in via dojo.cache are, but have you considered using dojo.create() as an alternative? This will allow to programmatically create the DOM elements as well.
In regards to your solution, I was confused at first at what you are trying to do but I think I get it now. Within the page that you are displaying the data, you want the user to be able to choose some data to edit and when they do that action, an appropriate editable container will show up in its place for them to change the data?
If this is the case, I definitely dojo.create() is a better alternative to this than the HTML templates pulled in from dojo.cache.
dojo.create could easily be used with variables that come back from your service XHR call so that the type of element that is created will be dependent on the response you get from the server.
var editEle = dojo.create(data.elementType); (assuming data is the name of the variable you have your response and elementType is a property on that containing the type of element that needs to be created.
You can also pass an object literal to the second argument of dojo.create to specify parameters on the node:
dojo.create('input', {type: 'text'});

Categories

Resources