Buy Now
Sign in

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

peppesc , June 05 2017
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!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
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 :
<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) !
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!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
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
P
peppesc
I solved it !
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.