How to use dhtmlXCombo multiple times in same page

Question

I have got a JSP and I'm trying to make use of a dhtmlXCombo component.

In the JSP I have a table with about 100+ rows, each row having the details of an order, in the last column of each row I want a dhtmlXCombo component where I can update the status of each order. The dhtmlXCombo has a list of status options that are retreived from a database.

I create the dhtmlXCombo as follows:

var z = new dhtmlXCombo("testA", "testA", 200);
z.loadXML("getStatus.xml");

No problems there but later in the code I loop through an array list and create the table rows, as I create each each row I was hoping to be able to say:

<div id="testA" style="width:200px; height:30px;"></div>

as I want to use the same dhtmlXCombo in each row but that does not work because the div id must be unique in the page so I can't put div id="testA" for each row that I create (if I do then it only creates the first dhtmlXCombo).

Any suggestions on how to approach this problem? Basically I would like to use the same dhtmlXCombo many times in the same page.

Thanks.

Answer 1

Retrieve the xml first, and reuse it every time you create a new dhtmlXCombo.

e.g using jQuery to retrieve the xml:

<div id="testA" style="width:200px; height:30px;"></div>
<div id="testB" style="width:200px; height:30px;"></div>
<div id="testC" style="width:200px; height:30px;"></div>

$(function () {
    $.ajax({
        type: "GET",
        url: "getStatus.xml",
        dataType: "xml"
    }).done(function (response) {
        var testA = new dhtmlXCombo("testA", "testA", 200),
            testB = new dhtmlXCombo("testB", "testB", 200),
            testC = new dhtmlXCombo("testC", "testC", 200);

        testA.loadXMLString(response);
        testB.loadXMLString(response);
        testC.loadXMLString(response);
    });
});

Alternatively if you are not using jQuery you can use dhtmlxAjax:

dhtmlxAjax.get("getStatus.xml", function (loader) {
    var response = loader.xmlDoc.responseXML;
    // ...
});