Title: Javascript cannot see HTML from Wp_query
Last modified: August 30, 2016

---

# Javascript cannot see HTML from Wp_query

 *  [DuneDx](https://wordpress.org/support/users/dunedx/)
 * (@dunedx)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/)
 * Hi
 * I’m hoping you can help me understand a problem I’m experiencing. I’m working
   on a page that shows posts categorised as 12 or 13 within a feed. There are two
   buttons at the top of the feed which, when clicked, hide some of the content –
   at least it should!
 * To do this I have:
    - **JS –** written a piece of js that, upon clicking one of the buttons adds
      a class (either .turnedon or .turnedoff) to items with a specified class.
    -     ```
          //Extra javascript v1.1 should hide/unhide resultsblob classed as 13
          jQuery(document).ready(function() {
      
              console.log("bla");
      
              jQuery("#everything").click(function(){
                  jQuery('[data-categories="13 "]').addClass("turnedon");
                  jQuery('[data-categories="13 "]').removeClass("turnedoff");
                  jQuery("#everything").addClass("barcontaineron");
                  jQuery("#reading").removeClass("barcontaineron");
                  jQuery("#everything").removeClass("barcontaineroff");
                  jQuery("#reading").addClass("barcontaineroff");
      
              });
      
              jQuery("#reading").click(function(){
                  jQuery('[data-categories="13 "]').addClass("turnedoff");
                  jQuery('[data-categories="13 "]').removeClass("turnedon");
                  jQuery("#reading").addClass("barcontaineron");
                  jQuery("#everything").removeClass("barcontaineron");
                  jQuery("#reading").removeClass("barcontaineroff");
                  jQuery("#everything").addClass("barcontaineroff");
      
              });
      
          });
          ```
      
    - **functions.php –** I have enqueued this script within my custom functions
      php file
    -     ```
          function SHdemo_scripts() {
                 wp_enqueue_script('extra js', get_stylesheet_directory_uri() . '/js/extra.js');
             }
      
          add_action('wp_enqueue_scripts', 'SHdemo_scripts');
      
          ?>
          ```
      
    - **Wp_query –** I have added the posts to the page via a new WP query and used
      the category id to assign a class to the containing divs
    -     ```
          <?php
              //SH results feed ordered by date
              $resultsPosts = new WP_Query('cat=12,13&posts_per_page=9');
              if ($resultsPosts->have_posts()) :
             while ($resultsPosts->have_posts()) :
              $resultsPosts->the_post(); ?>
              <div class="resultsblob" data-categories="<?php
          foreach((get_the_category()) as $category) {
              echo $category->cat_ID . ' ';
          } ?>">
              <h2><?php the_title(); ?></h2>
                  <?php the_content(); ?>
              </div>
              <?php
                      endwhile;
              else:
              //fallback no content message here
          endif;
              //This stops wordpress from killing life
              wp_reset_postdata();
              ?>
          ```
      
 * So my wpquery dumps all the content on my page assigning each item a class based
   on its ID and then my javascript adds the class .turnedon or .turnedoff to these
   items depening on which button is pressed.
 * **The problem** I’m experiencing is that while the JS has no problem interacting
   with the standard HTML on the page, it just cannot see the HTML supplied via 
   the WPquery. Is this something to do with the order that the js is called compared
   to the wp_query being run?
 * Hope you can help.
    Many thanks Dune

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/#post-6749308)
 * Can you post a link to a page that shows the issue?
 * One thing that might be happening is that with your PHP, if a post is in both
   category 12 and 13, you’ll get this:
 * `<div class="resultsblob" data-categories="12 13 ">...</div>`
 * which won’t be matched by
 * `jQuery('[data-categories="13 "]');`
 * If that’s the case, you’ll likely have to check the category ID and if it’s 13,
   add a special class that you can target with jQuery.
 *  Thread Starter [DuneDx](https://wordpress.org/support/users/dunedx/)
 * (@dunedx)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/#post-6749370)
 * Hi Stephen
 * Many thanks for your reply. It does indeed do that but altering the JS to target
   just “resultsblob” didn’t seem to work either :S
 * The page is here:
    [http://www.reading-rampage.co.uk/results](http://www.reading-rampage.co.uk/results)
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/#post-6749379)
 * I’m sorry, but I can’t figure out what’s going on here. All of your code works
   correctly on my local install. As a workaround, what if you did something like
   this:
 *     ```
       <?php if ( in_category( '13' ) && ! in_category( '12' ) ) :?>
       <div class="resultsblob thirteen">
       <?php else : ?>
       <div class="resultsblob">
       <?php endif; ?>
       <h2><?php the_title(); ?></h2>
       ... code snipped for clarity ...
       ```
   
 * Then you could target the posts that are just in category 13:
 * `jQuery( '.thirteen' )`
 *  Thread Starter [DuneDx](https://wordpress.org/support/users/dunedx/)
 * (@dunedx)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/#post-6749402)
 * Awesome!!
 * Thank you so much, this works a treat 😀

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Javascript cannot see HTML from Wp_query’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [wp_query](https://wordpress.org/support/topic-tag/wp_query/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 4 replies
 * 2 participants
 * Last reply from: [DuneDx](https://wordpress.org/support/users/dunedx/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-cannot-see-html-from-wp_query/#post-6749402)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics