Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

<?php 
if ( isset($_POST['sortables']) ) :
    $sortables = $_POST['sortables'];
else : 
    $sortables = 'menu_order';
endif;
if ( isset($_POST['ascdesc']) ) :
    $ascdesc = $_POST['ascdesc'];
else : 
    $ascdesc = 'asc';
endif;                              
?>                                    

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

<?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>    
        <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>                        
        </select>                 
        <button type="submit" id="sort-submit">Sort</button>       
    </form>                            

    <?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); ?>
share|improve this question

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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