ComboBox Categories Dinamically

[Deneb AsecasParticipant]

Hello, Sorry to bother you again.

I have seen that it is possible to place a combobox categories, as is shown in the example:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm#demos/jqxcombobox/categories.htm

And using a source like this:

var source = [
// Business & Investing
{html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: Do the Work</div><div>Author: Steven Pressfield</div></div>”, label: “Do the Work”, group: “Business & Investing” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: Think and Grow Rich</div><div>Author: Napoleon Hill</div></div>”, label: “Think and Grow Rich”, group: “Business & Investing” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: The Toyota Way to Continuous…</div><div>Author: Jeffrey K. Liker</div></div>”, label: “The Toyota Way to Continuous…”, group: “Business & Investing” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: Redesigning Leadership </div><div>Author: John Maeda</div></div>”, label: “Redesigning Leadership “, group: “Business & Investing” },
// Computer & Internet Books
{html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: MacBook Pro Portable Genius</div><div>Author: Brad Miser</div></div>”, label: “MacBook Pro Portable Genius”, group: “Computer & Internet Books” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: Social Media Metrics Secrets</div><div>Author: John Lovett</div></div>”, label: “Social Media Metrics Secrets”, group: “Computer & Internet Books” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Title: iPad 2: The Missing Manual</div><div>Author: J D Biersdorfer J.D</div></div>”, label: “iPad 2: The Missing Manual”, group: “Computer & Internet Books” },
// History
{html: “<div tabIndex=0 style=’padding: 1px;’><div>Lincoln and His Admirals</div><div>Author:Craig L. Symonds</div></div>”, label: “Lincoln and His Admirals”, group: “History” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>The Dogs of War: 1861</div><div>Author:Emory M. Thomas</div></div>”, label: “The Dogs of War: 1861”, group: “History” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Cleopatra: A Life</div><div>Author:Stacy Schiff</div></div>”, label: “Cleopatra: A Life”, group: “History” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>Mother Teresa: A Biography</div><div>Author:Meg Greene</div></div>”, label: “Mother Teresa: A Biography”, group: “History” },
{ html: “<div tabIndex=0 style=’padding: 1px;’><div>The Federalist Papers</div><div>Author:John Jay</div></div>”, label: “The Federalist Papers”, group: “History” },
];

My question is how can I put the categories in a combobox when I bring the data from the database with AJAX?, so, I’m using this function

“$ (” # jqxComboBox “) function jqxComboBox (‘addItem’, {label: ‘Text’ value: ‘Id’}).” to load the data to the combobox.

There is no way to load the categories to a combobox dynamically? or how can I use categories when I use yhe function additem…

[Peter StoevKeymaster]

Hi Deneb Asecas,

When you add an item, you can also set the item’s group member, not only its label and value. By doing that, it would be placed in a category/group.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Deneb AsecasParticipant]

Could you do me an example of this group member when I add an Item like this: “$ (” # jqxComboBox “) function jqxComboBox (‘addItem’, {label: ‘Text’ value: ‘Id’}).”?

[Peter StoevKeymaster]

Hi Deneb,

Here’s the required example: http://jsfiddle.net/8NHDq/1/

Best Regards,
Peter Stoev

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

[Deneb AsecasParticipant]

OK, I do not know what I am doing wrong. But it did not work to me. I am doing this… Could you see an error?

PD: I am bringing the data from data base

cat_stock2 = jQuery(“#combobox_cat_stock_mod”).jqxComboBox({ placeHolder: “Seleccione…”,
selectedIndex: 0,
autoOpen: false,
scrollBarSize:3,
width: ‘98%’,
height: ’20px’,
theme: ” });

cat_stock2.jqxComboBox(‘clear’);
//Load data from database (PGSQL)
jQuery.ajax({
data: ‘caso=list_elements’,
url: ‘m_configuracion.php’,
type: ‘POST’,
success: function (response) {
//DB result
var resultado = eval(response);
//First element of the combobox
var source = [];
source[0] = {value: “sgm_seleccione”, label: “Seleccione…”, group: “test 1″};

if((resultado != null) && (resultado != ”)){
for(var i = 0; i < resultado.length; i++){
document.getElementById(‘aux_texto_html’).innerHTML = resultado[i].desc_tipo_estado;
source[i+1] = {value: resultado[i].id_tipo_estado,
label: document.getElementById(‘aux_texto_html’).innerHTML,
group: “test 2”};
}
}
cat_stock2.jqxComboBox({source: source});
cat_stock2.jqxComboBox({selectedIndex: 0});
}
},
error: function(xhr, errorString, exception) {
alert(“ERROR: Estado xhr=”+xhr.status+” Mensaje=”+errorString+” exception=”+exception);
}
});

[Peter StoevKeymaster]

Hi Deneb,

Unfortunatley, we are unable to test the code snippet. Could you provide a small sample and please use http://jsfiddle.net/ for that purpose.

Best Regards,
Peter Stoev

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

[Nicolas PIRONParticipant]

Hi,

I want to continue the topic because I can’t create groups dynamically.

This group concept is really interesting,

Only groups created at the initialization works
Is it a choice?

http://jsfiddle.net/des0srk3/2/

thank you in advance

[Author]

Posts