在AJAX加载的php文件中无法传递php

Question

I'm building a webshop using WooCommerce. I made two switch buttons, with which you can change the view. Either to 'List view', or to 'Grid view'. I'm using this function to trigger the ajax call(this code is just for the list view button):

$('#view-list').on('click',function(){
  var which_view = $(this).val();
  $.ajax({
      type: 'post',
      url: 'view-list.php',
      data: {which_view : which_view},
      success: function(res){
          $("#ajaxtest").html(null);
          $("#ajaxtest").html(res); // res = your new view...
      }
  });
});

'view-list.php' looks like this:

<div id="ajaxtest">
  TESTING LIST VIEW TRIGGER

    <?php if ( have_posts() ) : ?>

        <?php woocommerce_product_loop_start(); ?>

            <?php woocommerce_product_subcategories(); ?>

            <?php while ( have_posts() ) : the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

        <?php
            /**
             * woocommerce_after_shop_loop hook
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );
        ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

        <?php wc_get_template( 'loop/no-products-found.php' ); ?>

    <?php endif; ?>
</div>

The ajax funtion works. As in, it loads the new file 'view-list.php'. However, it doesn't go any further than that. It doesn't process the rest of the file. This is probably because the browser can't process php functions after it has been loaded, isn't it?

How can I still make this work?

Answer 1

Browsers don't process php, and in normal circumstances they are able to load content through ajax at any time. You can easily trace back where things go wrong but here's some hint:

1. Be sure the event handler (.click()) isal called after the element is added ($(document).ready())
2. The which_view variable is seemingly not used on server side, but in case it is, check (console.log()) it's value ($(this).val()) if it's actually correct
3. Also check that the url 'view-list.php' is indeed available as a relative url from the current path
4. At this point you are most likely have the answer, but in case something is still not good, you can always check that the returned value (res) is indeed exist, and if not you can start debugging you php code.