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

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

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 :

<div>
<input type="radio" name="input_car" id="input_car_0" title="" value="car1" class="validate['required']" />
<label for="input_car_0">Smart</label>
<img src="/images/cars/preview/Smart.png" width="200" />
</div>
<div>
<input type="radio" name="input_car" id="input_car_1" title="" value="car2" class="validate['required']" />
<label for="input_car_1">Transit</label>
<img src="/images/cars/preview/Transit12.png" width="300" />
</div>
<div>
<input type="radio" name="input_car" id="input_car_2" title="" value="car3" class="validate['required']" />
<label for="input_car_2">Furgone</label>
<img src="/images/cars/preview/Doblo.png" width="300" />
</div>

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

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

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 😢