Listbox Fills Empty Record From DB - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript listbox data, jQuery ListBox, jqxListBox, jvascript listbox, listbox data source

This topic contains 3 replies, has 2 voices, and was last updated by ivailo 8 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Listbox Fills Empty Record From DB Posts
February 19, 2016 at 8:10 am Listbox Fills Empty Record From DB #81587

Batsebah
Participant

Hi Helper

I have been trying to populate data from Sql Server db to jqxlistbox using your sample code, have modified the code to run in SQL server, data is successfully populated in the browsers development tools but it returns nothing on listbox widgets..appreaciate for any help.

connect.php /* Connection is fine

$data = array();
$db_connection = new PDO(“sqlsrv:Server=$db_server;Database=$db_name”, $db_username, $db_password);

$query = “SELECT * FROM customers where name like ‘%res%'”;
$stmt = $db_connection->prepare($query);
$stmt->execute();

while ($rows = $stmt->fetch()){

$data[] = array(

‘Name’ => $rows[‘Name’],
‘Email’ => $rows[‘Email’],
‘Mobile’ => $rows[‘Mobile’]
);
}

echo json_encode($data);

?>

<!DOCTYPE html>
<html>
<title>ListBox</title>

<link rel=”stylesheet” href=”/widgets/listbox/jqx.base.css” type=”text/css”>
<link rel=”stylesheet” href=”/widgets/listbox/jqx.classic.css” type=”text/css”>

<script type=”text/javascript” src=”/widgets/listbox/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”/widgets/listbox/jqxcore.js”></script>
<script type=”text/javascript” src=”/widgets/listbox/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/widgets/listbox/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/widgets/listbox/jqxdata.js”></script>
<script type=”text/javascript” src=”/widgets/listbox/jqxlistbox.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data

var source =
{
datatype: ‘json’,
datafields: [
{ Name: ‘Name’ },
{ Name: ‘Email’ },
{ Name: ‘Mobile’ },

],

url: ‘data.php’
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxlistbox”).jqxListBox(
{
source: dataAdapter,
theme: ‘classic’,
width: 1200,
height: 550,
displayMember: ‘Name’,
valueMember: ‘Email’
});

//dataAdapter.dataBind();
});
</script>

<body>
<div id=”jqxlistbox”></div>

</body>
</html>

Results:
JqxListbox is appearing with vertical scrollbar but no data
Data is fine and populated in the browser Developer Tools

February 19, 2016 at 9:14 am Listbox Fills Empty Record From DB #81592
ivailo
Participant
Hi Batsebah,

JavaScript is case sensitive, so please change
```
datafields: [
  { name: 'Name' },
  { name: 'Email' },
  { name: 'Mobile' },
],
```
instead
```
datafields: [
  { Name: 'Name' },
  { Name: 'Email' },
  { Name: 'Mobile' },
],
```
Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com
February 19, 2016 at 9:48 pm Listbox Fills Empty Record From DB #81629

Batsebah
Participant

Hi Ivailo

Still nothing happens, it shows only listbox with scrollbar and highlighted bar upon moving the cursor inside the listbox. Appreciate your help.

February 22, 2016 at 1:05 pm Listbox Fills Empty Record From DB #81683

ivailo
Participant

Hi Batsebah,

Here is a demo with your code and local data.
Please update to the latest version(4.0.0).
If this doesn’t help check your console about errors.
The problem may be related to the json, returned from your server script. Sometimes json_encode is not working well with special characters like umlauts etc.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.