Question

I have read the documentation and some online resources for the .load() method, and for the app I am building it is not working. Please note I have never had to use .load before.

<script type="text/javascript">
$(document).ready(function() {
  $('#next').click(function(e){
    alert("Click"); // this alerts when clicked as expected
    $('#atestimonial').load('testimonial.php', function() {
        alert('Load was performed.');
    });
    return false;
  });
});
</script>

The event works as intended. That code block is in header.php (using wordpress) and the actual div #atestimonial is in sidebar.php, so it is in different files; does this matter?

Inside of testimonial.php is this:

<?php 
include('testimonialPull.php');
echo "Bahh";
?>

testimonialPull.php

<?php
require_once('../../../wp-blog-header.php');
    query_posts(array(
        'cat' => 4,
        'order' => 'ASC', // ASC
        'orderby' => 'rand',
        'showposts' => 1,
    ));
    $wp_query->is_archive = true; $wp_query->is_home = false;
    if (have_posts()) : while (have_posts()) : the_post();
    the_content();
    endwhile; endif;
?>

If i remove the contents of testimonialPull, then it echos correctly.

Which just gets a random post into the atestimonial div.

The structure of the actual div and button is this:

<div id="testimonials">

<div class="tHeading"><h4>Client Testimonials</h4></div>

<div class="atestimonial">
    <?php
    include('testimonial.php');
?>
</div>
<div id="next"><a id="nextC" href="#" return="false">NEXT TESTIMONIAL</a></div><!-- END #next -->

</div><!-- END #testimonials -->

So, have I done something wrong for the testimonial to not show in the div with the .load?

Thank you for taking time to read this.

FAST EDIT

This is working on localhost; I have just read that this does not work with localhost, is this correct?

Answer 1

You’re asking jQuery to fill $('#atestimonial'), that is an element whose id is atestimonial but you don’t have such element in your page.

Replace

<div class="atestimonial">

by

<div id="atestimonial">

EDIT :

by reading your comments I think you may have a path problem, depending on where you include your script.

Instead of

$('#atestimonial').load('testimonial.php', function() {

You may need something like

$('#atestimonial').load('/testimonial.php', function() {

or

$('#atestimonial').load('/ggg/testimonial.php', function() {