SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chained Select Boxes HELP !!!

    Hello fellow sitepointers,

    I have a problem that hopefully someone on this forum can help me with.

    I am currently re coding my tutorial website, and i am working on the admin panel to make it easier to use. Now on my site at the moment i have multiple categorys that the tutorial can be put into here is a link to my site so you can see what i meen :

    http://www.tutorial-zone.co.uk/

    On the left hand side you will see my main categorys and under them is the second category list, now for example if you click on "Adobe Photoshop" you will be taken to another page, and at the top of the screen you will see all the sub categorys appear.

    Now this is where i am having a problem in the admin panel. What i want to do is have 3 select boxes on my form, the first one will be the main category for example "2d Graphics", once this is clicked i want the second box to update to show all the second categorys like "Photoshop" once this is selected i want the third box to populate with all the sub categorys like "animation, designs, photo effects".

    Now the first box is no problem at all, i already have that populated, but i need to know how to populate the other boxes depending on what is selected, here is the code for my first box :

    PHP Code:

    Code:
    <select name="parent" class="Field" id="parent">
    
        <option selected >Select ...</option>
    
            <?php
    
                  
    
            $categories = mysql_query ("SELECT * FROM main_categorys WHERE active = '1'")
    
            or die ("Failed.".mysql_error());
    
                  
    
            while($a_row = mysql_fetch_array($categories)){
    
            ?>
    
        <option value="<?php echo ''.$a_row['id'].''; ?>">
    
            <?php echo "".$a_row['name']."" ?></option>
    
            <?php } ?>
    
      </select>
    The other two tables in my database use the same values like "id & name", i have tryed a few tutorial i have found on the internet that use jquery and ajax, but they would not work with dynamic content.

    Can someone please please help me on this one.

    Regards
    Chris
    Want quality photoshop tutorials : Tutorial Zone

  2. #2
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first select list can be populated dynamically using PHP, or ASP, or some other server-side language, just like you are doing.

    Now, the following select lists that depend on this one are just skeletons; leave them empty, like so:
    Code:
    <select id="[id here]" name="name_here" onchange="[function_call_here]"></select>
    When someone changes their selection on the main select list, it triggers a function call (onchange). That function then needs to run AJAX / Remote Scripting to create JavaScript that populates the next dropdown.

    Use this principle for all dependent select lists. For this to work you will need to eval() the JavaScript returned by your AJAX functionality.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi miggl,

    I see, do you have any ajax coe i could use to do this, i will be using php for the dynamic content, which i have already wrote, i just need the ajax and i will be using 3 boxes, dont suppose you can help me with this ?

    Thanks for the reply though much appreciated
    Want quality photoshop tutorials : Tutorial Zone

  4. #4
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. Let me see if I can come up with something later this evening. I'm still at work, and to show you a working example would take about 30 minutes to put together.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Miggl if you could do that for me it would be soooo great, im just really stuck on this one and its important part of my site is just making it that little extra annoying.

    Cant wait to try this code out

    thanks in advance
    Want quality photoshop tutorials : Tutorial Zone

  6. #6
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not getting back to you earlier. Try the following steps:

    1. Create test.html and paste the following code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test Page</title>
        <script type="text/javascript" src="mgb_ajax.js"></script>
    	<script type="text/javascript">
    		var o_ajax = new AJAX("GET", process_ajax, "get_second_info.html");
    		
    		function load_second()
    		{
    			o_ajax.execute();
    		}
    
    		function load_third()
    		{
    			o_ajax.set_url("get_third_info.html");
    			o_ajax.execute();
    		}
    
    		function process_ajax()
    		{
    			eval(o_ajax.get_result());
    		}
    	</script>
    </head>
    <body>
    	<select onchange="load_second();">
    		<option>test 1</option>
    		<option>test 2</option>
    	</select>
    	<select id="second" onchange="load_third();"></select>
    	<select id="third"></select>
    </body>
    </html>
    2. Create mgb_ajax.js and paste in the following code:
    Code:
    function AJAX(_s_method, _o_callback, _s_url)
    {
    	var _o_http = get_xmlhttprequest();
    	var _result	= null;
    
    	this.execute		= execute;
    	this.set_method		= set_method;
    	this.set_callback	= set_callback;
    	this.set_url		= set_url;
    	this.get_result		= get_result;
    
    	function execute(o_input)
    	{
    		var s_key_value_pairs	= "";
    		var s_temp				= "";
    		var o_form				= null;
    
    		if (typeof(o_input) == "string") {s_key_value_pairs = o_input;}
    		else if ((typeof(o_input) == "object") && (_s_method == "POST"))
    		{
    			o_form = o_input;
    			for (var i=0; i<o_form.length; i++)
    			{
    				s_temp = "";
    				if ((o_form.elements[i].name.trim().length > 0) && (o_form.elements[i].disabled == false) && (o_form.elements[i].style.display != "none"))
    				{
    					switch(o_form.elements[i].type)
    					{
    						case "select":
    						case "select-one":
    							if (o_form.elements[i].selectedIndex > -1)
    							{
    								if (o_form.elements[i].options[o_form.elements[i].selectedIndex].value.trim().length > 0)
    								{
    									if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
    									s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].options[o_form.elements[i].selectedIndex].value);
    								}
    							}
    							break;
    						case "select-multiple":
    							for (var j=0; j<o_form.elements[i].options.length; j++)
    							{
    								if (s_temp.length > 0) {s_temp += "&";}
    								if (o_form.elements[i].options[j].selected) {s_temp += o_form.elements[i].name + "=" + escape(o_form.elements[i].options[j].value);}
    							}
    							if (s_temp.trim().length > 0)
    							{
    								if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
    								s_key_value_pairs += s_temp;
    							}
    							break;
    						case "checkbox":
    								if (o_form.elements[i].checked)
    								{
    									if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
    									s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
    								}
    							break;
    						case "radio":
    								if (o_form.elements[i].checked)
    								{
    									if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
    									s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
    								}
    							break;
    						default:
    							if (o_form.elements[i].value.trim().length > 0)
    							{
    								if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
    								s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
    							}
    							break;
    					}
    				}
    			}
    		}
    		_o_http.open(_s_method, _s_url, true);
    		_o_http.onreadystatechange = process;
    		if (_s_method == "POST") {_o_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");}
    		else {_o_http.setRequestHeader("Content-type", "");}
    		_o_http.send(s_key_value_pairs);
    	}
    	
    	function set_method(s_method)
    	{
    		if ((s_method == "GET") || (s_method == "POST")) {_s_method = s_method;}
    		else {alert("AJAX error: Please use GET or POST method.");}
    	}
    	
    	function set_callback(o_function)
    	{
    		_o_callback = o_function;
    	}
    	
    	function set_url(s_url)
    	{
    		//add regex url-checking here?
    		_s_url = s_url;
    	}
    	
    	function process()
    	{
    		if (_o_http.readyState == 4)
    		{
    			if ((_o_http.status == 200) || (_o_http.status == 0))
    			{
    				if (_o_callback) {_o_callback(get_result());}
    			}
    			else
    			{
    				//error handling here
    				alert("Error: " + _o_http.statusText);
    			}
    		}
    	}
    
    	function get_xmlhttprequest()
    	{
    		var request = false;
    		
    		try
    		{
    			request = new XMLHttpRequest();
    		}
    		catch(err1)
    		{
    			try
    			{
    				request = new ActiveXObject("Msxml2.XMLHTTP");
    			}
    			catch(err2)
    			{
    				try
    				{
    					request = new ActiveXObject("Microsoft.XMLHTTP");
    				}
    				catch(err3)
    				{
    					alert("Can't create object.");
    					request = false;
    				}
    			}
    		}
    
    		return request;
    	}
    	
    	function get_result()
    	{
    		if (_o_http.responseText.length > 0) {return _o_http.responseText;}
    		else {return _o_http.responseXML;}
    	}
    }
    3. Create get_second_info.html and paste the following code:
    Code:
    			o_select = document.getElementById("second");
    			o_select.options[o_select.length] = new Option("display1", "value1", false, false);
    			o_select.options[o_select.length] = new Option("display2", "value2", false, false);
    4. Create get_third_info.html and paste the following code:
    Code:
    			o_select = document.getElementById("third");
    			o_select.options[o_select.length] = new Option("display111", "value111", false, false);
    			o_select.options[o_select.length] = new Option("display222", "value222", false, false);
    5. Now load test.html in your browser and watch AJAX (actually AJAJ) at work .

    Note that you can use any type of dynamic file to create your get_xxxxx.xxx pages. For instance, I would use PHP to get records from a database, and then iterate through the results to create the JavaScript in the page. My version is merely simplified to illustrate the basic principle.

    Also, to simplify usage of AJAX I have create my own AJAX class, which is defined in mgb_ajax.js. This provides me with all the tools I need to perform ajax, and that way I don't have to rewrite AJAX functionality everytime I want to use it.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •