Skip to main content

Posts

Showing posts with the label jquery in joomla

Joomla validate chrono forms using jquery

It is a common practice to use Chrono forms in our joomla site to setup various forms in the site, be it a contact us form, submit a ticket form, or whatever. I have set the option "validate form" to "No" under chronoform settings in admin panel, and also preferred to not include any js or css files. For validating the chrono forms, i prefer jquery. So first lets add jquery support in our joomla. It is quite simple: 1. Download jquery.js and jquery_min.js (1.4.2 version is enough) and place them in media/system/js folder of your joomla. 2. Edit libraries->joomla->html->html->behavior.php, and add the following function below the mootools() function: function jQuery($debug = null)     {         static $loaded;         global $mainframe;         // Only load once         if ($loaded) {    ...

Joomla jquery conflicts

Sometimes, we face certain jquery conflicts in Joomla. These can be avoided by using jQuery instead of $ in your code. For example, instead of: $(function() {         $( "#tabs" ).tabs();     }); Use this: jQuery(function() {         jQuery( "#tabs" ).tabs();     }); And in your template index (or head includes script file), add a js file (noconflict.js) with just this content: jQuery.noConflict(); For example: $this->addScript($this->baseurl."/templates/".$this->template."/js/jquery-1.7.1.js"); $this->addScript($this->baseurl."/templates/".$this->template."/js/noconflict.js");

Using jquery in joomla

Joomla uses mootools by default. If you want to use another javascript library like jquery in your site.... 1. You can use a plugin like SC Jquery and then either add code in the admin panel like: $("#contactus_reset").click(function() { $("[rel=error_label]").css("display","none"); }); or write the code inside your template index.php file, under head tag, like: <script type="text/javascript"> $(function() {     $(".anyClass").jCarouselLite({         btnNext: ".next",         btnPrev: ".prev"     }); }); </script> And better add these lines inside your template index.php file, under head tag to avoid jquery conflicts. <?php $document = &JFactory::getDocument(); $document->addScriptDeclaration ( 'jQuery.noConflict();' ); ?> 2. There is another way to enable jquery support in your site. Here are the steps i did to enable jquery support in...