0

I have a sidebar widget that has some elements inside I'd like to modify. The widget generates it's code from the "Action Network", so the content of the widget is loaded dynamically from another site which renders the markup.

<div id="can-petition-area-build-more-social-housing" style="width: 100%">  <div class="can_embed v3  petition">
    <div id="can_embed_form">
          <div id="can_embed_form_inner">

When I am in Chrome, I can target the elements easily, for instance:

jQuery('#can_embed_form').hide();

Hide the DIV. However, when I run the same code from a jQuery file, nothing happens and I get no errors at all. Am enqueuing the script file in the wp_enqueue_scripts action (it spits out code when I type include console.log('xyz') so it's properly loaded.

This is my JS file:

jQuery(document).ready(function($){
    $('#can_embed_form_inner').hide();
});

If I hide something that is not part of the widget from within the JS file, it does hide it, which makes me think the widget is not in the DOM when jQuery is trying to get the div by element.

I would've thought the ready() function would take care of that but am clearly wrong.

Any pointers would be greatly appreciated!

Thanks!

0

Man, every time all it takes is to press that post button and then I find the answer seconds later - lol:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $(document).on('can_embed_loaded', function() {
            // do your work here, after the widget is loaded
            $('input[name="commit"]').val('Sign My Awesome Petition');
        });
    }); 
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.