Cannot read property 'nodeName' of undefined

[ossvn]

Hey mate,

It's me again, im looking for the error but not sure what happened to mine, here's my demo page http://demo.comfythemes.com/woocommerce-checkout-template/ you have to add to cart first (on the menu), then go to http://demo.comfythemes.com/woocommerce-checkout-template/checkout/ , viewsource you will get

<script type='text/javascript'>
                (function($) {
                    'use strict';

                        $('#wct_33_field').dependsOn({

                                    "#billing_email": {
                                                                                        values: ['abc@gmail.com']
                                                                                    },

                                    "#billing_phone": {
                                                                                        not: ['123456']
                                                                                    },

                                                    });
                                    })(jQuery);
            </script>

Can you please take a look?, since it's your core so i dont know how to deal with it.

Thanks mate

[dstreet]

I looked at your page, but did not see the script you mentioned. The script that was on the page, however, was failing because the DOM elements for the subject and dependency do not exist on the page.

[ossvn]

so that mean dependon cant find the DOM element cant be found?, i think i should load dependon after all, but i checked, we used $function()....so that it will wait untill all DOM loaded, still cant find any problem, let's me enable that bug and you can see, 1m.

Update: hm...i might got the error, thanks mate, please keep this open, i will update you soon

[dstreet]

I haven't heard any update on this issue, so I'm going to close. If you still need help, let me know and I'll reopen the issue.

[bkno]

I'm seeing this issue too. The code works fine when the target IDs are present on the page, but when they're not this errors occurs. I.e. when dependsOn code is in a global JS file loaded on every page. I had to wrap the dependsOn logic to avoid the error:

$('#content-form').each(function() {
    $('#content-description').dependsOn({
        '#content-type select': {
            not: ['page']
        }
    });
});

[dstreet]

The plugin does not currently support being able to bind to an element that doesn't exist yet on the page. What is your use case for this? I may consider exploring this option.

[bkno]

I usually just put my few bits of JS in a single file that's included in the footer (in this case it's a custom CMS). Typically other plugins are fine when the element isn't present - I'm guessing they wrap their logic in a if ($(target).length).

Some systems like WordPress (or more specifically theme frameworks) encourage the pasting JS code snippets into a part of the admin area, which the theme adds into the main site template.

If this is not as typical as I thought it would be interesting to know how others add these JS snippets to their site. E.g. next to the form tags.

[dstreet]

Ok. So the script is present on all pages, whether it is needed or not? If that's the case, I can add a simple check to see if the target element exists. However, if the expected element is meant to be added to the DOM at latter point, such as after some asynchronous action, then that becomes trickier, but completely doable.

Either way, I should add a check to see if element exists, and perhaps gracefully fail if it doesn't.

[hsgubert]

Hi @dstreet any update on this issue? Just wondering if dependsOn.js is still being maintained or has migrated to some other project.

[LukasThum]

Hi @hsgubert, with the last commit from 2017, I don't think this is still actively maintained. What solved it for me, was putting the dependsOn call into the $( document ).ready(function() { /* here */ }); block to make sure every element is loaded when the function is called. Hope this still helps.