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!

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!

• jquery
• widgets

Share Improve this question edited Aug 30, 2019 at 4:02 csaborio asked Aug 30, 2019 at 3:55 csaboriocsaborio 11222 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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');
        });
    }); 
});