CODEWITHSUNDEEP
javascriptpluginsjoomlajqtransform
tioschi
tioschi

Reputation: 389

Joomla - can't embed custom javascript

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

    $(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??

Upvotes: 0

Views: 431

Answers (2)

Simon Hayter
Simon Hayter

Reputation: 3171

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>

Upvotes: 0

Jobin
Jobin

Reputation: 8282

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..

Upvotes: 1

Related Questions