CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Ihsara
Ihsara

Reputation: 11

Uncaught TypeError: $(...).sidr is not a function[Console Chrome developer tool]

I put this code into add basic module HTML block of a wordpress page builder. I encounter the white screen of death. Chrome developer console told me the following: 

helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is not a function

This can be traced from line 15 in helpers.js?ver=4.5.3: 

        $('#mobile-menu-trigger').sidr({
        source: sourceVal,
        name: 'sidr-main'
    });

Before or after I restored the previous version of the page, there was no such error. The html code below seems to run normally if save as a html file and open it with chrome. Can someone please explain which might have possibly caused that error?

Edit: When I change the theme of wordpress, everything works again. With all of other themes, the code works so the problem should come from the theme. 

$(document).ready(function() {       
       getUpdates();    
   });   
   function getUpdates() {
        
   	// get the data with a webservice call
   	$.getJSON('http://api.thingspeak.com/channels/136053/feed/last.json?callback=?', function(data) {   			    					
   			// if the field1 has data update the page
   			if (data.field1) {
   			    document.querySelector('.info-giver .temperature').innerHTML = data.field1.slice(0,4) + "°C";
   			    document.querySelector(".info-giver .humidity").innerHTML = data.field2.slice(0,5) + "%";
   			    document.querySelector('.info-giver .windspeed').innerHTML = data.field4.slice(0,4) +" m/s";
   			    document.querySelector(".info-giver .pressure").innerHTML = data.field3 +"Pa" ;   					   
   			}              
   	});
   	
   }
   (jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "announcer">
<div class="temperatureDeclared" style= "width: 25.00%">Temperature</div>
<div class="humidityDeclared" style= "width: 25.00%">Humidity</div>
<div class="windspeedDeclared" style= "width: 25.00%">Windspeed</div>
<div class="pressureDeclared" style= "width: 25.00%">Pressure</div>
</div> 
<div class = "info-giver">
<div class="temperature" style= "width: 25.00%">N/a</div>
<div class="humidity" style= "width: 25.00%">N/a</div>
<div class="windspeed" style= "width: 25.00%">N/a</div>
<div class="pressure" style= "width: 25.00%">N/a</div>
</div>

Upvotes: 1

Views: 4395

Answers (3)

孤独なクリエイターM
孤独なクリエイターM

Reputation: 1

I got the same error as you when I updated Contact Form 7 on WordPress.

Loading JQuery before calling sidr solved it.

// Load the jQuery library at the beginning.
wp_enqueue_script('jquery');

Upvotes: 0

Jawad Abdani
Jawad Abdani

Reputation: 11

Add these lines before and after code your code will works

;(function($){
   //code
})(jQuery);

Just Like This

;(function($){
 $('#mobile-menu-trigger').sidr({
        source: sourceVal,
        name: 'sidr-main'
 });
})(jQuery);

I hope this will works !

Upvotes: 3

Biswajit Panday
Biswajit Panday

Reputation: 837

You didn't include your sidr library. After loading jquery include sidr library. After that init sidr like this on your html.

$('#mobile-menu-trigger').sidr({....});

Upvotes: 1

Related Questions