Dynamic dataprovider for listbox

[donaldoMember]

I would like to use the listbox component on a project. I dont want to to hardcode my dataprovider values . . I am grabbing data from an xml file and would like to handle the whole thing dynamically if possible. Heres my code;

$(document).ready(function() {
$.ajax({
type: “GET”,
url: “presMobile.xml”,
dataType: “xml”,
success: function(xml) {
var items = parseXml(xml);
feedListbox(items);
}
});
});

function parseXml(xml) {
var items = [];
$(xml).find(“Slide”).each(function() {
items.push({
name: $(this).find(“Title”).text(),
value: $(this).find(“SlideTime”).text()
});
});
return items;
}

function feedListbox(items) {
Here i would like to use the dynamically generated items array as the dataprovider for the listbox
like var source = [items] or some syntax to make the listbox look for the array as its datasource

}

Is this possible with your product or am I totally confused on how to provide data for the listbox?

Thanks for your help!

[Peter StoevKeymaster]

Hi donaldo,

There are to ways to load the ListBox with XML data.

With our jqxDataAdapter plug-in. Read this post: Bind to XML Data
Without the jqxDataAdapter plug-in: Take a look at the source code of the ListBox’s XML Data demo: ListBox XML Data

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[donaldoMember]

Peter,

Thanks for your reply.
The example with the jqxDataAdapter plug-inworks for me. Are there more docs on the adapter?

I am able to populate the listbox fine but I am having trouble with the syntax to retrieve the value of the selected item.

here is how i set up my data;

var url = “presMobile.xml”;

// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘SlideName’, map: ‘Title’ },
{ name: ‘SlideTime’, map: ‘SlideTime’ },
],
root: “Slides”,
record: “Slide”,
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#ListBox”).jqxListBox({ source: dataAdapter, displayMember: “SlideName”, valueMember: “SlideTime”, width: 224, height: 590, theme: ‘midnight’ });

I want to retrieve the SlideTime value from the selected item like to use in a callback handler

$(‘#jqxListBox’).bind(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxListBox’).jqxListBox(‘getItem’, args.index);
// get and alert value
var item = item.value;
alert(event.data.SlideTime)

});

——————————————————————————————————-
Here is my xml

swf/slide1.swf
Slide 1
1

swf/slide2.swf
Case: TM
278

swf/slide3.swf
Criteria for Manic Episode
906

——————————————————————————————————

Any suggestions as to how to properly grab selected values with the jqxDataAdapter plug-in
in this context?
Thanks
Donaldo

[donaldoMember]

Looks like my xml was cropped. again . .

swf/slide1.swf
Slide 1
1

swf/slide2.swf
Case: TM
278

swf/slide3.swf
Criteria for Manic Episode
906

[Peter StoevKeymaster]

Hi donaldo,

To retrieve the selected item, you can use this:

var item = $("#jqxWidget").jqxListBox('getSelectedItem');
// get item value.
var itemValue = item.value;
// get item label.
var itemLabel = item.label;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[donaldoMember]

Hi Peter,
This is not working for me. I think I must be missing something in my mapping setup for the DataAdapter plug in.
I am able to populate the listbox fine but I cant retrieve the value of any of the selected items.
My selections are showing up as undefinded in firebug when I run this.

$(‘#jqxListBox’).bind(‘select’, function (event) {
var item = $(“#jqxWidget”).jqxListBox(‘getSelectedItem’);
// get item value.
var itemValue = item.value;
// get item label.
var itemLabel = item.label;
alert(‘Selected: ‘ + itemValue);
});

Here is my mapping code:

var url = “presMobile.xml”;

// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘SlideName’, map: ‘Title’ },
{ value:’SlideTime’, map: ‘SlideTime’ },
],
root: “Slides”,
record: “Slide”,
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxListBox”).jqxListBox({ source: dataAdapter, displayMember: “SlideName”, valueMember: “SlideTime”, width: 224, height: 590, theme: ‘midnight’ });

Here is a link to my xml file (have not been able to cut and paste xml code in this textbox)
https://s3.amazonaws.com/mu1/presMobile.xml

I cant see what Im missing
Thanks
Donaldo

[Peter StoevKeymaster]

Hi Donaldo,

– I think that the problem is in the source object’s initialization. Here’s how I think it should be:

// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: 'Title'},
{ name:'SlideTime'},
],
root: “Slides”,
record: “Slide”,
url: url
};

– For formatting, you can use the ‘Format HTML Code’ button in the toolbar. The button is before the Red ‘Text Color’ button.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[donaldoMember]

Hi Peter,
Looks like I was able to get this to work by changing this line,

$(‘#jqxListBox’).bind(‘select’, function (event) {
var item = $(“#jqxWidget”).jqxListBox(‘getSelectedItem’);
to

$(‘#jqxListBox’).bind(‘select’, function (event) {
var item = $(“#jqxListBox”).jqxListBox(‘getSelectedItem’);

Obviously the call to #jqxWidget was not going anywhere because it did not exist in the DOM for my page.
(I assume that #jqxWidget is the div for the listbox in your code example.)

The jqxDataAdapter plug-in is a great time saver for wiring up xml to the listbox . . . any docs on this?

Thanks
Donaldo

[Peter StoevKeymaster]

Hi Donaldo,

– There’s a documentation about the jqxDataAdapter in the ListBox’s API Reference documentation under the ‘source’ object’s node. We will also have a major Documentation improvement with detailed help documentation about the jqxDataAdapter this week.

– Yes, you should select the ListBox’s DIV tag and then call its methods or properties.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Donaldo,

We just updated the help documentation and you can read more about the binding capabilities of the jqxDataAdapter plug-in here:
jquery-data-adapter.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts