Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

Question

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred:

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

This error can be traced back to line 15 in helpers.js? ver=4.5.3:

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

Prior to and after restoring the previous version of the page, there was no such error. The HTML code below seems to work fine when saved as an HTML file and opened in Chrome. Can anyone explain what might have caused this error?

Edit: Changing the WordPress theme resolves the issue. The code works with all other themes, so the problem likely stems from the theme itself.

$(document).ready(function() {       
       getUpdates();    
   });   
   function getUpdates() {
        
   // Retrieve data using a webservice call
   $.getJSON('http://api.thingspeak.com/channels/136053/feed/last.json?callback=?', function(data) {       
   // If 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>

javascript jquery html css wordpress

Answer 1

Answer №1

To ensure your code functions properly, insert these lines before and after it:

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

Example:

;(function($){
 $('#element-id').action({
        option: value,
        otherOption: 'text'
 });
})(jQuery);

Hopefully this will resolve any issues!

Answer 2

To ensure your code functions properly, insert these lines before and after it:

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

Example:

;(function($){
 $('#element-id').action({
        option: value,
        otherOption: 'text'
 });
})(jQuery);

Hopefully this will resolve any issues!

Answer 3

Answer №2

Make sure to add the sidr library to your code. Once you have loaded jQuery, include the sidr library as well. Then, initialize the sidr like this within your HTML:

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

Answer 4

Make sure to add the sidr library to your code. Once you have loaded jQuery, include the sidr library as well. Then, initialize the sidr like this within your HTML:

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

Answer 5

Answer №3

Encountered the identical issue upon updating Contact Form 7 within WordPress.

The problem was resolved by ensuring JQuery is loaded before calling sidr.

// To resolve, load the jQuery library initially.
wp_enqueue_script('jquery');

Answer 6

Encountered the identical issue upon updating Contact Form 7 within WordPress.

The problem was resolved by ensuring JQuery is loaded before calling sidr.

// To resolve, load the jQuery library initially.
wp_enqueue_script('jquery');

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

Answer №1

Answer №2

Answer №3

Similar questions

The $emit method in Vue seems to be ineffective when used on the parent component, yet it functions properly when used on the

The jQuery functions seem to be malfunctioning when trying to retrieve elements by their ids

Turn the flipcard hover effect into an onclick action

What is the method for altering the icon within the KeyboardTimePicker component in material-ui-pickers?

You can see the JavaScript code directly in the browser

The observable did not trigger the next() callback

Guide to Generating a Dynamic HTML Menu

Using JavaScript to Detect Asynchronous Postbacks in ASP.NET AJAX

When attempting to register a custom Gamepad class using GamepadEvent, the conversion of the value to 'Gamepad' has failed

Floating Feature on Vizio Intelligent Television App

What is the method for adding line breaks to a JSON file?

How can I effectively vertically position a button in Bootstrap 5 without compromising its functionality?

What is the best way to extract individual objects from several arrays and consolidate them into a single array?

Animation fails to initiate when the object enters the viewport

Using Rails: The Art of Safely Managing JavaScript code when working with AJAX on the client-side

What is the best way to differentiate between two CSS elements with the same class name?

Arranging Material UI tabs on both sides

Is Implementing a Promise for Preprocessing in NodeJS Worth It?

View is unable to trigger the success attribute

Modifying an object using setState in React (solidity event filter)