Chained selects for ExpressionEngine

Intro

This tutorial is based on the instruction provided for the Simple chained combobox plugin for jQuery by Ziadin Givan.

While merging it with ExpressionEngine we also learn about the weblog:categories tag, PHP in your templates and the Input Class. I don’t go into a lot of detail as to exactly what everything does but if you have any particular questions use the comments below.

Demo

Header

In our header we dynamically link to the latest version of jQuery. This is optional, you can always upload a version to your own server.
Download both the ChainedSelects plugin and the SelectBoxes plugin and upload both to your server.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
        google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="/inc/jquery.chainedSelects.js"></script>
<script type="text/javascript" src="/inc/jquery.selectboxes.min.js" charset="utf-8"></script> 

The following script in your header does the necessary hiding and targeting for you.
The URL reference to blog/combobox/ is a template you will have to create wherever you want. Blog being a template group and combobox is a template. Leave it blank for now but turn PHP on for it and set the parsing to input.

<script type="text/javascript">
$(function()
{
    $('#blogcategory').chainSelect('#entrydrop','/blog/combobox/',
    { 
        before:function (target) 
        { 
            $("#loading").css("display","block");
            $(target).css("display","none");    
        },
        after:function (target) 
        { 
            $("#loading").css("display","none");
            $(target).css("display","inline");
             $(".jumpmenu").change(function() {
                var val = $(this).selectedValues();
                if (val != '') {
                    location.href=val;
                }
            });
                if ($(target).val() == null)
                        {
                    $(target).css("display","none");
                    }
        }
    });
});
</script> 

HTML Code

Here we add our form with our first select box options dynamically filled by the categories tag

<div id="categorypicker">
        <form name="formname" method="post" action="">

            <select id="blogcategory" name="blogcategory">
                <option value="">Select a Category</option>
                {exp:weblog:categories weblog="blog" show_empty="no" style="linear"}
                <option value="{category_id}">{category_name}</option>
                {/exp:weblog:categories}
            </select>

            <select name="entrydrop" id="entrydrop" style="display:none;" class="jumpmenu" ></select>
        </form>
        <div id="loading"></div>
    </div> 

Server side Code

Now in that template we created earlier on (blog/combobox) we are gonna dump the following. The original tutorial used a json_encode but ExpressionEngine has trouble with that so we use a custom function to grab an array in the correct format and throw it back at the select box.

<?php
$array = array();
global $DB, $IN;
$cat_id =  $IN->GBL('_value');

    $query = $DB->query("SELECT title, url_title  FROM exp_category_posts INNER JOIN exp_weblog_data USING(entry_id) INNER JOIN exp_weblog_titles USING(entry_id) WHERE cat_id = '".$cat_id."' AND status ='open'"); 
         
            $array[] = array(null => 'Choose an article');
            foreach($query->result as $row)
        {
            $entry_title = ($row['title']); 
            $entry_url_title = ($row['url_title']);
            $custom_url = '/blog/'.$entry_url_title;
            $array[] = array($custom_url => $entry_title);
        
        }

function php2js($a)
    {
        if (is_null($a)) return 'null';
        if ($a === false) return 'false';
        if ($a === true) return 'true';
        if (is_scalar($a)) {
            $a = addslashes($a);
            $a = str_replace("\n", '\n', $a);
            $a = str_replace("\r", '\r', $a);
            $a = preg_replace('{(</)(script)}i', "$1'+'$2", $a);
            return "'$a'";
        }
        $isList = true;
        for ($i=0, reset($a); $i<count($a); $i++, next($a))
            if (key($a) !== $i) { $isList = false; break; }
        $result = array();
        if ($isList) {
            foreach ($a as $v) $result[] = php2js($v);
            return '[ ' . join(', ', $result) . ' ]';
        } else {
            foreach ($a as $k=>$v)
                $result[] = php2js($k) . ': ' . php2js($v);
            return '{ ' . join(', ', $result) . ' }';
        }
    }
echo php2js( $array );


?> 

Chained selects for ExpressionEngine

Intro

Demo

Header

HTML Code

Server side Code

12 Comments

Steven says:

Dave says:

ivan says:

Gaston says:

Editor says:

mevyinecymn says:

jeremymichaelskktddvbgfr says:

Fluokylek says:

Agommasonnofe says:

ambubapsadvaf says:

tesFoesssmirm says:

Links of London says:

Shortlink for this

Related Entries

By Category