jQuery: Load a PHP Snippet

I use this code to load the content from a different page into the main page:

$('#access a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
$('#content').fadeOut(500, function() {
    $('#content').load(url, function() {
        $('#content').fadeIn(500);
        }); 
    });
});

I want to be able to load the output of <?php /*my PHP code */ ?> into the same container when #mybutton is clicked.

How can I do that?

I suspect it has to be something very basic, but I'm not sure how it's done. I would appreciate expertly advice!

UPDATE: here's the bit of php code I'm trying to run:

<?php printf( __( 'Search Results for: %s', 'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?>
<?php if ( have_posts() ) : ?>

                <?php
                /* Run the loop for the search to output the results.
                 * If you want to overload this in a child theme then include a file
                 * called loop-search.php and that will be used instead.
                 */
                 get_template_part( 'loop', 'search' );
                ?>
<?php else : ?>
                <div id="post-0" class="post no-results not-found">
                    <h2 class="entry-title"><?php _e( 'Nothing Found', 'twentyten' ); ?></h2>
                    <div class="entry-content">
 开发者_运维百科                       <p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyten' ); ?></p>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->
<?php endif; ?>

If I understand correctly, it might be more simple than what you think.

First, wrap the PHP output with hidden <div>:

<div id="searchResults" style="display: none;">
<?php printf( __( 'Search Results for: %s', 'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?>
.....
.....
.....
<?php endif; ?>
</div>

Then just copy those contents to the other container on button click:

$('#mybutton').click(function(event) {
    event.preventDefault();
    $('#content').fadeOut(500, function() {
        $('#content').html($('#searchResults').html());
        $('#content').fadeIn(500);
    });
});

If I didn't understand correctly please explain better and I'll try to find other way around this.

PHP will be executed in the server side, so if you want to load a PHP snippet, then you need to request the server to give the output of the PHP snippet to you. For this you need to use AJAX. Check this

You can use the jQuery .load, .ajax, .post to do this

$('#mybutton').click(function()
{
    $('#content').load('place_where_your_php_code_is_at.php'); 
});

jQuery does DOM and AJAX, it doesn't execute PHP, so you would have to call a script return the HTML output and display it in your #content box.

Alternatively, you could do a hack-around (really unsafe stuff, because anybody can change your javascript from the console) You could have a php file which has the eval function and returns the execution, and then you can call it dynamically. Like this,

$.get('php_executor.php', code='echo "hello world";', function (val) {
$('#content').html(val);
});

And your php would contain something in the lines of <? eval($_GET['code']); ?>

I was just answering your question, I do not recommend using it because anybody could inject all kinds of unsecure code. However, If you plan using it only yourself, it might be worth a shot. Good luck!

The way you've asked your question implies that you haven't fully understood the client-server nature of a web page, and the order in which parts of the code are run.

The solution to your problem is a technique called Ajax. It is extremely simple to do using JQuery.

In short, it allows you to make a fresh call to a new PHP call (or any other server-side code) from within your Javascript code, without having to reload the whole page; the response that comes from the PHP call is given to your Javascript instead of simply being loaded into the browser window as a new page. The Javascript code is then free to use it however it likes; often this means inserting it into the existing page as a new block of content -- which is basically what you're asking for.

There's a lot more to it than that; more I can explain in a short answer here: I suggest you investigate it. Google for "Jquery PHP Ajax tutorials", or similar, and I'm sure you'll come up with some helpful tips.

[EDIT] As request, an example:

In your Javascript code, you could have something like the following:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    $('#my_button').click(function() {
        $.ajax({
          url: "ajaxtest.php",
          success: function(response_data){
            $('#my_container_div').html(response_data);
         }
        });
    });
});
</script>
</head>
<body>

<button id='my_button'>Click me</button>
<br /><br />
<div id='my_container_div'>
</div>

</body>
</html>

Obviously, you would need to have a button with id of 'my_button' and an element with id of 'my_container_div' in the page. This JQuery code will add a click event to the button such that when you click on it, the Ajax code is run.

The Ajax code calls your separate PHP program, and when that program returns some content (whatever that content happens to be), it will be displayed into the container div.

The PHP program is entirely separate from your main PHP program that generated the original page, and does not have access to any of its variables (other than session data of course). You can have this PHP code return anything you like. Usually it would be a snippet of HTML code, or a chunk of text. Often it is in the form of JSON code, which is an array that can be converted into Javascript variables. This allows you to share data between your PHP and Javascript environments.

As I said, this is a very large topic. There's lots more to it, but you'll need to investigate it for yourself. I hope this has helped get you started though.

NB: I have tested the above code. It works. You do obviously also need a PHP program that will generate some output.

$('#myButton').click(function(e){
    $('#content').fadeOut(500, function() {
        $('#content').load('urlOfYourPHP', function() {
            $('#content').fadeIn(500);
        }); 
    });


}

EDIT:

//this should put whatever your php returns into #content, BUT it won't re-run the php every time, it'll be rendered with the rest of the page/

$('#myButton').click(function(e){
    $('#content').html('<?php /*my PHP code */ ?>');
});