[RESOLVED] dynamic select php

@dudhiJun 18.2008

I need to make a dynamic dropdown ( select box) that grabs some categories I am storing in the database. The problem is once the user selects the category I need to run a query that selects all the sub categories underneath that category and keeps on populating till there is no more sub-sub categories to show up.

If anyone can point me in the right direction.

to post a comment

PHP

8 Comments(s) _↴

@SyCoJun 18.2008 — #If you're good with javascript then ajax is the way to go. If you're OK with PHP but not so good with javascript, xajax is the way to go.

http://xajaxproject.org has a 10 minute tutorial that should get you started. It's a lot easier that you might first think.

The first drop down would have an onchange event which passes the value to an xajax function. The xajax function looks up the info for the next select and displays it.

You can achieve all this in javascript too but you'd need to send all the info to the browser up front. Ajax allow just the required info to be sent.

Rather than use selects it would be a nicer interface if you used a collapsing folder tree structure.

Here's a jquery tree with PHP integration

http://abeautifulsite.net/notebook.php?article=58

Theres others out there too.

@dudhiauthorJun 19.2008 — #Thank you!!!! I won't be able to use the collapsing folder structure for this project even though that looks awesome, But I am sure I will get to use soon in something else. I have been good enough to use just the basic javascript so far but more and more programming I do, more projects with ajax keep coming up.

@SyCoJun 19.2008 — #You're welcome! The only tricky part of using xajax is setting the page up to include trhe files after that it's really quite easy and handles all the tough javascript stuff, all you really need is javascript events like onclick, onload etc. There's a forum at http://xajaxproject.org which appears pretty slow but there are 3 or 4 core users (q-no, BBC, Ed, Jared) that are in there all the time and really know their stuff. I can help up to a point with xajax but even though I've been using it for over a year I only need it to call my PHP functions ajaxically (hey a new word!). But it has been great and easy.

@DoppleJun 19.2008 — #I would definately say use ajax. I had to do something similar for my degree and used ajax for this. I would recommend breaking down w3schools' suggest example and working tweaking it for your use. If you're still stuck PM me and I'll send you my source code.

@dudhiauthorJun 22.2008 — #HERE IS WHAT I DID:

I tried axjax but I was using zencart and can't have spaces in the axjax in the header and if I would have taken out all the space would have taken me forever in the zencart files. I am open to any suggestion to make this better, but its just a modified version from w3schools.

------------------------------------------------------------------
IN your main file put call the javscript showUser function on change in the select box

then save the following code as test.php and change that in the javascript file.

<?php

$q=(int)$_GET["q"];

// make a connection to the database here

//

//$sql="select c.categories_id, c.parent_id, p.categories_name from categories c JOIN

// categories_description p ON (c.categories_id = p.categories_id) WHERE c.parent_id =

// any(select c.categories_id from categories_description c where c.categories_name = ".(int)$_GET['cid'] . ")";

$sql="select c.categories_id, c.parent_id, p.categories_name from categories c

INNER JOIN categories_description p ON (c.categories_id = p.categories_id)

WHERE c.parent_id = ".(int)$_GET['cid'];

$result = mysql_query($sql);

if ($result)

{

echo "<div id = 'dropdownMenu{$q}sub'>";

echo "<select name='sub-$q' onchange='showUser(this.value,$q)'><option value=''>Please Select Category</option>";

while($row = mysql_fetch_array($result))

{

 echo "<option value={$row['categories_id']}>". $row['categories_name'] . "</option>";
 
  }

} else {

echo mysql_error($con);

}

echo "</select>";

echo '<div id ="dropdownCat'.($q+1).'"sub">';

?>

<b>Customer info will be listed here.</b>

</div>

<?php

mysql_close($con);

?>
---------------------------------------------------------------------

Javascript

var xmlHttp

var id_cnt = 0;

function showUser(cat_id,id)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="test.php"

id_cnt = id+1;

url=url+"?q="+(id+1) + "&cid=" + cat_id

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged(id)

{

//	console.log(xmlHttp);
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  {
   document.getElementById("dropdownCat" + id_cnt).innerHTML = xmlHttp.responseText;
 
  }

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

//Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

@rootJun 22.2008 — #Why not write the page so that is submits to itself when the on change happens and have the 2nd query run and populate a second drop down field and then display the page again with all its current selections, this would require some scripting to do this but it means that your only using PHP and a database and not relying on several technologies on server and client side.

I can see where the guys are coming from when they say use AJAX but this can have some working problems as you seem to be finding out.

@dudhiauthorJun 22.2008 — #Thanks for suggestion. I did think about it, but I wanted to use ajax(learn something new) and an assumption that going with that approach will take longer to run on the page instead of using AJAX(as its reloading the page again once someone clicks on the drop down, I may be wrong with that though but thats what I have noticed)

Also, it may be misleading in my previous post. I was able to fix this issue with ajax, Before that I tried using axjax but, after I installed axjax and fixed all the bugs I noticed I couldn't output a space or anything before I called axjax on the page itself. Now thats a no-go since it was a zen cart project and that uses multiple files before even loading the page itself.

So finally tried ajax and used this script. Thanks to all guys who helped me at work and at webdeveloper to learn something new. I am surprised there is not a forum for ajax itself though at WD.

@DoppleJun 23.2008 — #Generally the Javascript forum is where you should post your AJAX questions, although, if you have an issue, it could easilly be PHP or XML that is the cause of the problem.

Also in #PHP _↴

list box -- PHP inside a variable have multiple variables from database embedding vb in php

Success!

Help @dudhi spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] dynamic select php

8 Comments(s) _↴

?>
---------------------------------------------------------------------

Also in #PHP _↴

Success!

Social

Version

[RESOLVED] dynamic select php

8 Comments(s) ↴

?> ---------------------------------------------------------------------

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

?>
---------------------------------------------------------------------

Also in #PHP _↴