populate a table B based on row clicked on table A

Question

I have a table that A is made from dojo and I need to populate another table B again using dojo. Here I need to click the row of the table A and based on that row I need to make a call to my spring controller along with I will send the row id or some value of row to controller and the controller, it should return json data of a model that i need to return to dojo to so it as table B.

Here below I show you that what I have.

Button to populate a table that which I got In google search.

<button data-dojo-type="dijit/form/Button" type="button" id="goBtn"  disabled="disabled" >GO
              <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">

                           populateTable();
              </script>

This is the table A that going to populated on button click

<div style="width: 800px; height: 200px;">
      <div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableA, idProperty:'tableAid'" data-dojo-id="tableADateStore">
      </div>

      <!-- Create the model bridging the store and the Tree -->
      <div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableADateStoreForGrid"
          data-dojo-props="objectStore: tableADateStore"></div>

      <div id="grid"
          data-dojo-type="dojox/grid/DataGrid"
          data-dojo-props="store:tableADateStoreForGrid,
          structure:'layoutGridForTableA',
          queryOptions:{deep:true},
          query:{},
          onRowClick: function(e) {
          populateTableB();
          },
          rowsPerPage:5">
      </div>
</div>

This the table B that is to be populated on row click of above table, that is Table A

<div style="width: 800px; height: 200px;" class="left-div">
      <div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableB, idProperty:'tableBid'" data-dojo-id="tableBDateStore">
      </div>
       <!-- Create the model bridging the store and the Tree -->
      <div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableBDateStoreForGrid"
          data-dojo-props="objectStore: tableBDateStore"></div>

      <div id="dateGrid"
          data-dojo-type="dojox/grid/DataGrid"
          data-dojo-props="store:tableBDateStoreForGrid,
          structure:'layoutGridForTableB',
          queryOptions:{deep:true},
          query:{},
          rowsPerPage:5">
      </div>
      </div>

And below is the dojo script i used

<script>

require(["dojo/parser", "dijit/form/FilteringSelect", "dijit/form/Button", "dojox/data/HtmlTableStore", "dojox/grid/DataGrid"]);
require(["dojo/store/Memory", "dojo/data/ObjectStore", "dojox/grid/DataGrid", "dojo/_base/lang", "dojox/grid/DataGrid",
         "dojo/data/ItemFileWriteStore", "dojox/grid/cells/dijit", "dojox/grid/cells/CheckBox", "dojo/dom", "dojo/domReady!"], function () {


layoutGridForTableA = [[
                  { field: "nm", name: "Name", width: 'auto' },
                  { field: "Cod", name: "Code", width: 'auto' },
                  { field: "startDt", name: "Start Date", width: 'auto' },
                  { field: "endDt", name: "End Date", width: 'auto' }
           ]];


layoutGridForTableB = [[
                  { field: "day", name: "Day", width: 'auto' },
                  { field: "description", name: "Description", width: 'auto' },
                  { field: "event", name: "Event", width: 'auto' },                           
                  { field: "checkBoxTest", name: "Check Box Test", width: 'auto', editable: true, type: dojox.grid.cells.Bool, formatter:formatCell, styles: 'text-align: center;' },   
                  { field: "", name: "", width: 'auto', formatter:editButton}

           ]];

storeDataForTableA = [];
storeDataForTableB = [];

 var formatCell = function(){

                 var checked = val? 'checked="checked";' : '<input type="checbox"' +checked+'disabled="disabled"/>';

                 return checked;

           };   


 function editButton(){
                 return "<button onclick=\"\" class=\"editbuttonicon\"></button>";

           } 



});

function populateTableA(){

     var addItemToTableA = { name:'Steve', Cod:'007', startDt:'any date', endDt:'any date'};
                   for (var i=0;i<4;i++)
                   { 
                       tableADateStoreForGrid.newItem(addItemToTableA );
                   }
     }

function populateTableB(){

     var addItemToTableA = { name:'Steve', Cod:'007', startDt:'any date', endDt:'any date'};
                   for (var i=0;i<4;i++)
                   { 
                       tableBDateStoreForGrid.newItem(addItemToTableA );
                   }
     }

</script>

In the above script one can find that I did not populated the table B because here is the problem there to write it. I got some script in internet that do ajax request to send and receive JSON data. But there is no explanation for URL. I tried same name that which is in request mapped. But it did not call the request. I will past the script that I used.

      dojo.ready(function(){
             dojo.xhrGet({
                  url  : "populateFromSpring",
                  handleAs: "json",
             load: function(Beans) {
//I need to get the Beans object here and populate the Table B
                    alert("hi");  
             },
             error: function(err) {
                    alert("err: "+err);
             }
       });  
                  });

I tried this inside function populateTableB instead of the for loop , which is inside the script one can notice it.

Below I give you the spring controller

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;


import com.model.TableBBean;
@Controller
@RequestMapping("/populateFromSpring")
public class PopulateFromSpringCtrl {

                @RequestMapping(method = RequestMethod.POST)
                public @ResponseBody List<TableBBean> tableBmth(@RequestParam String name) {

                //            ModelAndView mv = new ModelAndView("loginsuccess"); 

                                List<TableBBean> Beans = new ArrayList<TableBBean>();

                                TableBBean B1 = new TableBBean();

                                B1.setDay(1);
                                B1.setDescription("Desc 1");
                                B1.setEvent("GS");
                                B1.setCheckBox("0");


                                TableBBean B2 = new TableBBean();

                                B2.setDay(2);
                                B2.setDescription("Desc 2");
                                B2.setEvent("GS");
                                B2.setCheckBox("1");


                                TableBBean B3 = new TableBBean();

                                B3.setDay(3);
                                B3.setDescription("Desc 3");
                                B3.setEvent("GS");
                                B3.setCheckBox("1");


                                Beans.add(B1);
                                Beans.add(B2);
                                Beans.add(B3);


                                //mv.addObject("Beans",Beans);
                    return Beans;
                }

}

I know this controller is not fully completed and I need help in completing this controller and converting the bean to JSON.

So the things what I need is

dojo should call this controller and send some data say for example id of table A's row to it, then it should get back the data as JSON and populate the table B.

Answer 1

To return JSON in Spring MVC, make sure you have the Jackson libraries and do something like:

@RequestMapping("myHandler")
public @ResponseBody MyBean myHandlerToGetBean() {
  // Do some stuff...
  return myBean;  // return instance of MyBean
}

Spring will see the object being returned, MyBean, and auto-magically convert it using Jackson. You can use the Jackson annotations to facilitate some control over how the MyBean gets serialized/marshaled if you don't need anything too fancy. If you need something that gives more control, you can forgo returning your MyBean directly, and instead return a String and use a Jackson custom serializer. You may also want to set your Content-Type to signify you are returning JSON.

On your client side, you can use something like jQuery, or whatever, to make an AJAX call to your service, and use the returns object directly in the JavaScript (the browser should turn the JSON into a JavaScript object, again "auto-magically). What you do with it then depends on your implementation, but it would seem like you would want to modify the DOM of your table or something. You may also be suing some sort of table pluggin, and if so you will need to read the documentation to see exactly what format the JSON should be in and how to do the updates.