how to get the bootstrap table row values on clicking bootstrap modal

Question

Iam using ember js with bootstrap i have a table using bootstrap

 <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Request Id</th>
        <th>Applied By</th>
        <th>Leave Type</th>
        <th>Leave From</th>
        <th>Leave To</th>
        <th>Days</th>
        <th>Status</th>
        <th>Applied date</th>
        <th>Applied/Declined date</th>
      </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
      {{#each model.pending}}
      <tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer">
        <td id="eid">{{id}}</td>
        <td>{{employee_id}}</td>
        <td>{{type_id}}</td>
        <td>{{from_date}}</td>
        <td>{{to_date}}</td>
        <td>{{days}}</td>
        <td>{{status}}</td>
        <td>{{to_date}}</td>
        <td>{{to_date}}</td>
      </tr>
      {{/each}}
    </tbody>
      </table>

now when someone clicks on the table row i am showing bootstrap modal for confirmation

  <div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Confirmation</h4>
    </div>
    <div class="modal-body">
      <button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
      <button type="button" class="btn btn-primary" {{action "pendingAction" target="controller" }}>Approve</button>
    </div>
  </div>
</div>

and i want these clicked row details in the ember so that i can process it on the server

App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function () {
 //here i want to get the details of clicked row 
    //this.transitionToRoute("approvalrequests", rdata);
}
}
});

can anyone tell me how to get the clicked row details in ember

Solution

There are two issues that need to be solved, passing the selected object/model on an event (eg when clicking the approve button) being able to use a complicated template as content of the modal (eg when clicking on a row the modal could contain a form or data from a master-detail(s) relationship).

One approach would be to refresh the content of the modal every time a selection on a row happens. The selection can be handled when clicking the row and the refresh of the (possibly rich/complicated) content of the modal could be achieved by assigning a template to it and binding its rendering to a property.

The following example for simplicity has used a partial template to hold the modal's content and simple objects with one property (name) as model.

http://emberjs.jsbin.com/gecehotu/1/edit

hbs

<script type="text/x-handlebars" data-template-name="index">
    <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>color</th>
      </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
      {{#each model}}
      <tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer" {{action "selectColor" this target="view"}}>

        <td>{{name}}</td>

      </tr>
      {{/each}}
    </tbody>
      </table>

      {{#if selectedColor}}

          {{partial "popup"}}

      {{/if}}
  </script>

  <script type="text/x-handlebars" data-template-name="_popup">
  <div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Confirmation</h4>
      <br/>
      {{selectedColor.name}}
    </div>
    <div class="modal-body">
      <button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
      <button type="button" class="btn btn-primary" {{action "pendingAction" selectedColor target="controller" }}>Approve</button>

    </div>
  </div>
</div>
  </script>

js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [{name:'red'}, {name:'yellow'}, {name:'blue'}];
  }
});

App.IndexController = Ember.ArrayController.extend({
  selectedColor:null,
  actions:{
    pendingAction:function(color){alert("the color is:"+color.name);}
  }
});

App.IndexView = Ember.View.extend({
  actions:{
    selectColor:function(color){
      this.controller.set("selectedColor",color);
    }
  }
});

Comments

[Kranthi Sama]

but i want the controller's method 'pendingAction' to be triggered from the bootstrap modal not directly onclick of the row @Hrishi

[Hrishi]

how are you showing the modal? I mean, are you handling the clicks on the row? is there a checkbox or something?

[Kranthi Sama]

as mentioned in my question above am using data-target="#pendingrequestsmodal" and am using this as id for the modal division.so it gets called...@Hrishi

[Kranthi Sama]

i just wanted to know one thing that am not using any route in my project, and everything is going through controllers..i.e every single click in my application goes to controller. will this be any problem..@melc

[melc]

@KranthiSama it actually depends on what exactly it is you are implementing.Generally it is possible to use emberjs without routes, as it is possible to use other aspects of emberjs as well like its object model.Although if you are building a complete web application that spans to more than 2-3 pages it is probably going to get pretty complicated (as you will probably end up managing states based on controller properties).This is the previous example without any routes, rendering another view with its controller and a view inheriting the index controller emberjs.jsbin.com/parisigu/1