Populating a ComboBox with MySQL data [Archive]

View Full Version : Populating a ComboBox with MySQL data

ray73864

27 May 2007, 9:28 PM

How do i go about populating a combobox using data from a MySQL database? the code i have doesn't seem to work for some reason.

PHP Code:

<?php
$link = mysql_pconnect("localhost", "<someuser>", "<somepass>") or die("Could not connect");
mysql_select_db("chaplain") or die("Could not select database");
if (isset($_REQUEST['type'])) {
$sql = "SELECT ID, Name FROM reason WHERE Type = " . $_REQUEST['type'];
}

$arr = array();
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}
Echo 'reasons:'.json_encode($arr).'';

?>

Dynamic Form:

/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/ext/resources/images/s.gif';
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var ReasonDS = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'searchReasons.php?type=formal'}),
reader : new Ext.data.JsonReader({root : 'reasons'},['ID','Name']),
remoteSort : false
});
var AddFormal = new Ext.form.Form({
labelAlign : 'right',
labelWidth : 175
});
AddFormal.fieldset(
{legend : 'Add Formal Record'},
new Ext.form.TextField({
fieldLabel : 'First Name',
allowBlank : false,
name : 'FirstName',
id : 'FirstName',
width : 175
}),
new Ext.form.TextField ({
fieldLabel : 'Last Name',
allowBlank : false,
name : 'LastName',
id : 'LastName',
width : 175
}),
new Ext.form.NumberField({
fieldLabel : 'Record ID',
allowBlank : true,
name : 'StudentID',
id : 'StudentID',
width : 175
}),
new Ext.form.ComboBox({
store : ReasonDS,
displayField : 'Name',
emptyText : 'Choose a reason...',
fieldLabel : 'Reason',
allowBlank : false,
name : 'Reason',
id : 'Reason',
width : 175
}),
new Ext.form.NumberField({
fieldLabel : 'Term',
allowBlank : false,
name : 'Term',
id : 'Term',
width : 175
}),
new Ext.form.DateField({
fieldLabel : 'Date Seen',
allowBlank : false,
name : 'Date',
id : 'Date',
format : 'Y/m/d',
value : '2007/05/25',
width : 175
}),
new Ext.form.TextField({
fieldLabel : 'Time Seen',
allowBlank : false,
name : 'Time',
id : 'Time',
width : 175
}),
new Ext.form.TextArea({
fieldLabel : 'Comments',
allowBlank : true,
name : 'Comments',
id : 'Comments',
width : 500
})
);
AddFormal.addButton({
text : 'Find Student',
handler : function() {
AddFormal.submit({
url : 'searchFormal.php',
waitMsg : 'Searching for student record...'
});
}
});
AddFormal.addButton({
text : 'Create Formal Record',
handler : function() {
AddFormal.submit({
url : 'addFormal.php',
waitMsg : 'Creating formal record for student...'
});
}
});

AddFormal.render('addFormal');
});

HTML File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Capel Primary School - Chaplaincy Recording</title>
<link href="styles/intranet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ytheme-gray.css" />

<script type="text/javascript" src="js/addFormal.js"></script>
</head>
<body>
<div id="addFormal" style="background-color: LightBlue; border: 2px solid Blue; padding: 0.5em; width: 95%"></div>
</body>
</html>

liggett78

27 May 2007, 11:52 PM

Is the data being returned from the server, is it in proper format? You can investigate it with Firebug.

ray73864

28 May 2007, 12:10 AM

Is the data being returned from the server, is it in proper format? You can investigate it with Firebug.

umm ok, how do i use Firebug to diagnose this problem?? the Sticky post in the forums didn't enlighten me much on how to use it (after watching the video it made me want to go back to the good ol' ways of doing it with message boxes and other things echo'ed to the screen)

Animal

28 May 2007, 12:15 AM

Umm, it's not rocket science

Go to the "Net" tab, take a look at the requests. Click things, experiment. That's how the rest of us learned.

ray73864

28 May 2007, 7:29 PM

ok, i have debugged it with Firebug, and after realising that i didn't enclose my string properly in MySQL, i have managed to get a response from the PHP page which contains the following:

reasons:[{"ID":"5","Name":"Family Relationships"},{"ID":"6","Name":"Peer Relationships"},{"ID":"7","Name":"Developmental Issues"},{"ID":"8","Name":"Spirituality & Religion"},{"ID":"9","Name":"Bullying & Harrassment"},{"ID":"10","Name":"Self concept & Image"},{"ID":"11","Name":"Sex & Sexuality"},{"ID":"12","Name":"Abuse"},{"ID":"13","Name":"Neglect"},{"ID":"14","Name":"Self harm & Suicide"},{"ID":"15","Name":"Alcohol \/ Drug Use"},{"ID":"16","Name":"Violence"},{"ID":"17","Name":"Mental Health"},{"ID":"18","Name":"Grief & Loss"},{"ID":"19","Name":"Loneliness"},{"ID":"20","Name":"Behaviour management"},{"ID":"21","Name":"Legal issues"},{"ID":"22","Name":"Academic issues"},{"ID":"23","Name":"School authority"},{"ID":"24","Name":"Leaving home"},{"ID":"25","Name":"General Catch-up"}]

However, when i click on the ComboBox, it opens then closes, and for that brief moment that it opens there is nothing in the list.

jsakalos

28 May 2007, 7:37 PM

Is the json enclosed in {}? Like this:

{"records":[{...},{...}]}

Are there any extra spaces in json? Any Firebug errors?

jsakalos

28 May 2007, 7:41 PM

Aaah,

now I see it. Your php:

Echo 'reasons:'.json_encode(...); // this cannot work

echo json_encode(....); // this could work

Hi,

ray73864

28 May 2007, 8:00 PM

That worked, thanks for that.

Am i not allowed to have a 'root' when getting stuff from php? since i was under the impression from reading the documentation that you needed to have the 'root' open for JsonReader.

jsakalos

28 May 2007, 8:04 PM

You can have root but like this:

{"records":[...],"success":true,"anything":value}

and then you setup reader to have root:"records"

Hi,