Dynamically change widgets data-id does nothing

[Trylz]

My problem:

I would like to have a widget that the user can dynamically change the data it is bound to.

My solution:

• Backend Continuously send requests to all possible data-id for this widget type :(

• Front end: Add a selection to the widget layout. When the selection of an object change, its data-id is set to the right one.

Then it is not working. My widget is a simple modification of the Table one.

The dashboard .erb file:

<% content_for :title do %>My super sweet dashboard<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="Quebec-Table-id" data-view="Table" data-title="Table Title" data-moreinfo="More information about this table"></div>
    </li>
  </ul>
  <center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://<%=request.host%>:<%=request.port%>/widgets/welcome</div></center>
</div>`

The widget .hml file:

`<h1 class="title" data-bind="title"></h1>

<table>
  <thead>
   <tr data-foreach-hrow="hrows" data-bind-style="hrow.style" data-bind-class="hrow.class">
      <th data-foreach-col="hrow.cols" data-bind-colspan="col.colspan" data-bind-rowspan="col.rowspan" data-bind-style="col.style" data-bind-class="col.class">
        <span class="table-value" data-bind="col.value | raw"></span>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr data-foreach-row="rows" data-bind-style="row.style" data-bind-class="row.class">
      <td data-foreach-col="row.cols" data-bind-colspan="col.colspan" data-bind-rowspan="col.rowspan" data-bind-style="col.style" data-bind-class="col.class">
        <span class="table-value" data-bind="col.value | raw"></span>
      </td>
    </tr>
  </tbody>
</table>

<!-- *************** New  ***************  -->

<select onchange="updateId(this)">
  <option value="Quebec-Table-id">Quebec</option>
  <option value="Montreal-Table-id">Montreal</option>
</select>

<script language="JavaScript">
    function updateId(obj)
    {
        obj.parentElement.setAttribute("data-id", obj.value);
    }
</script>

<!-- ************************************  -->

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

The .rb file:

hrows = [
  { cols: [ {value: ''}, {value: 'Temperature'}, {value: 'Population'}] }
]

quebecRows = [
  { cols: [ {value: 'Sainte-Foy'}, {value: 10}, {value: 26000} ]},
  { cols: [ {value: 'Duberger'}, {value: 20}, {value:10000} ]},
]

montrealRows = [
  { cols: [ {value: 'Berri-UQAM'}, {value: 4}, {value: 32000} ]},
  { cols: [ {value: 'Mont-Royal'}, {value: 16}, {value:8000} ]},
]

SCHEDULER.every '2s' do
    send_event('Quebec-Table-id', { hrows: hrows, rows: quebecRows} )
    send_event('Montreal-Table-id', { hrows: hrows, rows: montrealRows} )
end