jquery ajax load php into specified div

Question

I'm trying to load a php file into a div#main when a link is clicked. The html content loads but the actual php code included in the file does not. Here's what I've got:

Link to trigger everything:

<a id="nav" href="http://domain.com/inc/file.php">

jQuery:

jQuery(document).ready(function($) {

    $("#nav").on('click', function (e) {
        e.preventDefault();
        $("#main").empty();

        $.ajax({
            url: $("#nav").attr('href')
        }).done(function(data) { 
            $('#main').html(data); // display data
        });
    }); 

});

Code from file.php (mostly WordPress functions):

<div id="hostels" class="section cf">

    <?php get_a_post(31); ?>

    <article id="swiss" <?php post_class('swiss bg col span-1-3'); ?> role="article">
        <h3>
            <a href="<?php the_permalink(); ?>">
                <span class="logo-pl-small"><?php include(TEMPLATEPATH . '/library/svg/logo.svg'); ?></span>
                <span class="">Swiss Cottage &ndash; London UK</span>
            </a>
        </h3>
        <?php if ( has_post_thumbnail()) { the_post_thumbnail(); } ?>
        <div class="entry-content">
            <?php the_excerpt(); ?>
            <?php edit_post_link( __( 'Edit', 'bonestheme' ) ); ?>
            <?php if ( get_post_meta($post->ID, 'vidlink', true) ) { 
                echo apply_filters('the_content', get_post_meta($post->ID, 'vidlink', true)); 
            } ?>
         </div>
    </article>

</div>

OUTPUT:

<div id="main">
    <div id="hostels" class="section cf">
    </div>
</div>

The file begins to load but as soon as <?php get_a_post(31); ?> is reached, the file does not continue to load.

I could be wrong, but I thought that by using $.ajax the php code would execute on the server and code it outputs would load into my #main div.

Check for script error. I don't know wordpress but maybe you cannot call this method like this — A. Wolff
– A. Wolff, Commented Jan 7, 2014 at 14:37
Try to add <?php ini_set('display_errors', 1); ?> in the beginning of file.php — Oleg
– Oleg, Commented Jan 7, 2014 at 14:39
The code works fine when replicated. So the error is in your PHP. Run http://domain.com/inc/file.php in your browser and see what happends / the output is. — davidkonrad
– davidkonrad, Commented Jan 7, 2014 at 14:42
@Zub Thanks for the tip. I'm getting Fatal error: Call to undefined function get_a_post(). I'm going to try some generic php to see if that works, then may need to use a different method. — Mr Jonny Wood
– Mr Jonny Wood, Commented Jan 7, 2014 at 14:49
seems you need to activate / install / withdraw a plugin -> wordpress.org/support/topic/…, you propably not have all included in your (guessing) selfmade file.php? — davidkonrad
– davidkonrad, Commented Jan 7, 2014 at 15:02

Mr Jonny Wood · Accepted Answer · 2014-01-07 15:27:31Z

3

So I've got this somewhat working. I found this tutorial for Ajax Powered Loops with jQuery and WordPress from which I discovered that (as I had guessed) the files I created need to understand WordPress functions. For this I need to include:

require_once('../../../../wp-load.php');

In my case that's the relevant path from file.php.

There's still some issues such as shortcodes generated from plugins not working fully, but that's beyond the scope of my original question.

There's a lot of useful info relating to ajax and Wordpress in the tutorial above though, if anyone is having similar issues I'd recommend having a read.

answered Jan 7, 2014 at 15:27

Mr Jonny Wood

3,8645 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

+1, you could accept your own answer, maybe helping other people in the future. Regarding ../../../../wp-load.php, there must be an easy-accessible path-variable in wordpress. But cannot say/remember, gave it up years ago, dont think WP expose good programming practise or a transparent model, imho.

Mr Jonny Wood Over a year ago

@davidkonrad You might be able to use home_url( 'wp-load.php' );. Can't accept my own answer for a couple of days. Will come back to do so.

davidkonrad · Accepted Answer · 2014-01-07 14:34:46Z

1

Instead of

$.ajax({
  url: $("#nav").attr('href')
}).done(function(data) { 
  $('#main').html(data); // display data
});

why not the more simple

$("#main").load('http://domain.com/inc/file.php');

??

answered Jan 7, 2014 at 14:34

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

2 Comments

A. Wolff Over a year ago

doesn't explain why OP code doesn't work but ya load() would be more accurate here

Mr Jonny Wood Over a year ago

In this case, .load() wasn't loading the content into #main but linking to the full page.

Collectives™ on Stack Overflow

jquery ajax load php into specified div

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related