Macrotone Blogs

Macrotone blogs upon Joomla, our products and other matters.
Categories
Tags
Archives
Calendar
Categories:   All Categories
Suggested keywords
x

JQuery

Subscribe to this list via RSS
Geoffrey Chapman

Experiences with JQuery and Dialog boxes

jqueryWe recently started work on a plugin enhancement that was intended to add a ‘button’ to an existing form programmatically which when pressed would open a ‘popup’ window where the user could review a generated ‘parameter value’ and either accept it or regenerate the value until an acceptable value was obtained, before returning to the calling screen, where the value is inserted into an existing form field.

With the design intent decided upon, the fun part of making the change started.  Firstly the existing form is an already existing Joomla form which for obviously reasons we do not want to modify, other than programmatically.  We looked at using Mootools  initially, but this is gradually being replaced by the use of JQuery, so it seemed sensible to start using JQuery.  An additional consideration is that the JQuery UI tools, specifically the Dialog boxes look very useful.

After much testing and frustration we discovered that there are some specific ‘id’ specifiers that JQuery does not like using. For example we could place the ‘button’ using the id field on the JForm label tag, but not on the JForm input tag.  No error messages were ever seen, just that the instruction was silently annoyed.  This seems to be related to the specific ‘append’ function we are using. There is the possibility to use ‘append’, ‘prepend’, ‘after’ and before (ignoring ‘appendto’ which is the same thing only with the arguments transposed). The input tag does not accept the use of append (or prepend). Very strange.  Investigation isn’t helped by the fact that viewing the web page, doesn’t show ‘our’ added button etc in the HTML code, presumably since this is not the ‘source’ web page but one we have modified. Not sure, or indeed found a solution to this particular problem yet.

Since we were using an existing (base form) we not only had to add the button to the form but also add a place holder for the JQuery UI Dialog box, otherwise the dialog box is never displayed.

Another challenge is the CSS involved with the additional strings. To get the popup box, one has to have  the CSS included in the page usually with one of the JQuery Template CSS types such as smoothness. Unfortunately this also changes the CSS of the newly inserted button used to call the popup. This is not really desirable since we want the calling page to ‘look’ like the existing form page with the exception of our added button. [Note this applies even if instead of a button, we use a simple anchor link to the popup, so is not specific to the use of a button.] So it is necessary to also include code to remove the CSS from the button that we had inserted to call our ‘Dialog box’.

Creating the generated popup window contents was relatively easy, as was also inserting the generated values back into the main form once the user has accepted them.

Since we want also to pass in certain parameters to the generated ‘parameter’ creation  code behind the ‘Dialog box’ we decided to add the Java via a PHP routine call. In this way we could also ensure that the appropriate language strings were also passed in, thus ensuring that the plugin was ‘multi-lingual’.

We do not consider ourselves Java experts by any means, but have little difficulty in generally getting what we want working.  We still a little bit of tweaking to perform on the java code itself, but we are pleased to say that it is working very much as intended so will be included in the next release of out Password Control plugin.

It was ‘fun’ although somewhat complicated by the apparent inconsistences of getting the initial button placement working in the desired position, and the need to modify the CSS on our original form for our newly placed button. The jury is still out on whether it is better than Mootools, but since Joomla is heading towards greater use of JQuery and phasing out Mootools it is a route that more and more will have to follow.

Tags:
JQuery joomla Javascript Plugin PHP CSS
Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries