How do I populate a select box using an ajax call which returns a list of strings using dojo?
Question
I want to populate a select box using dojo . My Spring controller returns an arraylist of string , I want to get all the strings into my select box.
var currencyStore = new RequestMemory({
target: "getCurrency"
});
var os = new ObjectStore({ objectStore: currencyStore });
var currencyCombo = new Select({
store: os
}, "currency").startup();
But the select box is empty with the above code. What am I doing wrong?
1 answers
solution1
0 ACCPTED 2015-10-06 17:11:47
Using dojo/Store and dijit/form/Select
Let me first state that I have no real experience with Spring so I am going off of your statement that you have an ArrayList of String s and you want them to be options in a dijit/form/Select . If you don't mean to use dijit widgets or that you mean that you want to use a regular <select> tag with no dojo backing, then you are dealing with another solution.
That being said, you can use the example that I linked in my comment above: A Select Fed By A Store in order to more easily accomplish putting your data set into a <select> and be able to leverage other niceties of the widget.
require([ "dijit/form/Select", "dojo/data/ObjectStore", "dojo/store/Memory", "dojo/_base/array", "dojo/dom", "dojo/html", "dojo/domReady!" ], function( Select, ObjectStore, Memory, array, dom, html ) { "use strict"; /* We used the domReady! plugin so this code runs after the DOM has finished loading */ // Predefine var strings, idStrings, store, objectStore, select; /* Strings is going to be the "arrayList of Strings" that you mention that you receive from your spring controller */ strings = [ "hello", "world", "foo", "bar" ]; /* We are going to map your String array so that it has an "id" property and a "label" property which will get used by the Store and the Select */ idStrings = array.map(strings, function(str, index) { return { id: index, label: str }; }); // Make a Memory Store store = new Memory({ data: idStrings }); // Make an ObjectStore from the Memory objectStore = new ObjectStore({ objectStore: store }); // Create the Select and set its store to the one we just made select = new Select({ name: "testSelect", store: objectStore }, "testSelect"); // We need to run startup on programatically created widgets select.startup(); // Add change listener for funzies select.on("change", function() { // Get the label from the store by the value of this Select var label = store.get(this.get("value")).label; // Set the innerHTML of our logger html.set(dom.byId("logger"), label); }); });
<!-- Include the dijit claro theme --> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"> <!-- Set our dojoConfig --> <script> var dojoConfig = { parseOnLoad: false, isDebug: true, async: 1 }; </script> <!-- Include the dojo 1.10.4 CDN --> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <body class="claro"> <main> <!-- This Select is going to be replaced by our widget --> <select id="testSelect"></select> <!-- We're going to put output in this div --> <div role="log" id="logger"></div> </main> </body>
Additionally, if you don't want to use the dijit/form/Select you could just insert options into the <select> yourself with either native JavaScript methods like document.createElement("option"); and then fit the attributes on manually, but since you've already used the bandwidth to load dojo, you might as well make things easier on yourself by using its DOM manipulation methods such as dojo/domConstruct.create() .
Without dijit/form/Select
require([
"dojo/_base/array",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function (
array,
dom,
domConstruct,
) {
"use strict";
var strings, select;
// We have our strings
strings = [
"hello",
"world",
"foo",
"bar"
];
// Get our select
select = dom.byId("testSelect");
// Iterate each string and put it into an option under our select
array.forEach(strings, function (str, index) {
domConstruct.create("option", {
innerHTML: str,
value: index
}, select);
});
});
Side Note
You probably don't need to use dojo/_base/array . I do so out of habit for supporting old browsers and since we're already using dojo. Also, you probably have your own setup for where modules go and are, hopefully, using some sort of build layer rather than using the CDN so you should refactor this so that it is not just some inline script as I have done in this example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.