jQuery stops working in Code, but works in Console (WordPress)

Question

So i use this code in a template.php of WordPress:

<script type="text/javascript">

 jQuery(document).ready(function($){
    console.log('A');
    $('div.banner_gebraucht').each(function(){
      console.log('B');
        if( $.trim($(this).text()) == '') {
                    console.log('step info')
            $(this).hide();
            $('.banner3dtriangle_gebraucht').hide();
            console.log('D');
        }
    });
});

 </script>

In Console it works, but in the template.php it only outputs A. Can you guys tell me, why this script stops?

I assume there is no div with class banner_gebraucht at the time of load — mplungjan, Jul 11 '18 at 13:02
Maybe `div.banner_gebraucht` is added in an asynchrobous way? — Jonas Wilms, Jul 11 '18 at 13:02
These Div's get loaded by WP Bakery (Custom Grid).. so this could be a problem. Is there any function to force this code only if the whole DOM is loaded? Shouldn't .ready() to this? — roehler.nrw, Jul 11 '18 at 13:17
Ask here: https://support.wpbakery.com/ - and no. the document.ready is triggered when all the elements loaded on the page have loaded. It does not know you triggered something else async — mplungjan, Jul 11 '18 at 13:28

score 0 · Answer 1 · answered Jul 11 '18 at 13:34

So the elements you need have not loaded at the time of document.ready.

Try this if you cannot attach to a load of the grid

var tId;
function hideBanners() {
  var $banners = $('div.banner_gebraucht');
  if ($banners.length == 0) {
    tId = setTimeout(hidebanners, 1000);
    return;
  }
  $banners.each(function() {
    console.log('B');
    if ($.trim($(this).text()) == '') {
      console.log('step info')
      $(this).hide();
      $('.banner3dtriangle_gebraucht').hide();
      console.log('D');
    }
  });

}
$(function() {
  console.log('A');
  hideBanners();
});

Mario · Answer 2 · 2018-07-15T20:35:57.160

-1

Edit: (delete old answer, irrelevant for question, because jQuery comes preinstalled in wordpress, so it should be loaded.)

edited Jul 15 '18 at 20:35

answered Jul 11 '18 at 13:02

Mario

870
9
20

suggestion and queries should be posted in the comment. Not in the answer. – Ullas Hunka Jul 11 '18 at 13:05
thanks, you're right. will update the answer. – Mario Jul 11 '18 at 13:06
This is obviously not the problem since console shows `A` – mplungjan Jul 11 '18 at 13:13
Used ur code. Still only shows A. I'm sorry. Did not downvote you btw. Also: You missed "});" at the end. – roehler.nrw Jul 11 '18 at 13:14
Is the div present when the DOM is ready or will it be loaded from an external source? thanks for "})", the answer should show what to fix. – Mario Jul 11 '18 at 13:23
It gets loaded by WP Bakery (Post Grid). Its a custom Grid i made in Grid Builder. So it gets loaded from an external source. – roehler.nrw Jul 11 '18 at 13:24
so @mplungjan is right. The issue is because the div is not loaded at time of execution of this script. – Mario Jul 11 '18 at 13:25
Its the only thing i could think of.. but now would be the question: how to execute after the full DOM is loaded? Stuff like: $(window).bind("load", function() { // code here }); did not work :( – roehler.nrw Jul 11 '18 at 13:29
try $(".banner_gebraucht").load(function(){ // do stuff here }); – Mario Jul 11 '18 at 13:34

jQuery stops working in Code, but works in Console (WordPress)

2 Answers2