Jquery how can I populate a list from a PHP loop that writes HTML options from a db?

JavaScript
1

The following PHP code populates a dropdown list of Projects. I would like to be able to click on a Project Name in the list and have its corresponding list of Characters appear beside it. How can I tie jquery into this as it’s running? All the jquery examples I see are for hard coded HTML data instead of a PHP loop grabbing from a database.

//creates the Project dropdown list
while ($proj = mysql_fetch_array($project)){
  $id_proj = $proj['projid'];
  $name_proj = htmlspecialchars($proj['projectName']);
  echo "<option name='$id_proj' value='$id_proj'>$name_proj</option>\
";
}	

//creates the Characters list
while ($character = mysql_fetch_array($characters)){
 $id_char = $character['id'];
 $name_char = htmlspecialchars($character['charactersName']);
 echo "<div>$name_char</div>";		
}

I don’t care if it’s a clickable list of anchors instead of a dropdown. Also, I don’t care whether people have javascript enabled as this is for my personal use.

Thanks
Charles

2

That’s due to PHP running on the server, and JavaScript running on the client.
The PHP code is completely executed and the page is sent to the client. The client then loads up the page at which point JavaScript can be run,

The two cannot not intermix.

That being said, what can we help you with?

3

I understand that’s the problem. Is there a way to accomplish this? Have a clickable list on one side (doesn’t have to be a dropdown) that populates a list on the other side? Problem is the data is in a database for both lists.

4

One way is by using the .post() method, where you request the data from a PHP script and once it arrives, update part of the page.

5

Yes, but Post requires a Submit button and I was trying to be fancy and avoid that. I might just go that way anyway.

6

For anyone else trying to do this, found it! Scroll down to:

Allow different bits of HTML to dynamically execute according to which dropdown menu is selected

Send, pass, get variables with PHP, Form, HTML & JavaScript code

7

Well almost, here’s their code:


<script type="text/javascript">
   function SetHTML2(type) {
   document.getElementById("a2").style.display = "none"
   document.getElementById("b2").style.display = "none"
   document.getElementById("c2").style.display = "none"
   // Using style.display="block" instead of style.display="" leaves a carriage return
  document.getElementById(type).style.display = ""
}
</script>

<select onchange="SetHTML2(this.value)">
   <option value="a2">Select 1st</option>
   <option value="b2">Select 2nd</option>
   <option value="c2">Select 3rd</option>
</select>

<span id="a2" style="display:none">Anything can go here</span>
<span id="b2" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"></span>
<span id="c2" style="display:none">...<a href="http://www.skytopia.com">or a link</a>...</span>

Now I just need to loop through the data in my database with a PHP query put it in a PHP array, pass it to a JS array and then use a PHP query to loop through and write the <span> section.

Thanks to this code for passing a PHP array to a JS array from Convert PHP array to Javascript array » Blog Archive » Amoeba Solution Kiosk.



<?php
$arr = array("a","b","c");
?>
<script>
var jsArray = ["<?php echo join("\\", \\"", $arr); ?>"];
alert(jsArray);
</script>