I have a button on my form using the Form API... how can I specify what happens when the button is clicked?
It depends on how you added the button in the first place and what you want it to do when clicked.
Read the Form API Moodle Doc
Hi Mary,
That's all I've got at the moment is a button on the assignment settings form by using only this code:
$mform->addElement('button', 'intro', get_string("buttonlabel"));
Basically I want that when the user clicks the button, a string appears in a textarea element.
OK...since you are not getting very far with this. Tell me where the textarea is in relation to the button?
I made a theme based on Aardvark which I called Postit. This had a dropdown section in the page header which opened and closed using a button. The button had a toggle script added via the theme.
https://github.com/lazydaisy/moodle-theme_postit/blob/master/javascript/postittoggle.js
The area that opened to reveal the hidden content was set as an anchor link using
<a id="toggle" href="javascript:postittoggle('profilebar', 'toggle')" > ▼ </a>
And the area that opened when the link was selected was in a section called "profilebar"
https://github.com/lazydaisy/moodle-theme_postit/blob/master/layout/includes/profileblock.php#L34
But this is HTML & PHP with some JavaScript thrown in.
So I guess that the Form API must work in a similar way.
If you look at the Show/Hide sections of a Course Format page when setting up a course in Moodle, that works on the same principal which in effect shows or hides a section of text.
Also if you take my MoreCandy theme where the sideblock title headers rotate 90 degrees and show the title down the left-hand side of the block when opened and along the top when closed, this works purely with CSS styles and the JS that is part of Moodle which CSS classes from show to hide and visa versa.
Hope this helps in some little way?
Cheers
Mary
Is this do-able or I'd need to get involved with javascript's onclick event?
If you want to do this without the page reloading, then yes you'll need to use Javascript. If you want to do it by having the button submit the form then re-loading it with some text in the textarea, then it's doable but it's a pain in the neck.
Would you say Mark that going the Javascript approach is relatively straight forward? It's quite annoying as I only want to display a bit of text in a textarea when the button is pressed :/
Well, the functional code for doing something like this with jQuery is about 2 lines of Javascript, so pretty straightforward yes.
You'll need to learn how to write AMD Javascript modules if you don't know that already, but that's a useful piece of knowledge that's transferable outside of Moodle.
Thanks for that Mark. So I now got the package installed in the top directory of Moodle. I'm not sure if I'm following the guide correctly but I've created the directory and file amd/src/helloworld.js (I've named the file that just for now) in my plugin directory. But now I'm unsure of how to proceed. Could you give me some pointers on what to do next? I've tried my best to follow the guide but the example seems overcomplex to what I want to achieve?
What's your current knowledge level? Have you done general Javascript programming before, have you used the DOM and event handlers, have you used jQuery?
I'd suggest MDN if you need a general introduction to javascript and the Document Object Model (DOM), as well as extensive reference documentation. Beyond that, jQuery's Learning Center has plenty of tutorials, looking at "Selecting Elements" and "Handling Events" should get you most of the way there.
Yes I've done Javasript programming, jQuery and a bit of DOM and event handlers. So can I ask you, I'd add a button element to my form using the Form API? I don't understand how I'd then make a Javascript routine run when the user clicks this button...? As in how would the routine identify the Form API element?
Yes, you can just construct the form as normal with the form API. The $mform->addElement() method accepts a final parameter which is an arbitrary array of HTML attributes to add to the element, so you can use this give the button an ID of your choosing. Your javascript can then use this ID to identify the button and attach a click event handler to it, and the handler function will need to find the textarea (you can set and ID for that too) and alter its contents.
When you include your AMD module in the page with $PAGE->requires->js_call_amd(), you specify which function it should call once the page loads. I usually have a function called "init" which does the job of finding any required elements and attaching event handlers.
When you include your AMD module in the page with $PAGE->requires->js_call_amd(), you specify which function it should call once the page loads. I usually have a function called "init" which does the job of finding any required elements and attaching event handlers.
Hi Mark. Ok got it, thanks for that. Would you mind in just explaining what I should do after installing and running Grunt.. The guide in 'Javascript Modules' says this:
I'm quite confused by this..So I'd create the directory myplugin/amd/src? Then store my javascript file, myplugin.js in there? Would I also have to manually create the directory myplugin/amd/build? I don't understand when it says "After running grunt = the minified javascript files are stored...." Is this process done automatically? I'm not sure what grunt actually does.. I've read up about it and it still doesn't make sense to me Am I right in saying that after creating the files myplugin.js and myplugin.min.js I can then call the function in my plugin php script with what you described, $PAGE->requires->js_call_amd()?