jQWidgets Forums

This topic contains 1 reply, has 1 voice, and was last updated by swisspen 11 years, 11 months ago.

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

Author

2 jqxListBoxes, each getting data from MySQL Posts
June 18, 2013 at 4:09 pm 2 jqxListBoxes, each getting data from MySQL #23358

swisspen
Participant

Hi

First of all thanks to Peter for giving me the first pointers about where to look for demos of listboxes and drag-and-drop. I’m learning jQuery on the fly by doing this project so am still confused at times. I may be trying to do something impossible.

I have a PHP/HTML page that needs to list people signed up for Activity A in one list box, and people signed up for Activity B in the second list box. Both lists of names come from a MySQL database via PHP Data Objects, which get encoded as JSON before being sent from the server. The first list box populates beautifully, but the 2nd stays blank.

My code is:

$(document).ready(function ()
{
var theme = getDemoTheme();

// prepare the data
var data1 =
{
datatype: ‘json’,
datafields: [
{ name: ‘id’},
{ name: ‘name_first’},
{ name: ‘name_last’},
{ name: ‘activity_id’},
{ name: ‘capacity’}
],
//call the responses file to get back the xml data
url: ‘stcg-json-current-mem-act.php?eventId=’,
async: false
};

var dataAdapter1 = new $.jqx.dataAdapter(data1);

$(“#listBoxA”).jqxListBox(
{
allowDrop: true,
allowDrag: true,
source: dataAdapter1,
theme: theme,
width: 200,
height: 200,
displayMember: ‘name_last’,
valueMember: ‘id’
});

var data2 =
{
datatype: ‘json’,
datafields: [
{ name: ‘id’},
{ name: ‘name_first’},
{ name: ‘name_last’},
{ name: ‘activity_id’},
{ name: ‘capacity’}
],
//call the responses file to get back the xml data
url: ‘stcg-json-new-mem-act.php?eventId=’,
async: false
};

var dataAdapter2 = new $.jqx.dataAdapter(data2);

$(“#listBoxB”).jqxListBox(
{
allowDrop: true,
allowDrag: true,
source: dataAdapter2,
theme: theme,
width: 200,
height: 200,
displayMember: ‘name_last’,
valueMember: ‘id’

});
… after which comes the drag-and-drop script and the divs get closed. Note that the only difference between lists is that they each access a different PHP file that returns JSON-encoded data from the MySQL query. I have checked that the data is indeed returned to the PHP file for List B, correctly JSON coded. But it doesn’t populate the widget.

The idea I am trying to realize is that the organizer of activities can drag a name from list A to list B if there are already too many people signed up for Activity A and not enough for Activity B.

Thanks for any pointers you can give me!

SP

June 19, 2013 at 4:29 am 2 jqxListBoxes, each getting data from MySQL #23367

swisspen
Participant

I discovered the problem. Firstly, for some reason my urls were cut off when I pasted them into this forum post.

At some point while try to debug, I had decided to use 2 different files for the responses to the 2 queries, although the only thing different about them was one input parameter. As soon as I made that one single response file, and simply posted different input params into the url, the second box populated.

The two versions of “url” in my script are now:

for data1:

url: ‘stcg-json-current-mem-act.php?eventId=’,

and for data2:

url: ‘stcg-json-current-mem-act.php?eventId=’,

SP
Author

Posts

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

You must be logged in to reply to this topic.