WordPress Jquery cannot read property for offset in admin backend

I'm simply trying to get the top, left, etc position of an element when in the admin backend...

function my_backend_assets() {
    wp_enqueue_script(
        'my-editor-js',
        plugins_url( '/src/editor.js', dirname( __FILE__ ) ),
        array( 'jquery' ),
        filemtime( plugin_dir_path( __FILE__ ) . '/src/editor.js' )
    );
}
add_action( 'admin_enqueue_scripts', 'my_backend_assets', 99999 );

And my js

$( document ).load(function() {

  var $test = $(".my-div").offset();

  console.log( $test.top );

});

I get Uncaught TypeError: Cannot read property 'left' of undefined

Element my-div exists. I can log it it fine. The script loads in the backend. Jquery works... I don't understand why I can't get the offest() of elements.

More details:

I'm loading my custom js in the Wordpress edit page (when eidting a page)

I'm trying to get the offset of any UI element within the editor page. For example the editor text area. It is not returning anything. Only with a timeout function it works.

I am using the latest Wordpress which has the Gutenberg editor.

WordPress Jquery cannot read property for offset in admin backend, I'm simply trying to get the top, left, etc position of an element when in the admin backend function my_backend_assets()  Hey @sablednah. We are aware of this issue and will do our best to release the fix during the day. The problem is with reducing HeartBeat control with tools like WP Rocket, so at this very moment, the solution would be to stop reducing HeartBeat activity on the backend.

Cannot read property 'left' of undefined necessarily means that $(".my-div").offset() is returning undefined.

Probably, the $(".my-div") is not matching an element when it's being executed...

Now, the why part of that is what it hinges on! You say that you can log it fine. I'm assuming that means that you're able to open up the developer tools in your browser and get results from putting that same code into the console.

A possible troubleshooting tactic:

Wrap a setTimeout() around the callback function inside $(document).load, and run it 5s after. This is a hacky workaround that could help you understand wether or not the .my-div element is being added to the DOM sometime after the ready

That being the case, look into how/where your .my-div element is being added and hook your JS execution to an event triggered by that process instead of $(document).load

Anyway - the troubleshooting code:

$(document).load(function() {
  setTimeout(function() {
    var $test = $(".my-div").offset();
    console.log($test.top);
    if ($(".my-div").length > 0) {
      console.log('.my-div was able to be located in the DOM, 5s after `$(document).load`');
    }
  }, 5000);
});

Uncaught TypeError: Cannot read property 'top', Support » Plugin: Autoptimize » Uncaught TypeError: Cannot read property 'top' to the URL) the error is there as well;. 17:33:07.860 TypeError: $(…).offset(…)  Does anyone have experience with using the jQuery UI plugins in the Wordpress admin area? I´ve been trying to use the datepicker functionality in jQuery UI, but its conflicting with the built- in

The first issue is that there is nothing matching you jQuery selector. Moreover, I would highly recommend you to write your JS not with $ but with jQuery like so :

jQuery( document ).load(function() {
    var $test = jQuery(".my-div").offset();
});

Depending if you load in header or footer : https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

X Theme Errors after upgrade, We are stuck and not able to do many things on the Admin side like If it doesn't help, please rollback to the WordPress v5.1.1 to check if the Automatically downgrad or update to any WordPress version you want directly from the backend. I only saw this error Uncaught TypeError: Cannot read property  BluetoothTiger; January 13, 2016 at 4:59 am; Looking at the minified JS code, it seems the null variable seems to be getting caught right around here…

App js cannot read property filename of undefined failed building , Open app. server. but atom Prompted :Uncaught TypeError: Cannot read WordPress Jquery cannot read property for offset in admin backend I'm simply trying  When I open any page or post the default WordPress editor does not switch to the Text mode from the Visual mode tab. The visual composer v. 4.12 is not loaded. everything works fine when I disabled the Yoast SEO plugin. How can we reproduce this behavior? Upgrade to Wordpress to 4.6.1 and Yoast version: 3.5 Open any post or page, or add a new post.

Slideshow no longer working, Uncaught TypeError: Cannot read property 'children' of null at e.slides Uncaught TypeError: Cannot read property 'offsetWidth' of null at e.read read @ uikit.min.js?3c777896b23986477fe98423ac818b1d:3 (anonymous) The link you provided to access backend now links to a 404 site. That didn't  Magento 2: Uncaught TypeError: Cannot read property '*' of undefined in (section-config.js:33) 3 Uncaught TypeError: Cannot read property 'nodeName' of undefined in custom js admin panel

script.js:20 Uncaught TypeError: Cannot read property, “script.js:20 Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:20” Code Answer. You may not remember next  Questions: I created a carousel with Bootstrap 3.3 and it works on my local machine, but when I upload the whole thing on server where the bootstrap js file is being compiled together with other files in a single file, I get this error: Cannot read property 'offsetWidth' of undefined – has anybody faced this

Comments
  • Try adding the last parameter on the wp_enqueue_script to TRUE. wp_enqueue_script( 'my-editor-js', plugins_url( '/src/editor.js', dirname( __FILE__ ) ), array( 'jquery' ), filemtime( plugin_dir_path( __FILE__ ) . '/src/editor.js' ), TRUE );
  • Great explanation! Thank you!
  • Hello Cameron. Thank you for the answer! With the timeout function it seems to work. The elements seem to appear after the page loads. I tried an on click event on an element in the wordpress editor with a simple console message to test and nothing happened. I tried .click(function() { and .on('click', function () { The test however works on front end pages.
  • Could you perhaps amend your question with more data about what admin page this is all on? And how, exactly, the .my-div is being added to the DOM? (a 3rd party plugin, custom code, etc.)
  • Ok I added more details at the end of my question.
  • This is the closest answer to correct, although I would possibly suggest using a "no-conflict safe" document ready / load: (function( $ ) { $(document).load(function() { // More code using $ as alias to jQuery }); })(jQuery);