Update get_pages using ajax on form select change

2 Views

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.

Read More

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); ?>
Post Views: 2

Related posts

Leave a Reply

1 comment

  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.