I have the following code in my page template file, (below), which works ok when used with the normal form submit.

What I'm trying to do is update the get_pages variables using ajax (no page refresh) when the select dropdowns are changed. I can see the data that is returned in the firebug console but can't seem to get it back to php code/variables.

Any help would be greatly appreciated, s.

if ( isset($_POST['sortables']) ) :
    $sortables = $_POST['sortables'];
else : 
    $sortables = 'menu_order';
if ( isset($_POST['ascdesc']) ) :
    $ascdesc = $_POST['ascdesc'];
else : 
    $ascdesc = 'asc';

<script type="text/javascript">
jQuery(document).ready(function($) {                            
    $("#sort, #ascdesc").change(function() {
        var $form = $("#myForm");
        var dataString = $form.serialize();
            type: "POST",
            url: "<?php the_permalink(); ?>",
            data: dataString,                                                                       
            success: function() {

<?php $thispage=$post->ID; ?>
<section id="list-boxes">   
    <form action="<?php the_permalink(); ?>" method="post" id="myForm" style="margin:5px 0 15px;">
        <select name="sortables" id="sortables">  
            <option value="menu_order"<?php if ($_POST['sortables'] == 'menu_order') echo 'selected="selected"'; ?>>Sort by Menu Order</option>                       
            <option value="post_title"<?php if ($_POST['sortables'] == 'post_title') echo 'selected="selected"'; ?>>Sort by Title (Alphabetically)</option>                                        
            <option value="post_date"<?php if ($_POST['sortables'] == 'post_date') echo 'selected="selected"'; ?>>Sort by Date Created</option>    
            <option value="post_modified"<?php if ($_POST['sortables'] == 'post_modified') echo 'selected="selected"'; ?>>Sort by Date Modified</option>            
        <select name="ascdesc" id="ascdesc">                        
            <option value="asc"<?php if ($_POST['ascdesc'] == 'asc') echo 'selected="selected"'; ?>>Ascending</option>                        
            <option value="desc"<?php if ($_POST['ascdesc'] == 'desc') echo 'selected="selected"'; ?>>Descending</option>                        
        <button type="submit" id="sort-submit">Sort</button>       

    <?php $pages = get_pages('child_of='.$thispage.'&sort_column='.$sortables.'&sort_order='.$ascdesc.'&parent='.$thispage.'&number=2'); $count = 0; foreach($pages as $page) : $content = $page->post_excerpt; $link = get_page_link($page->ID); ?>

1 Answer 1


Your Javascript is loading the whole page anyway, since you are sending a request to the_permalink. If you are going to do that just reload the page.

First, your should be using the AJAX API. There are a couple of steps but it isn't that hard. See the Codex to get started.

In your callback you only want to run the line that gets the $pages variable and then whatever processing is necessary to format your results. Return that formatted content as a string. Then use your jQuery to replace the apprpriate part of the page with the new content. There are several jQuery functions for doing that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.