load mypage.php via ajax into a div in wordpress

Question

i have an ajax load request working in wordpress, but i would like to load the content from another page into the container div. at the moment it just passes the url in $dataToSend as a string?

jQuery(document).ready(function(){

    var $dataToSend = "my-page.php";
    var $testBtn = jQuery('#text-ajax-btn');
    var $holdingCtn = jQuery('#my-holding-ctn');

    $testBtn.click(function(){
        jQuery.ajax({
            type:'POST',
            url: myAjax.ajaxurl,
            data:{
                action:'myAjax',
                dataToSend:$dataToSend,
            },
            success: function(data,textStatus,XMLHttpRequest){
                $holdingCtn.html("");
                $holdingCtn.append(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });
});

how can i pass an entire .php page through as the $dataTosend?

url: myAjax.ajaxurl shouldnt this contain my-page.php? I think you are doing opposite of what you want to do :) why °sending° when obviously want to load something in the current page? — user796443
– user796443, Commented Sep 25, 2013 at 22:56
thanks, have tried this and now i get an error: '500 (Internal Server Error)' in the console. the url looks to be correct. im pretty new to ajax in wordpress, is this because im on a local server 'mamp'? — user2805371
– user2805371, Commented Sep 25, 2013 at 23:06

score 1 · Accepted Answer · 2013-09-25 23:38:46Z

1

I do this all the time for wordpress, give me a sec to access my repository and I will show you example code.

I think problem is your my-page.php! I imagine you custom coded it. So it doesn't have necessary functions loaded.

put following code at the top of your my-page.php (this will help with 500 error you are getting)

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

ajax part should look something like this:

//start ajax
            $.ajax({
                url: "http://localhost/wp-content/themes/theme/my-page.php",
                type: "POST",
                data: data,
                cache: false,
                success: function (data) {

                    console.dir(data);

                }
            })

edited Sep 25, 2013 at 23:38

answered Sep 25, 2013 at 23:26

user796443

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

1 Comment

user2805371 Over a year ago

this worked for me, just adding "require('../../../wp-load');" to the top of the page to be loaded actually made it possible to use the shorthand jQuery('#my-ctn').load('my-page.php'); thanks

The Alpha · Accepted Answer · 2013-09-25 23:17:32Z

0

If you want to load content from my-page.php file then you can load from the server side using

$data = file_get_contents('path/to/file/my-page.php'); // pass right path/url

Then, just echo the content from your function (registered ajax handler in WordPress using add_action) and in this case it should be

echo $data;
die(); // terminate the further execution

So, it should look something like

add_action( 'wp_ajax_myAjax', 'yourAjaxHandler' );
add_action( 'wp_ajax_nopriv_myAjax', 'yourAjaxHandler' );
function yourAjaxHandler(){
    $data = file_get_contents('path/to/file/my-page.php');
    die($data); // echo out the string and terminates execution
}

In your success callback, you can use

success: function(data){
    jQuery('#my-holding-ctn').html(data);
}

answered Sep 25, 2013 at 23:17

The Alpha

147k30 gold badges294 silver badges313 bronze badges

1 Comment

The Alpha Over a year ago

Here is a good read about ajax in WordPress.

mszaro · Accepted Answer · 2013-09-25 23:20:50Z

0

Not sure if this is fully applicable, but the super easy way is just

$("#myDiv").load("myFile.php?foo=1&bar=2...");

answered Sep 25, 2013 at 23:20

mszaro

1,3821 gold badge13 silver badges25 bronze badges

4 Comments

user2805371 Over a year ago

yeah this was my first approach, but couldnt get this to work either. I actually ended up at the same point when hardcoding the url for the page in i got the same '500 (Internal Server Error)' which makes me think its to do with being on a localhost?

The Alpha Over a year ago

Your approach is nice but not appropriate for wordPress, In WordPress you need to do it via admin-ajax.php/myAjax.ajaxurl file and using ajax hooks.

The Alpha Over a year ago

Here is a good read about ajax in WordPress

mszaro Over a year ago

@user2805371 if you were seeing 500s, then that means the request was being made (e.g., your ajax logic is fine) and something was wrong with the request or the file you were calling.

Collectives™ on Stack Overflow

load mypage.php via ajax into a div in wordpress

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related