Auto Populate Select field not working

mike12255 · October 3, 2011

Im unsure why ive been reading lots and watching videos on youtube but still cannot figure out why I cant get this jquery script to work. I was people to be able to select a list of Programs (law psychology sociology ect ect..) and then read the database for the courses under that program (eg. 1001 LAWS - Intro To Law) and update the second select field with those options below is the code I have,:

ajax.php:

<?php
include("include/session.php");
if (@$_REQUEST['ajax']) {
    // connect to local database 'test' on localhost
        $results = mysql_query('select * from courses where pid="' . $_REQUEST['category']. '"');
        
        $json = array();
        
        while (is_resource($results) && $row = mysql_fetch_object($results)) {
            //$json[] = '{"id" : "' . $row->id . '", "label" : "' . $row->label . '"}';
            $json[] = '"' . $row->label . '"';
        }
        
        echo '[' . implode(',', $json) . ']';
        die(); // filthy exit, but does fine for our example.
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Select Chain</title>

    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/select-chain.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    <!--
    $(function () {
        var cat = $('#categorySelect');
        var el = $('#elementSelect');
        var attr = $('#attributeSelect');
        
        el.selectChain({
            target: attr,
            url: 'ajax.php',
            data: { ajax: true, anotherval: "anotherAction" }            
        });        

        // note that we're assigning in reverse order
        // to allow the chaining change trigger to work
        cat.selectChain({
            target: el,
            url: 'ajax.php',
            data: { ajax: true }
        }).trigger('change');

    });
    //-->
    </script>
  </head>
  
    <div id="doc">
        <h1>Select Chain</h1>
        
        
        <div class="selHolder">
            <h2>Element Category</h2>
            <select id="categorySelect" name="category">
           	<?php
           	
           		$query = "SELECT * FROM catagories ORDER BY name ASC";
           		$res = mysql_query ( $query ) or die ( mysql_error () );
			while ( $row = mysql_fetch_array ( $res ) ) {
								?>
            <option value="<?=$row ['id']?>"><?=$row ['name']?></option> 
	<?
							}	
           ?>
           
            </select>
        </div>
        
        
        <div class="selHolder">
            <h2>Element</h2>
            <select id="elementSelect" name="category" >
                <option>[none selected]</option>
            </select>
        </div>
       

  </body>
</html>

select-chain.js:

(function ($) {
    $.fn.selectChain = function (options) {
        var defaults = {
            key: "id",
            value: "label"
        };
        
        var settings = $.extend({}, defaults, options);
        
        if (!(settings.target instanceof $)) settings.target = $(settings.target);
        
        return this.each(function () {
            var $$ = $(this);
            
            $$.change(function () {
                var data = null;
                if (typeof settings.data == 'string') {
                    data = settings.data + '&' + this.name + '=' + $$.val();
                } else if (typeof settings.data == 'object') {
                    data = settings.data;
                    data[this.name] = $$.val();
                }
                
                settings.target.empty();
                
                $.ajax({
                    url: settings.url,
                    data: data,
                    type: (settings.type || 'get'),
                    dataType: 'json',
                    success: function (j) {
                        var options = [], i = 0, o = null;
                        
                        for (i = 0; i < j.length; i++) {
                            // required to get around IE bug (http://support.microsoft.com/?scid=kb%3Ben-us%3B276228)
                            o = document.createElement("OPTION");
                            o.value = typeof j[i] == 'object' ? j[i][settings.key] : j[i];
                            o.text = typeof j[i] == 'object' ? j[i][settings.value] : j[i];
                            settings.target.get(0).options[i] = o;
                        }

		// hand control back to browser for a moment
		setTimeout(function () {
		    settings.target
                                .find('option:first')
                                .attr('selected', 'selected')
                                .parent('select')
                                .trigger('change');
		}, 0);
                    },
                    error: function (xhr, desc, er) {
                        // add whatever debug you want here.
		alert("an error occurred");
                    }
                });
            });
        });
    };
})(jQuery);

Sign In

Auto Populate Select field not working

Recommended Posts

mike12255

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information