Reload page with a different shortcode when a user selects from a dropdown

You can create a custom shortcode wrapper that will execute the shortcode with the desired attributes, so you would use [jobs-custom] in the page:

add_shortcode('jobs-custom', 'custom_jobs_shortcode');
function custom_jobs_shortcode($atts) {
    if (is_user_logged_in()) {
         $per_page = get_user_meta(get_current_user_id(), 'jobs-per-page', true);
    }
    if (!isset($per_page) || !$per_page) {
       if (isset($_COOKIE['jobs-per-page'])) {$per_page = $_COOKIE['jobs-per-page'];}
       else {$per_page = 10;}
    }
    return do_shortcode('[jobs per_page="'.$per_page.'"]');
}

Then add an earlier action to check for a querystring value and set the user meta/cookie…

add_action('init', 'custom_set_jobs_per_page');
function custom_set_jobs_per_page() {
    if (isset($_REQUEST['jobs-per-page'])) {
        $per_page = absint($_REQUEST['jobs-per-page']);
        if ($per_page > 10) {
            if (is_user_logged_in()) {update_user_meta(get_current_user_id(), 'jobs-per-page', $per_page);}
            else {setcookie('jobs-per-page', $per_page, (time()+(7*24*60*60);}
        }
    }
}

With this in place you can add the javascript onchange function to your <select> input:

<script>function change_jobs_per_page() {
    el = document.getElementById('jobs-per-page-select');
    perpage = el.options[el.selectedIndex].value;
    href = window.location.href;
    if (href.indexOf('jobs-per-page=") > -1) {
        href = href.split("jobs-per-page=");
        window.location.href = href[0]+"jobs-per-page="+perpage;
    } else if (href.indexOf("?') > -1) {
        window.location.href = href+'&jobs-per-page="+perpage;
    } else {
        window.location.href = href+"?jobs-per-page="+perpage;
    }
}</script>
<select id="jobs-per-page-select' onchange="change_jobs_per_page();">

The advantage of this approach is that the new per page value is persistent until changed by the user (or the user cookie expires.)

Related Posts: