Question

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; ?>

Answer 1

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.