Getting error Cannot read properties of undefined (reading 'fn')

[enginnk]

Describe the bug

I am working with WordPress Development stuff and I am getting error Cannot read properties of undefined (reading 'fn') I have used wp_enqueue_script WordPress function.

WordPress Version :: 5.8.1 jQuery Version :: 3.6.0

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 93.0.4577.63

[ka215]

First, we need to load the jQuery core files before loading the jQuery.Timeline script. WordPress wp_enqueue_script function allows you to specify script dependencies in the third argument, so call it as follows.

wp_enqueue_script(
  'jquery-timeline',
  get_stylesheet_directory_uri() . '/js/jquery.timeline.min.js',
  array( 'jquery' )
);

Also, since WordPress jQuery is in noConflict mode, the code to use jQuery.Timeline should be wrapped as shown below.

jQuery(document).ready(function($) {
  // Here of code for jQuery.Timeline...
} );

Or,

(function($) {
  // Here of code for jQuery.Timeline...
})(jQuery);

Please try it, thank you.

[enginnk]

@ka215

I tried both the method method but still it's not working.

Additionally could you please describe how we can pass the eventData in initialized and reload method. I checked the documentation but I am not getting the point.

[ka215]

Try a script that runs jQuery.Timeline after ensuring that dependencies including jQuery are loaded in native JavaScript.

const init = function() {
  $(function(){
    // Checking the jQuery core loaded
    console.log($.fn)

    $('#something').Timeline();
   });
};

if ( document.readyState === 'complete' || ( document.readyState !== 'loading' && ! document.documentElement.doScroll ) ) {
  init();
} else if ( document.addEventListener ) {
  document.addEventListener( 'DOMContentLoaded', init, false );
} else {
  window.onload = init;
}

The methods for handling event data in the initialized and reload methods are as follows.

Initialized method:

$('#something').Timeline('initialized', function(self, opts) {
  // At this point, the timeline object has already been initialized, so changes to the eventData property will not be rendered.
  // In other words, the eventData in the initialized method is a reference-only property.
  console.log(opts.eventData)
});

Reload method:

By default, the first event data loaded on reload is cached, so you need to clear the cache once or set the initialization option to not cache it.

const newEvents = [
  {start: new Date(), label: 'New event'},
];
$('#something').Timeline('reload', {reloadCacheKeep: false }, function(elm){
  $(elm).Timeline('reload', { eventData: newEvents });
});

By combining these, we can also override the event data on the initialized method.

$('#something').Timeline({ reloadCacheKeep: false }).Timeline('initialized', function(self) {
  $(self).Timeline('reload', { eventData: [ {start: new Date(), label: 'New event'} ] })
});

Please try it, thank you.