Question

Hi guys
I am try to research Yahoo lib- grid. I created a button to display grid. But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again. My code like below:
Please help me., Thank you.

YUI({ filter: 'raw' }).use("jsonp", "node",function (Y) {

  function handleJSONP(response) {
   // Y.one("#out").setContent(Y.Lang.sub(template, response.user));
    YUI().use("datatable-base", function(Y) {
        var cols = [
            { key: "id",    label: "Transaction No", abbr: "id"},
            { key: "userName", label: "User Name", abbr: "userName"},
            { key: "storeName", label: "StoreName", abbr: "storeName"}
        ],
        data = response.Root,
        dt = new Y.DataTable.Base({
            columnset: cols,
            recordset: data,
            summary: "Price sheet for inventory parts",
            caption: "These columns have labels and abbrs"
        }).render("#example");
    });
}

  Y.one("#demo_btn").on("click", function (e) {
      var url = "server.jsp"+ "?callback={callback}";
      Y.jsonp(url, handleJSONP);
  });

});

Answer 1

You should be using the DataSource utility to retrieve the data via JSONP. This will allow you to then reload the data via something like

dt.datasource.load();

See the docs for details: DataTable + DataSource.Get + JSON Data

1. Your handler needs to check if you’ve already created the table.

var dt;
if (dt === null) {
dt = new Y.DataTable.Base // etc.
}