1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Getting the errors mdb.min.js:1 Uncaught TypeError: Cannot read property \'addEventListener\' of null

legaulph free asked 5 years ago

I'm trying create a WordPress plugin with Table pagination using MDB Pro. I'm getting the 2 errors: 1) mdb.min.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null mdb.min.js: 2) Uncaught TypeError: $(...).selectbox is not a function jquery-3.3.1.min.js  

Bartłomiej Malanowski staff commented 5 years ago

Could you please share your code with us?

plegault pro commented 5 years ago

I signed in with my account that I purchased the pro version with

Sebastian Kaczmarek staff answered 5 years ago

It's hard to say, to be honest. The first thing to do is to make sure that all your dependencies are loaded in the right order. You can check how to do it reading the docs. In short, each file must depend on each other so they will be loaded in the right order. At the moment, they are probably not in the right order, causing the errors in the console. Second thing. Keep in mind that WordPress is loading its own version of jQuery by default. When you load your own version, you have to deregister the WP's script and load yours. This is the reason why you are getting the jQuery.Deferred exceptions.

plegault pro commented 5 years ago

Thank you, I will figure out how to setup the dependencies. I did realize that I get these 2 errors with the free version of MDB and when I use the Pro version I have a conflict with another plugin.

Sebastian Kaczmarek staff commented 5 years ago

Glad you progressed. If you will have any problems with MDB, let me know

plegault pro answered 5 years ago 

Here is the full error
JQMIGRATE: Migrate is installed, version 1.4.1
mdb.min.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.t.init (mdb.min.js:1)
    at mdb.min.js:1
generator.js:299 Uncaught TypeError: Cannot read property 'msie' of undefined
    at generator.js:299
    at generator.js:685
