custom post types - JS innerhtml changing style when using AJAX

admin2025-04-19  0

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 jQuery's .html() (same as innerhtml in JS). 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):

And this is how the main page looks (JS involved):

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745001175a279235.html

最新回复(0)