Joomla - can't embed custom javascript

Question

• I have Joomla 1.5
• I have found a plugin for form styling, the "jqtransform"
• I have an article that imports a 'myform.php' page that connects to an external database

I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:

• add link for the css in the header of joomla's index.php
• add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
• add the class jqtransform in form tag of the myform.php (rquired by the plugin)
• at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:

    $(function() {
           //find all form with class jqtransform and apply the plugin
           console.log("foo");
           $("form.jqtransform").jqTransform(); });

(needed for the plugin)

The problem is that the plugin doesn't work.

I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });

The first bookmark works ok (the browser halts).

The second bookmark doesn't do anything. That means the browser doesn't get inside the function.

The console log doesn't show anything.

Anyone has any idea??

Answer 1

The issue is JQuery Conflict.

You should use var jq = jQuery.noConflict(); Just above the script and use jq instead of $ symbol. like:

 jq = jQuery.noConflict();
 jq(function(){});
 jq("form.jqtransform").jqTransform(); });

something like that. Also you can add script from myform.php don't need to edit index.php for this kind of use. Like a page required some js and css don't load it in the index.php It will load everytime so speed will reduce. For a component or module or specific page you can use joomla's default document factory.

Like:

$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');

Hope this will help you friend..

Answer 2

This method requires no editing to the template files.

Simply use a Custom HTML Module and Publish it in position

<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
    jQuery("form.jqtransform").jqTransform(); 
});
</script>