11 October 2013, 20:39

Hello everyone, this is my first post so please be gentle with me!

I'm trying to adapt the location input field in the CPD plugin (great plugin by the way!) to use Jquery (or javascript). I want to hook it up to a database with a list of locations, and when the user starts to type (and reaches around 3 or 4  characters), the database will return a sub-dropdown menu with the choices available.

I've tried replacing the entire form in a template which seems to work ok and the jquery side of things work just fine, but then I can't figure out how to get the form data back into the lib.php in order to continue with the rest of the process, as it's expecting a pieform. 

I've also tried creating a new pieform element which also seems to work, but then I can't figure out how to incorporate the Jquery!

I'm very new to my job/ mahara/using templates having just finished uni so I'm kind of in at the deep end with the whole templating business. If anyone has any pointers I'd be so grateful, perhaps at I'm looking at the problem wrong, I just don't know.

13 October 2013, 22:39

Hi Sarah

Glad to hear you are finding the CPD plugin useful.

However, probably can't help much with the jQuery (I guess you are using the jQueryUI Autocomplete widget) / Pieforms integration. During development of the CPD plugin, we used Pieforms, drawing heavily from the design of the existing Plans plugin.

One note about jQuery. Mahara also uses the MochiKit JavaScript library. So, to use jQuery alongside this, you may have to use the jQuery or $j function rather than $ (used by MochiKit). See the code comments in /lib/web.php for details.

Good luck with adding new features to the CPD plugin. If they are useful, I'll be very happy to integrate them into the plugin code.

14 October 2013, 19:23

Hi Sarah and Geoff,

We're not using the plugin and I haven't had a look at the code. But I have some notes on how to loading the JavaScript-Code. I assume you put the code into a separate file. 

If the smarty-Template is created with a clear $smarty = smarty();statement, you can put the path to the javascript file in an array right into the constructor. Look at artefact/blog/view/index.php for an examle. I think this doesn't work if it is created with $smarty=smarty_core()

You can also include the javascript-file in the template, look at artefact/blog/theme/raw/image_popup.tpl for an example. Seems like WWWROOT is generally accessible in the smarty-templates. 

I'm not sure what you mean by "replacing the entire form in a template", did you write your own html-code for a form from scratch instead of using pieforms and hand that to the template? Then you'd have to write your own logic for evaluating the return-data. It seems to me that changing the given pie-form is easier and less work, just replace the entry for the input-field - or just add the javascript-logic that adds the autocomplete-functionality to the input-field if that's all that it takes. If you don't replace the input-element or the new element has the same name, the submit()-function referenced in the pie-form can handle the return-data just as before. 

@Geoff: A question about the jQueryUI: Is that already included in Mahara or would you have to put the jQueryUI-framework into the plugin-code? I disregarded that last idea when I wanted an autocomplete-field because it felt like overkill loading the complete jQueryUI just for one little feature in one plugin. Not sure though if writing the autocomplete-plugin from scratch made more sence in the end. 

And yes, it took me some time to figure out the jQuery()-call instead of $(). Good hint

14 October 2013, 22:10

Hi Geoff andTobias.

Thanks for your replies. I probably will use the Jquery auto complete widget, although I haven't got that far yet!

As I was getting so confused I just cut the form out of the source code from the browser and put that into a variable within the lib.php which gets passed in instead of the the pieform. All I need to do now is add in the callbacks and it should work. I have included Jquery within the function/form but I will try taking it out and using jQuery() instead. At the moment I'm not so bothered about things being optimised as much as I am just getting things to work!

I can't say I'm a fan of pieforms. I've only ever written code from scratch and I prefer having the control to do what I want without trying to figure out a whole different way of doing things. That said I can see the benefit of using template engines and did breifly use Freemarker as part of a MongoDB course I did. At any rate, this has certainly been an experience!

15 October 2013, 3:18

Hi Sarah,

I can understand your initial aversion for pieforms. It took me some time to get used to them myself. But copying the html-code, modifying a bit here and there and then plugging that back into the php-code isn't the same as programming from scratch. 

Another thing to consider is that maybe someone else might have to read your code later on. In that case it will be way easier for him to understand your code if you use the same pieforms as elsewhere in mahara. 

I'm still not sure what to think about pieforms. I found some of the links to documentation on the sourceforge-page broken and I still don't know why the standard-renderer doesn't support container-elements. But it does solve the weirdness of having to deal with the arguments of the form in the targeted page - by calling a submit-function and redirecting. 

So you might want to give the pieforms a try

15 October 2013, 4:39

I didn't mean to imply that I was coding from scratch here... everything I did at university was from scratch (I don't think we'd have got away with refactoring someone else's code there!), the point is I just haven't got my head around templates yet.

I totally understand your comment about someone else having to read the code; deciphering what the heck is going on in mahara in general has highlighted that well enough, but at this point in time I only have two weeks to get what I'm trying to do up and running and I've already done most of this in my own time.

I'm sure I will go back to pieforms at some point as I hate not doing things properly, but for now I'm more interested in it working by any means necessary.

Thanks for your help, it will most definitely come in useful

15 October 2013, 14:04

Yeah, the Mahara Developer docs are woefully incomplete and out of date at this point. I've been meaning to reorganize and revise them, but it's hard to find the time. So, I've started by just re-writing a few pages for now, with the pages I've rewritten stored here for the time being: https://wiki.mahara.org/index.php/User:Aaronw

I'm also not a big fan of Pieforms. It is very useful to have a forms library, in order to standardize display and validation and save the devs a lot of reptition. But Pieforms is pretty PHP 4 in a lot of ways. However, it's very entrenched in the code base at present, so it would be hard to find a graceful way to switch to something else.

I think my main annoyances about Pieforms are:

• The way it automagically does everything when you call the pieform() function, which just looks like an innocent constructor or factory method but actually functions as more of a "controller" method that can throw the page onto an entirely separate execution track, including calling exit() so nothing after it runs
• The way validation and page submission are done, by default, via callback methods following a particular naming pattern
• The way pieform elements aren't based on classes or inheritance, but on files and functions following a naming pattern
• The way the pieform() method takes a huge structured array to define the form and its behavior

All of that makes it really hard for the unitiated to tell what's going on, and what the API is, especially since the developer docs are pretty dusty at this point.

From what you want to do, it sounds like all you really need is to include the text field and select menu as pieform elements, then add some JQuery javascript that will locate them by their ID and attach additional functionality to them. So long as the JQuery updates the underlying <input> and <select> elements' values, those will get passed back when the form is submitted and you should be able to handle it in a normal Pieforms submission callback function.

As for how to get that JQuery on there, Tobias' suggestion of passing it to smarty() is probably the best. You could also create a custom pieform element type and give it a pieform_element_{name}_views_js() function, but that might be overkill if you only need the JS used on one particular form. If you do want to go that route, note that Plugins can define their own Pieform elements (in 1.7 the only example of this is the artefact/file/form/elements/filebrowser.php element... which in 1.8 we've actually relocated to lib/form since it's used by a lot of other pieces of code now. But the support for Plugins to have their own custom Pieform elements is still there!)

Cheers,

Aaron