how to DOJO + JSON

i want to make an input field with some options as autocomplete.

I have used the
roo> json add
comand and tested with curl, its alright.

now the dojo part i couldnt make.
i need a dijit.form.ComboBox that reads the json to provide autocomplete options.

How to make it?

cant use Dojo.

dojo.require("dojo/store/Memory");
var store = new Memory();

dont work. how to use dojo in roo projects? couldnt find any reference in manual.

Quote:

---

Originally Posted by bfpires

cant use Dojo.

dojo.require("dojo/store/Memory");
var store = new Memory();

dont work. how to use dojo in roo projects? couldnt find any reference in manual.

---

Take a look at the Roo tags - they embed Dojo directly.

Here's how I did it (see Chapter 7 of Spring Roo in Action for some details on how to do Roo and Dojo in more detail):

Code:

---

<script type="text/javascript">dojo.require('dijit.TitlePane');</script>
  <div id="_title_${sec_id}_id" class="panel">
  <h2>${sec_title}</h2>
    <script type="text/javascript">
      Spring.addDecoration(new Spring.ElementDecoration({
                elementId : '_title_${sec_id}_id',
                widgetType : 'dijit.TitlePane',
                widgetAttrs : {title: '${sec_title}',
                open: ${sec_openPane}}}));
    </script>
    <jsp:doBody />
  </div>

---

FWIW I don't use Dojo anymore. If I'm using Roo I will behead the Dojo widgets and do my own thing, and avoid scaffolding. I'm focusing on the AngularJS single-page web application framework, which can play nicely with Roo as a pure HTML/Javascript client. You can use @RooJson and @RooMvcJson (I forget the actual annotations) and treat Spring MVC as a smart datastore then.

i can create a dojo combobox but i cant create a store and bind to it.

my jsp:

Quote:

---

<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.addOnLoad(function() {
dojo.parser.parse();
});
dojo.require("dojo.store.Memory");

</script>


<div id="combo" />
<div id="store" />

<script type="text/javascript">
var data = [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
];
Spring.addDecoration(new Spring.ElementDecoration({
elementId : 'store',
widgetType : 'dojo.store.Memory',
widgetAttrs : {id: 'storeDojo', data: 'data' }}));
</script>


<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : 'combo',
widgetType : 'dijit.form.ComboBox',
widgetAttrs : {id: 'comboDojo', store: 'storeDojo' }}));
</script>

---

there is something wrong with the store.

I've solved. This may help someone.
After frustrating days trying Dojo, i move to jquery and it works.

To use jquery, i added in load-scripts.tagx:

Code:

---

<spring:url value="/resources/styles/jquery-ui-1.10.1.custom.css" var="jqueryui_url"/>
    <spring:url value="/resources/scripts/jquery-1.9.1.js" var="jquery_url" />
        <spring:url value="/resources/scripts/jquery-ui-1.10.1.custom.js" var="jquery_autocomplete_url" />

        <link href="${jqueryui_url}" rel="stylesheet" type="text/css">        <!-- required for FF3 and Opera -->    </link>
    <script src="${jquery_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
        <script src="${jquery_autocomplete_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>

---

and in jspx:

Code:

---

  <script>
            $(function() {
                    $( "#tags" ).autocomplete({
                            source:  "/divae/alunoes/listar",
                            delay: 2000
                    });
            });
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

---