Execute a document.ready in functions.php

Question

I need to run a script after a hook is fired in my functions.php file. Im using a wordpress mailchimp plugin, I need to do some text inserts and display = "none", etc, in the html:

add_action( 'mc4wp_form_success', function() {
   // do something
     echo '<script type="text/javascript">',
        'console.log("starting....");', // this works
     'document.getElementById("mailchimp-is-subscribed").style.display = "none";',
         'document.getElementById("mailchimp-success-form").style.display = "block";',
         'console.log("end");',
     '</script>';
});

The error I got was style is null. I assume the document is not ready? $ does not work. Am I doing this wrong? I need to run that code after that hook is called. Putting the code in .js file works great. Thanks

You are indeed doing this wrong. You can't just intermingle PHP and JavaScript like that. — Niet the Dark Absol, Aug 14 '17 at 11:19
@NiettheDarkAbsol Yeah I thought so. What's the correct approach to this? — Sylar, Aug 14 '17 at 11:21

Fredster · Accepted Answer · 2017-08-14T11:47:16.897

0

You can add your code as an on DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', function () { ..your_code... }, false);

Check this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

edited Aug 14 '17 at 11:47

answered Aug 14 '17 at 11:23

Fredster

776
1
6
16

Sorry but that looks like half of jquery and I cant use jquery there. – Sylar Aug 14 '17 at 11:41
1

SWEET! Works great but in this format `document.getElementById("mailchimp-is-subscribed").style.display = "none";` Thanks! – Sylar Aug 14 '17 at 11:52

Execute a document.ready in functions.php

1 Answers1