Buy Now
Sign in

"TypeError: $(...) is null" - Jquery conflict ??

peppesc , June 05 at 11:36
Answered
p
peppesc

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.

admin

Hipeppesc,

Did you try using v6 ?

Best regards,
Max

Max
If your main question got answered then please mark the answer using the button!

p
peppesc

admin:

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.

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

p
peppesc

GreyHead:

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 :
[quote]<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>[/quote]

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) !

p
peppesc

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.

admin

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

Max
If your main question got answered then please mark the answer using the button!

p
peppesc

admin:

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 ?

p
peppesc

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.

p
peppesc

Nobody can suggest me how to solve this ?

Please :cry:

p
peppesc

I solved it ! :D
I had to replace "document.getElementById" with $ in some assignments.
and i used

				jQuery(document).ready(function()
				
at the beginning of the custom code.

Now i'm saving the form.
I will see if it will run on Joomla 3.7.2 , otherwise i will use 3.3.6.