Populating a Drop Down Menu (select)

Question

I've been trying to solve my question based off of this answer: Populate select box from database using jQuery

I've attempted to implement what is said in the answers there but I am not having any luck here. As of now all that appears in the drop down menu is the default "Stone" item that starts in it.

Could anyone spare some time and give me a hand fixing my issue. My code should essentially read from a MySQL database which has over 150 ID's in order starting at 1 and use the corresponding name in the same ID's row to populate the drop down menu on load.

Example of what drop down menu would look like inside of it:

Stone
Grass
Diamond

What corresponding DB would look like:

ID           item_name
1            Stone
2            Grass
3            Diamond

The code I'm using to try and do this is:

PHP (process_item_list.php):

$con = mysql_connect($DB_HOST,$DB_USER,$DB_PASSWORD);
$dbs = mysql_select_db($DB_NAME, $con);

$tableName = "itemlist";
$result = mysql_query("SELECT * FROM $tableName");

$data = array();
while ( $row = mysql_fetch_row($result) )
{
    $data[] = $row;
}
echo json_encode( $data );    
?>

jQuery/Javascript

<script type="text/javascript">
$(function(){
      var items="";
      $.getJSON("process_item_lists.php",function(data){
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.id+"'>"+item.name+"</option>";
        });
        $("#tradeItems").html(items); 
      });
    });
</script>

HTML

<select id="tradeItems"> 
<option value="">Stone</option>
</select>

I'm open to different ways to do this as well, as long as it still fills the drop down menu on load!

Edit: With the help of wirey the PHP issue is fixed. Here is what the results look like from running the PHP file: http://fogest.net16.net/mctrade/php/process_item_list.php When I run the actual page using the alert boxes which should give me the ID and the item name they both return undefined rather then the correct values.

do a console.log(item), console.log(item.id), console.log(item.name) and see what comes up — wirey00, Jul 25 '12 at 20:57
Have you tried item.ID and item.item_name? It looks like the name is wrong. — Darren, Jul 25 '12 at 21:01
What do you receive from the Server? in your code after each add the following to see if you receive any data because your jquery is correct: alert(item.id + ' ' + item.name); — Frenchi In LA, Jul 25 '12 at 21:01
@wirey I'm getting nothing at all, though this did help me realize that I was at first getting a 404 on the php file as it was in the wrong location. — ComputerLocus, Jul 25 '12 at 21:01
@JohndaveDecano I'm pretty new to jQuery and Javascript, what exactly do you mean? — ComputerLocus, Jul 25 '12 at 21:03
If you column name is item_name and you are using name it wouldn't populate the text view and it might throw an object does not exists error. — Darren, Jul 25 '12 at 21:07
Check on the server side to see format your data is in and what's in there... then make sure it is getting sent to the client side as a json object.. — wirey00, Jul 25 '12 at 21:12
@wirey I honestly don't know how. I'm very new to using javascript and php I still don't know very well. — ComputerLocus, Jul 25 '12 at 21:16
go into your url.. remove the last part and put this there `process_item_lists.php`.. You should see the data response and if you don't it's something on your server side which is in PHP and which I know nothing about. — wirey00, Jul 25 '12 at 21:20
@wirey Yeah it's telling me Access denied, even though I am connecting the same way I did for another project I did just this time it's a different database and table. — ComputerLocus, Jul 25 '12 at 21:33
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/14428/discussion-between-fogest-and-wirey) — ComputerLocus, Jul 25 '12 at 21:37
@Darren Fixed some things, check the edit to see the output. — ComputerLocus, Jul 25 '12 at 21:48

Christoffer · Accepted Answer · 2012-07-25T22:11:44.443

1

The results at http://fogest.net16.net/mctrade/php/process_item_list.php doesn't look like what you're expecting, it looks like this:

[ ["1","Stone","images\/stone.png"],
  ["2","Grass Block","images\/grass_block.png"],
  /* snip a lot of rows */
]

But what you are expecting is something like this:

[ { "id":"1", "name":"Stone", "image?":"images\/stone.png"},
  { "id":"2", "name":"Grass Block","image?":"images\/grass_block.png"},
  /* and so on */
]

I think that you'll want to use mysql_fetch_assoc() instead of mysql_fetch_row(), that might give you proper output.

Bonus: you can give the response a proper content-type by adding a row before the echo:

header("Content-type: application/json");
echo json_encode($data);

Remark: when I inspected the source of http://fogest.net16.net/mctrade/php/process_item_list.php I found this at the end:

<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

This should not be part of the response, it will probably make the JSON parser crash.

edited Jul 25 '12 at 22:11

answered Jul 25 '12 at 22:05

Christoffer

2,125
15
21

You check check that page again it appears to be giving more of what I want, but still returning undefined. – ComputerLocus Jul 25 '12 at 22:11
Alright, now it looks better. However you need to change your javascript to refer to `data.ID` instead of `data.id`, and `data.item_name` instead of `item.name`. – Christoffer Jul 25 '12 at 22:13
I changed the variables to item.ID and item.item_name and I am now getting the first variable being right but the item.item_name is still undefined, – ComputerLocus Jul 25 '12 at 22:13
And check the remark I added above, about the Hosting24 Analytics Code, I think it needs to be removed. – Christoffer Jul 25 '12 at 22:13
It cannot be removed. It's added by the webhost. – ComputerLocus Jul 25 '12 at 22:14
I think that might be a problem, since `$.getJSON()` will be trying to interpret the response as JSON, and that last part is HTML. You might need to do some manual work to get rid of that part. Like use `$.get()` or `$.post()` instead of `$.getJSON()`, try to remove the HTML part from the response and then use `JSON.parse()` to convert the result into the javascript representation. – Christoffer Jul 25 '12 at 22:21
Don't want to bother you if your busy but is it possible to explain this further in the edits and provide some code to fix this ? – ComputerLocus Jul 25 '12 at 23:50
Your problem is the script code, its invalid JSON. Just get a really cheap host versus a host putting this stuff on your page. – Darren Jul 26 '12 at 00:01
@Darren Okay I will be moving to a paid host hopefully soon. your saying as long as that script is gone this will work fine? – ComputerLocus Jul 26 '12 at 00:52
@Fogest I actually went to bed straight after my last answer, thats why I didnt respond. Well I think removing that script will solve the problem. In the meantime, before you get a paid host, you could set up a test-environment at home. Get http://www.wampserver.com/en/ if you are using Windows, it should be pretty easy to set up. Good luck! – Christoffer Jul 26 '12 at 06:20
@Fogest It will be valid JSON after it is gone. – Darren Jul 26 '12 at 16:45

Populating a Drop Down Menu (select)

1 Answers1