jquery-3.3.1.min.js:2 jQuery.Deferred exception: a(...).dropkick is not a function TypeError: a(...).dropkick is not a function
    at HTMLDocument.<anonymous> (https://dvl-edg.jnj.com/wp-content/plugins/aesop-story-engine/admin/assets/js/generator.min.js?ver=1:1:1558)
    at l (https://dvl-edg.jnj.com/wp-content/plugins/wp-xsd-upload/bootstrap/dist/js/jquery-3.3.1.min.js:2:29375)
    at c (https://dvl-edg.jnj.com/wp-content/plugins/wp-xsd-upload/bootstrap/dist/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).selectbox is not a function TypeError: $(...).selectbox is not a function
    at HTMLDocument.<anonymous> (https://dvl-edg.jnj.com/wp-content/plugins/wp-mega-menu-pro/js/backend.js?ver=4.9.8:12:26)
    at l (https://dvl-edg.jnj.com/wp-content/plugins/wp-xsd-upload/bootstrap/dist/js/jquery-3.3.1.min.js:2:29375)
    at c (https://dvl-edg.jnj.com/wp-content/plugins/wp-xsd-upload/bootstrap/dist/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught TypeError: a(...).dropkick is not a function
    at HTMLDocument.<anonymous> (generator.js:79)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)
jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).selectbox is not a function
    at HTMLDocument.<anonymous> (backend.js?ver=4.9.8:12)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

plegault pro answered 5 years ago

Here is my settings 
<?php //Plugin - Settings Page
if ( ! defined( 'ABSPATH' ) ) {

exit;

}
function wp_xsd_upload(){
if ( ! current_user_can( 'manage_options' ) ) return;

}
function wp_xsd_upload_page() {
if ( !current_user_can( 'manage_options' )) {
wp_die( 'You do not have sufficient permissions to access this page!');
}
//echo '<p>Select the Manual Download and Import button.<br> This downloads the new file and begins the import process</p>';
if(isset($_POST['submit'])){
if(count($_FILES['upload']['name']) > 0){
//Loop through each file
for($i=0; $i<count($_FILES['upload']['name']); $i++) {
//Get the temp file path
$tmpFilePath = $_FILES['upload']['tmp_name'][$i];

//Make sure we have a filepath
if($tmpFilePath != ""){

//save the filename
$shortname = $_FILES['upload']['name'][$i];

//save the url and the file
$filePath = plugin_dir_path( __FILE__ ) . "../../../xsd/" .$_FILES['upload']['name'][$i];

//Upload the file into the temp dir
if(move_uploaded_file($tmpFilePath, $filePath)) {

$files[] = $shortname;
//insert into db
//use $shortname for the filename
//use $filePath for the relative url to the file

}
}
}
}
}
echo '<!DOCTYPE html>';
echo '<html lang="en">';
echo '<div class="container">';
echo '<div class="row justify-content-md-center">';
echo '<div class="col-8" >';
$bytes = disk_free_space(".");
$si_prefix = array( 'B', 'KB', 'MB', 'GB', 'TB', 'EB', 'ZB', 'YB' );
$base = 1024;
$class = min((int)log($bytes , $base) , count($si_prefix) - 1);
//// echo $bytes . '<br />';
echo sprintf('<br><br>There is %1.2f' , $bytes / pow($base,$class)) . ' ' . $si_prefix[$class] . ' of free space available <br />';

echo '</div>';
echo '</div>';
echo '<div class="row justify-content-md-center">';
echo '<div class="col-8" >';
echo '<div class="d-block p-2 bg-dark text-white"></div>';
echo '<form action="" enctype="multipart/form-data" method="post">';
echo '<div>';
echo '<input id="upload" name="upload[]" type="file" multiple="multiple" accept=".xsd"/>';
echo '</div>';
echo '<p><input type="submit" name="submit" value="Submit"</p>';
echo '</form>';
echo '<div class="filelist"></div>';
//echo '<h2>File List:</h2>';
//echo '<p>Right click a link and select "save link as"</p>';
if(isset($_POST['file_name'])){
unlink(plugin_dir_path( __FILE__ ) . "../../../xsd/" . $_POST['file_name']);
echo "<div style='color: blue;'>" . $_POST['file_name'] . " Has been deleted </div>";
}
$directory = plugin_dir_path( __FILE__ ) . "../../../xsd";
$images = scandir($directory);
$ignore = Array(".", "..");
$count=1;
echo '<table id="xsdtable" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">';
echo '<thead>';
echo '<tr><th class="th-sm">#<i class="fa fa-sort float-right" aria-hidden="true"></i></th><th class="th-sm">File Name<i class="fa fa-sort float-right" aria-hidden="true"></i></th><th class="th-sm">Remove file<i class="fa fa-sort float-right" aria-hidden="true"></i></th></tr>';
echo '</thead>';
echo '<tbody>';
foreach($images as $dispimage){
if(!in_array($dispimage, $ignore)){
echo "<tr id='del$count'><td>$count</td><td><a href='" . site_url() . "/../../../xsd/" . $dispimage . "' target='_blank'>" . $dispimage . "</a><br /></td><td><form method='post'><input type='hidden' name='file_name' value='".$dispimage."'><input type='submit' class='delete' name='delete_file' value='Delete' onclick=\"return confirm('Ar you sure you want to delete the file".$dispimage."')\"></form></td></tr>";
$count++;
}
}
echo '</tbody>';
echo '</table>';
echo '</div>';
echo '</div>';
echo '</div>';
?>
<script>
$(document).ready(function () {
$('#xsdtable').DataTable({
"pagingType": "first_last_numbers" // "simple" option for 'Previous' and 'Next' buttons only
});
$('.dataTables_length').addClass('bs-select');
});
</script>
<?php
}
here is the load scripts 
<?php
function bootscripts() {
wp_enqueue_style( 'bootstrapmincss', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/css/bootstrap.min.css', array(), null, 'screen' );
wp_enqueue_style( 'mdb_min', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/css/mdb.min.css', array(), null, 'screen' );
wp_enqueue_style( 'upload', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/css/addons/datatables.min.css', array(), null, 'screen' );
wp_enqueue_style( 'xsd', plugin_dir_url( __FILE__ ) . 'xsd.css', array(), null, 'screen' );
wp_enqueue_script( 'script', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/js/jquery-3.3.1.min.js', array(), null, false );
wp_enqueue_script( 'xsd_upload', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/js/popper.min.js', array(), null, false );
wp_enqueue_script( 'upload', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/js/bootstrap.min.js', array(), null, false );
wp_enqueue_script( 'upload2', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/js/mdb.min.js', array(), null, false );
wp_enqueue_script( 'load', plugin_dir_url( __FILE__ ) . 'bootstrap/dist/js/addons/datatables.min.js', array(), null, false );
}
add_action( 'admin_enqueue_scripts', 'bootscripts' );

Bartłomiej Malanowski staff commented 5 years ago

could you please provide us a live demo of your issue?

plegault pro commented 5 years ago

This is on an internal site. Do you have a WordPress site? I can install the plugin on?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
jquery mdb-min-js jquery-3-3-1-min-js
About author
legaulph
15Support score
1Questions 1Answers 0Snippets