Forums

Hello, please i need help.
I successfully tested a form on my localhost ( Xampp - Joomla 3.6.6 - Chronoforms v4.0.6 ) and now i'm trying to have it working on a live Linux hosting but i cannot get rid of this error.
The form uses a JS script onload for showing/hiding some divs if you click on a radio element :

window.addEvent('domready',function(){
$('input[name=input_car]').click(function() {
   ...
   if(!na) {
document.getElementById("input_vis11_container_div").style.display = 'block';
document.getElementById("input_vis21_container_div").style.display = 'none';
document.getElementById("input_vis31_container_div").style.display = 'none';
}
else if(!nb){
...
});
});

and a Custom Code which load some images on a Canvas and shows some buttons for manipulate them.
I made the first attempt with Joomla 3.7 and i get the "TypeError: $(...) is null" on Firebug console and I thought this was caused by a conflict between Mootools and Jquery. The error happens from the beginnig, the script doesn't works.
I tried to use Chronoforms 5 for hide/show divs in another way but the error happens onSubmit .
Than i tried with the same Joomla/Chronoforms versions i used on my localhost before, but the error is still there 😟

I have not great experience with scripts, debugging etc.

Hipeppesc,

Did you try using v6 ?

Best regards,
Max

No, as i said i tried v5 on Joomla 3.7

The very strange thing is that now the error happens with the same Joomla - Chronoforms versions i successfully used ( without errors) on my Xampp installation. The form is the same, i exported and than imported it.

The only difference is that now the server is Linux based and is live.

Hi peppesc ,

The script you have there looks as if it was written for MooTools in an earlier version of Joomla! The current Joomla! versions use JQuery which has a different syntax - and may not be being loaded here.

If you give input_car an id you can use the same syntax as the other lines document.getElementById("input_id").onclick(function() . . .

Bob

The id is the selected one for that radio input
Its html code :

Anyway , i repeat, i installed the same Joomla and Chroform versions that i have on my localhost. It works on localhost (Xampp) but it doesn't on live site (Linux) !

On Chrome console i get this :

Uncaught TypeError: Cannot read property 'click' of null
    at http://.../select-car:44:27
    at http://.../media/system/js/mootools-core.js:121:21
    at Array.forEach (native)
    at Function.forEach (http://.../media/system/js/mootools-core.js:5:460)
    at Array.each (http://.../media/system/js/mootools-core.js:9:303)
    at fireEvent (http://www..../media/system/js/mootools-core.js:120:501)
    at HTMLDocument.j (http://www..../media/system/js/mootools-core.js:175:218)

This confirm that it's handled by MooTools.

I just don't understand why this doesn't work on live site.

Please try to change the first line of your code to this:

jQuery( document ).ready(function($){

It's better to create new forms on v6

Best regards,
Max

Thank you ! This solved the problem with the JS onload, now i can show/hide divs dinamically.

I have now a similar problem with my Custom Code OnSubmit :
"Uncaught TypeError: Cannot read property 'click' of null
Uncaught TypeError: Cannot read property 'mousedown' of null
Uncaught TypeError: Cannot read property 'mousedown' of null"

This is the relevant part of the code :

<script>
document.getElementById("myCanvas").style.display = "block";
...
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
ctx.fillStyle = "#A0DCE5";
$myCanvas = document.getElementById('#myCanvas');
...
 function startInteraction() {
  drawAll();
  $myCanvas.mousedown(onMouseDown);
  $myCanvas.mouseup(onMouseUp);
  $myCanvas.mouseout(onMouseUp);
  $myCanvas.mousemove(onMouseMove);
 }
 function drawAll(){
 ...
 }
 function onMouseDown(e){
 ...
 }
 function onMouseUp(e){
 ...
  }

 function onMouseMove(e){
 ...
  } 
document.getElementById("#button_bigger").click(function() {
	    ...
      });  
document.getElementById("#button_smaller").click(function() {
	   ...
	   }
      });   
document.getElementById("#button_draw_rotated").click(function() {    
		...
      });
 }
 img2.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);     
}
</script>

Can you tell me please what i have to add ?

Now I have a canvas and some buttons, the console shows errors ( my previous message ) for the following lines :

$myCanvas.mousedown(onMouseDown);
...
$("#button_bigger").click(function() {
...
});

That is the same problem i had with the onload JS, the canvas and the buttons are seen as 'null' objects.

I tries adding

jQuery( document ).ready(function($){

as the first line also in the onSubmit code but this didn't solve the problem.

I don't know much about jQuery and scripting in general, i was able to write a working form for what i need after a lot of trial and error, using scripting samples taken from various sites.
I'm sure that someone can give me an useful suggestion to solve this problem, i would be very grateful for this.

Nobody can suggest me how to solve this ?

Please 😢