Forums

Hi Bob
I have at last begun to get to grips with jQuery but am having trouble how to include in CF5. What I wanted to do was to set up a library of functions on one Load Javascript and then calls to functions defined in that library in subsequent Load Javascript boxes. as per the attached form which is installed http://build550.pmhu3adv.org.au/index.php/test-bed-jq..

My sample form is attached, The code is awful simple
This in one load javascript in the JS Code box

<?php
require_once(
'components/com_u3aV5/membership/js/jQueryLibrary.js'
);
?>

and this in the next - again in a load javascript box

jQuery(document).ready(
  function (jQ) {
    sayGday();
  } // function (jQ) 
); // jQuery(document).ready;

I have also included the code for that.
The call to sayGday works fine in the first box but the second gives me

ReferenceError: sayGday is not defined
sayGday();
	

I suspect it is some matter of visibility of functions - scope and that - which I have missed. There are several things I could try and I can see how to solve this specific problem but you might perhaps give me a swift kick along with the general case. 😀

Regards

Nick

Hi Nick,

This is indeed a scope problem.

It should work OK if you use the Load JS Files option to load the file with the function library.

Bob.

Thanks Bob. I will need to look at that tomorrow. The problem seems to be that, from some other post, load js files requires the use of the physical address of the file. That is, http:// etc which makes it difficult to shift from the development site - www.build550.pmhu3adv.org.au to www.pmhu3a.org.au. Is that correct? Or have I missed something there?

But, in summary, load the library with load js files and the calls to the function in the js code box. Is that correct?

Regards
Nick

Hi Nick,

You can use PHP in the JS Files box

<?php
echo JURI::root().'components/com_u3aV5/membership/js/jQueryLibrary.js';
?>

Bob

Thanks Bob. Getting closer. That loads the library and fires the call to sayGday on loading the library.

/* 
 * Library of routines used by the membership app
 * 
 */
jQuery(document).ready(
  function (jQ) {
    function sayGday() {
      alert('gDay! loading jQueryLibrary');
    }
    sayGday();
  } // function (jQ) 
); // jQuery(document).ready;

My problem now is, I expect, down to my lack of understanding of javascript/jQuery. If add a call to sayGday in a later Load Javascript code block,

jQuery(document).ready(
  function (jQ) {
    sayGday();
  } // function (jQ) 
); // jQuery(document).ready;

it fails.

ReferenceError: sayGday is not defined sayGday();

Some further reading is required, I think though any further pointers would be appreciated. 🤨

Regards
Nick

Morning Bob,

That's it! Sorted. Many thanks. I definitely owe you a coffee or two. I think I have been struggling with realising that jQuery is just a Javascript library.

As to your question about more than one Load JS action - I think that I can see how that would be the case, Javascript/jQuery would not be the correct vehicle for this simple code - just throwing up a message. And most use of jQuery would be interactions with the DOM and would be in action once the page was fully loaded. So, unless I have missed something, I can see that a single action after any database extraction and the like just prior to the render form would be sensible, Have I got that right 'in principle'?

Regards

Nick

Hi Nick,

The jQuery JavaScript library is very convenient (and well documented) and jQuery will be loaded on pretty much every Joomla! 3 site so you might as well use it.

I would typically use a single Load JavaScript action - before the HTML (render form action). I'd only use more that one if there are some distinctly different tasks to be done.

If there are more than say half-a-dozen lines of script then I'd include that from a file as that makes editing simpler.

Bob

Thanks Bob - sinking in.

Nick