Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Simplest Mootools script doesn't work

Au
Austre 13 Nov, 2012
Hi!

I tested a simplest Mootools script with CF, but doesn't work and i don't know why.

JS Script

$('sad_projects').addEvent('change', function(){
  alert('Lets go!');
 });


i'm using Joomla 2.5.7, i checked if mootools-core was loaded,if i use the script bellow it returns version 1.4.5:

alert(MooTools.version);


And looking at Page Source Code we have:

[attachment=0]cf_mootools_load.JPG[/attachment]

Any clue?
Gr
GreyHead 13 Nov, 2012
Hi austre,

No clues there :-( Do you have the script in a Load JS action?

Please post a link to the form so I can take a quick look.

Bob
Au
Austre 13 Nov, 2012
Yes, i have the script in a Load JS.

Printscreen from my form events:
[attachment=0]cf_events_order.JPG[/attachment]
Gr
GreyHead 13 Nov, 2012
Hi austre,

Please post a link to the form so I can take a quick look.

Bob

PS Please post images here using the Upload Attachment link under the message editor.
Au
Austre 14 Nov, 2012
Bob,

I understand now your request. My form is in my test environment, no access from internet. I'll check the possibility to publish it.
Au
Austre 14 Nov, 2012
Bob,

I sent the link by PM for you.
Gr
GreyHead 14 Nov, 2012
Hi austre,

The immediate problem is that this line
alert($('sad_projeto').value);
is being called before the page loads so the select drop-down doesn't exist and there is a JavaScript error on the page.

Please test again in this format
window.addevent('domready', function() {
  alert($('sad_projeto').value);
});

Bob
Au
Austre 14 Nov, 2012
Hi Bob,

You're right.

Please test again in this format


I tested this code, but doesn't work.
Gr
GreyHead 15 Nov, 2012
Hi austre,

Please change window.addevent( to window.addEvent( with a capital E

You have jQuery loading on the page which may cause you problems so please test using the Test Form icon in the Form Editor toolbar. (See the FAQs for more information on using jQuery.)

Bob
Au
Austre 19 Nov, 2012
Hi Bob!

The capital E and Test Form icon did work that code.😀

I read he FAQs and i would like to know if there's a way to resume the overwrite HEAD job only for JS Scripts?

My template HEAD have IE codes and so. Below, is the HEAD code from my template.


<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 

maximum-scale=1.0, minimum-scale=1.0">
  
  <jdoc:include type="head" />
  
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/system/css/system.css" type="text/css" />
  
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/basics.css" 

type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/layout.css.php?

max_sitewidth=<?php echo $this->params->get('max_sitewidth','960');?>
  " type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/menu.css" type="text/css" 

/>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/template.css" 

type="text/css" />
  
      <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/colors.css.php?

base_color=<?php echo $this->params->get('base_color','ffffff');?

>&header_gradient_top=<?php echo $this->params->get

('header_gradient_top','ffea00');?>&header_gradient_bottom=<?php 

echo $this->params->get('header_gradient_bottom','ffc600');?

>&footer_color=<?php echo $this->params->get

('footer_color','4c4c4c');?>&copyright_color=<?php echo $this-

>params->get('copyright_color','000000');?>&accent_color=<?php echo 

$this->params->get('accent_color','ffea00');?>&text_color=<?php echo 

$this->params->get('text_color','4c4c4c');?>&menu_text_color=<?php 

echo $this->params->get('menu_text_color','000000');?

>&button_text_color=<?php echo $this->params->get

('button_text_color','000000');?>&footer_text_color=<?php echo 

$this->params->get('footer_text_color','cccccc');?

>&copyright_text_color=<?php echo $this->params->get

('copyright_text_color','888888');?>&templateurl=<?php echo 

$templateURL; ?>" type="text/css" />    
      
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/content_types.css" 

type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/formelements.css" 

type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/typography.css" 

type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/icons.css" type="text/css" 

/>
     <?php

    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPad')){
  echo('
  <style>
  
    ul.menu ul {  
      display: none;

      padding: 0;
      width: auto;
      white-space: nowrap;
      position: absolute;
    
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      
      -pie-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.15);
    }
    
    /* dropdown */
    .ct_menu_horizontal ul.menu li:hover > ul {
      display: block;      
    }
    
    .ct_menu_vertical ul.menu li:hover > ul {
      display: inline-block;
    }

  </style>
  ');
    }?>
 
 <!--[if IE 9]>
    <style>
    
      body, 
      #siteWrapper,
        #siteTop,
        header,
        #main section,
        
        .moduletable_ct_lightBox,
        .moduletable_ct_darkBox,
         
        input[type="text"],
        input[type="password"],
        input[type="email"],
        textarea,
        
        #main img,
           
        ul.menu ul,
        ul.menu ul ul,
        ul.menu li > a,
        ul.menu li > span,
        ul.menu li ul li > a,
        ul.menu li ul li > span,
        ul.menu li ul li ul li > a,
        ul.menu li ul li ul li > span,
        
        .ct_pagination div,

        .autocompleter-choices,
        ul.autocompleter-choices li.autocompleter-selected,
        
      .flex-direction-nav li .next,
        .flex-direction-nav li .prev,
        .flex-control-nav li a,
        .flex-control-nav li a.active,
        .flex-control-nav li a:hover,
        
        ul.pagenav li a,
        
        .pane-sliders div.panel,
                    
        input.button, 
        button,
        #errorboxoutline a
        
        ul.pagenav li a,
        
        .ct_buttonAccent, 
        .ct_buttonYellow, 
        .ct_buttonRed, 
        .ct_buttonBlue,
        .ct_buttonGreen,
        .ct_buttonPink,
        .ct_buttonBlack,
        .ct_buttonWhite,
        
        #login-form.compact .button,
        #ct_headerLogin input.button,
        .tip  {
            behavior:url(<?php echo $this->baseurl ?>/templates/<?php 

echo $this->template ?>/js/pie/PIE.php);
        }
    
    </style>
<![endif]-->

 <!--[if lt IE 9]>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?

>/templates/<?php echo $this->template ?>/css/ie_fixes.css.php" 

type="text/css" />
<![endif]-->

 <!--[if lt IE 9]>
    <style>
    
      body, 
      #siteWrapper,
        #siteTop,
        header,
        #main section,
        
        .moduletable_ct_lightBox,
        .moduletable_ct_darkBox,
         
        input, 
        input[type="text"],
        input[type="password"],
        input[type="email"],
        textarea,

        .ct_pagination div,

        .autocompleter-choices,
        ul.autocompleter-choices li.autocompleter-selected,
        
      .flex-direction-nav li .next,
        .flex-direction-nav li .prev,
        .flex-control-nav li a,
        .flex-control-nav li a.active,
        .flex-control-nav li a:hover,
        
        ul.pagenav li a,
        
        .pane-sliders div.panel,
                    
        input.button, 
        button,
        #errorboxoutline a
        
        ul.pagenav li a,
        
        .ct_buttonAccent, 
        .ct_buttonYellow, 
        .ct_buttonRed, 
        .ct_buttonBlue,
        .ct_buttonGreen,
        .ct_buttonPink,
        .ct_buttonBlack,
        .ct_buttonWhite,
        
        #login-form.compact .button,
        #ct_headerLogin input.button,
        .tip  {
            behavior:url(<?php echo $this->baseurl ?>/templates/<?php 

echo $this->template ?>/js/pie/PIE.php);
        }
        
        ul.menu {
            -webkit-border-radius: 0px;
          -moz-border-radius: 0px;
          border-radius: 0px;
         }
    
    </style>
<![endif]-->

<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/libs/jquery-1.7.1.min.js"></script>
<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/jquery.mobilemenu.js"></script>
<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/jquery.ba-resize.min.js"></script>
<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/touchmenu.js"></script>
<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/css3-mediaqueries.js"></script>
<script src="<?php //echo $this->baseurl ?>/templates/<?php //echo 

$this->template ?>/js/selectivizr-min.js"></script>

<script>
  // Convert menu to select-list for small displays
  jQuery(document).ready(function() {
    
    var seen = {};
    jQuery('a').each(function() {
      var txt = jQuery(this).attr('href');
      if (seen[txt])
        jQuery(this).attr('href', txt + '#');
      else
        seen[txt] = true;
    });
    
    jQuery('.ct_menu_horizontal > ul.menu').mobileMenu({switchWidth:769, 

prependTo: '#navigation', topOptionText: '<?php echo $this->params->get

('show_menu_text', 'Select a Page');?>'});
  });
</script>

<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
  <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this-

>template ?>/js/html5.js"></script>
    <script src="<?php echo $this->baseurl ?>/templates/<?php echo 

$this->template ?>/js/selectivizr-min.js"></script>
<![endif]-->

</head>
Gr
GreyHead 19 Nov, 2012
Hi austre,

I think that you have to ask the template developer. It looks like pretty poor quality Joomla code to me :-(

Bob
Au
Austre 19 Nov, 2012
lol,

Agree in terms! Could be beter!
:?

I'm testing line by line and when the line below (overwrited looks like FAQs) is commented, Mootools in my CF works:

$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/libs/jquery-1.7.1.min.js');
Au
Austre 20 Nov, 2012
Hi Bob!

Like i sad, when i comment the line code below my CF works fine.

$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/libs/jquery-1.7.1.min.js');


When i read the source code of this JS file i realized that the first line is

if(typeof jQuery == "undefined"){


I remembered your How-To Documents where there is an indication of the solution below

if ( typeof jQuery != 'undefined' ) {
jQuery.noConflict();
}


So, i thought as a Dummy and ask myself why not try to put jQuery.noConflict(); after the first line of the jquery-1.7.1.min.js?

I make this try and CF works fine now.

Now i really would like to know your opinion about this try i made, cause my CF is working fine, but i don't finished all tests to know if it could affect another Joomla component.
Gr
GreyHead 20 Nov, 2012
Hi austre,

First it looks from the top image you posted that the closing } might be missing (or it may be hidden behind the error message.

Max has a fix for using jQuery with ChronoForms - some updated files in a beta version I think. If you ask him using the Contact Us link above he will send them to you.

Bob
Au
Austre 20 Nov, 2012
The "}" is not missing, it's in the end of the file jquery-1.7.1.min.js. This file have 3 big lines source code. Line 7 "}" close line 2 "{".
[attachment=0]cf_events_jquery_noconflit.JPG[/attachment]

I'll contact Max and try his fix too. Anyway, i'll keep testing CF with my template and components to check if my fix affect something.
This topic is locked and no more replies can be posted.