JS innerhtml changing style when using AJAX

Question

so I’m about to finish my first wordpress theme but I’m having a problem here.

The main page of the theme shows some posts (audios, really). I’ve allowed two options: showing the 5 latest or the 5 most popular. Switching from one to the other is only done by clicking a button.

I did this using AJAX (you’ll have the code below). Somehow, the queries work fine but the style doesn’t. And the weird part is that it’s just a part of the style that doesn’t work correctly, that’s why I’m guessing the problem is in the JS where I use innerhtml. To make it easier, you’ll have screenshots of this too.

I have another page to list all posts, this one without using any AJAX because the query doesn’t change, and the style looks just as it should. That’s why I’m pretty sure the error comes from JS.

Front page template (php):

<?php get_header(); ?>
    <div id="front-page" class="content">
        <div id="tabs" class="rel">
            <p id="latest" class="active">LATEST</p>
            <p id="popular">POPULAR</p>
            <hr>
            <hr id="active">
        </div>
        <div id="latest-popular" class="rel">
        </div>
        <?php get_sidebar(); ?>
    </div>
<?php get_footer(); ?>

JS script (this function is called everytime p#latest or p#popular are clicked (and they are not being shown yet):

function show_latest_popular(selected){
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //document.getElementById("latest-popular").innerHTML = this.responseText;
        $("div#latest-popular").html(this.responseText);
    }
  };
  xmlhttp.open("GET","latestpopular?q="+selected,true);
  xmlhttp.send();
}

This AJAX function creates a request to this php file:

<?php 
    try {
        $q = isset($_GET['q']);
    } catch (Exception $e) {
        $q = 'latest';
    }
    if ($q == 'latest'){
        $the_query = new WP_Query( array(
                'post_type' => 'post',
                'posts_per_page' => 5,  
            )
        );
    }
    elseif ($q == 'popular') {
        $the_query = new WP_Query( array(
                'post_type' => 'post',
                'posts_per_page' => 5,  
                'orderby' => 'meta_value_num',
            )
        );
    }

    if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) { 
        $the_query->the_post();
        require "template-parts/episode.php";
    }
        rewind_posts();
    }
?>

Up here, the “template-parts/episode.php” is just the template for each blog post.

I think this is all the code being used.

This is how the other page inside the theme looks (and how all should look):
Expected design, and already working in another page

And this is how the main page looks (JS involved):
Final design, when JS is used

0
, , , , Pol Marin 1 year 0 Answers 66 views 0

Leave an answer