title: Wordpress AJAX load page content
body: <p>I'm trying to get wordpress to load my other pages through AJAX, first i thought i wouldn't append other pages HTML but it seems as if the page doesn't know how to find the page ID. </p>
  
  <p><strong>My jQuery file ajax-pagination.js</strong></p>
  
  <pre><code>(function($) {
  function find_page_number( element ) {
      element.find('span').remove();
      return parseInt( element.html() );
  }
  $(document).on( 'click', '.menu-item a', function( event ) {
      event.preventDefault();
  
      page = find_page_number( $(this).clone() );
      $.ajax({
          url: ajaxpagination.ajaxurl,
          type: 'post',
          data: {
              // action: 'ajax_pagination',
              action: 'my_ajax_pagination',
              query_vars: ajaxpagination.query_vars,
              page: page
          },
      beforeSend: function() {
          $('#main').find( 'article' ).remove();
      $('#nav-burgermenu-btn').removeClass('active');
      $('#nav').removeClass('active');
          $(document).scrollTop();
          $('#main').append( '&lt;div class="page-content" id="loader"&gt;Loading New Posts...&lt;/div&gt;' );
      },
      success: function( html ) {
          $('#main #loader').remove();
          $('#main').append( html );
      }
      })
  })
  })(jQuery);
  </code></pre>
  
  <p><strong>My Wordpress Functions PHP file</strong></p>
  
  <p>Everything is loaded in like this:</p>
  
  <pre><code>global $wp_query;
  wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
      'ajaxurl' =&gt; admin_url( 'admin-ajax.php' ),
      'query_vars' =&gt; json_encode( $wp_query-&gt;query )
  ));
  </code></pre>
  
  <p>And then this code follows:</p>
  
  <pre><code>add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' );
  add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' );
  
  function my_ajax_pagination() {
      $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
  
      $query_vars['paged'] = $_POST['page'];
  
  
      $posts = new WP_Query( $query_vars );
      $GLOBALS['wp_query'] = $posts;
  
      add_filter( 'editor_max_image_size', 'my_image_size_override' );
  
      if( ! $posts-&gt;have_posts() ) {
          get_template_part( 'content', 'none' );
      }
      else {
          while ( $posts-&gt;have_posts() ) {
              $posts-&gt;the_post();
              get_template_part( 'content', get_post_format() );
          }
      }
      remove_filter( 'editor_max_image_size', 'my_image_size_override' );
  
      the_posts_pagination( array(
          'prev_text'          =&gt; __( 'Previous page', 'twentyfifteen' ),
          'next_text'          =&gt; __( 'Next page', 'twentyfifteen' ),
          'before_page_number' =&gt; '&lt;span class="meta-nav screen-reader-text"&gt;' . __( 'Page', 'twentyfifteen' ) . ' &lt;/span&gt;',
      ) );
  
      die();
  }
  
  function my_image_size_override() {
      return array( 825, 510 );
  }
  </code></pre>
  
  <p>Right now it appends a 0 to the HTML when a link in my nav is clicked. It's like something is going wrong in the find_page_number function since the $('#main').append( html ); won't append html.. but i'm not sure.</p>