Macrotone Blogs

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

Javascript

Subscribe to this list via RSS
Geoffrey Chapman

Speeding up site loading

Came across this small post about improving the speed of a web site which I thought might be of interest to some.

It mentions the compression of JavaScript files using gzip by entering the following command in the .htaccess file.

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
This doesn’t apply to our particular site since we already make use of the feature which is automatically inserted into the .htaccess file by Akeeba Admin Tools Pro by turning on "Automatically compress static resources" in the .htaccess maker
Tags:
htaccess CSS Javascript website performance
Geoffrey Chapman

Debugging PHP with Java console.

b2ap3 thumbnail joomlaIt may seem a strange title for a blog, but we have been looking at a small ‘opportunity’ in converting one of our components to Joomla 3.x.

First a brief explanation is required. The module in question is a PHP module which calls some Javascript code which in turn then calls a separate PHP routine.  The error we were trying to resolve involved this ‘second’ PHP routine.  The module was designed to display a Google map and the first PHP module sets up the display, the Javascript code builds up the required map and it is in turn, populated with data obtained from the database and formatted by the second PHP routine.

This ‘inner’ PHP routine was working perfectly on Joomla 2.5 but on Joomla 3.1 only the map itself was displayed, not the 'map points’.  It was apparent therefore that there must be ‘code’ that was not Joomla 3.x compatible but how to find it.  Code inspection did not reveal any apparent cause. The changes to remove JRequest and replace it with JInput were working fine, and attempts to use print, dump, enqueueMessage, etc. statements were accepted but would never display any information which one could see.  [This might possibly be due to our trying to display text ‘after’ the ‘error point’, but am not totally convinced yet.] Inspection of error logs also were not informative, mainly it is suspected due to the Javascript ignoring the errors and proceeding to execute even after receiving a error from the PHP routine.

Continue reading
Tags:
joomla developers Javascript PHP browser logs Tools
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
Geoffrey Chapman

Web Standards

   I am reminded of the quote “The nice thing about standards is that there are so many of them to choose from.” attributed to  “Andrew S. Tanenbaum”, whilst looking into the structure of web pages.

The Firefox browser add in ‘FireBug’ provides a nice tool under ‘Tools- Validate HTML’ which enables the page one is viewing to be checked by the W3C Markup Validation Service.   By default it uses the standard defined at the start of most web pages, but the number and variety of possible standards is most interesting.  The output is a nice listing of ‘errors' and ‘warnings’ upon the page structure and its elements. [Note that it excludes the ‘new’ standards mentioned below, although it does have ‘HTML5 Experimental’]

Whilst one can then proceed to correct and eliminate the errors and warnings it does raise the question as to what standard should one be writing web pages to:  HTML5, XHTML 1.0 Transitional, XHTHL 1.0 Standard, XHTML 1.0 Framework, HTML 4.01 Strict etc.  The list goes on to provide about 15 possible standards.

Continue reading
Tags:
Tools Javascript browser compliance regulations
Geoffrey Chapman

Invoking window.onload multiple time.

Whilst developing our latest component ‘IP Mapper’ I encountered a problem that is possibly known to many but not previously to me.  For that reason decided to make this blog entry.

I was generating javascript code which made a call at the end to the ‘window.load event’.  The code worked perfectly when it was only present once.  However when present more than once only the last call actually worked.

Why did I need it more than once?  Well the code was generated for a specific module, and because the modules could each have very different parameters specified, I had to tailor the javascript for each specific module hence the slightly different code, but each has a different ‘window.onload event’ function call.

I discovered this post by Robert Hahn which describes a solution which I have implemented.

The solution:

function makeDoubleDelegate(function1, function2) {
    return function() {
        if (function1)
            function1();
        if (function2)
            function2();
    }
}
window.onload = makeDoubleDelegate(window.onload, myNewFunction );
Works a treat.
Tags:
joomla Javascript
Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries