I am creating an ember application which gets data from servlet and prints it in a table format.. the table looks like this
Capacity Price RoomType RoomNo Action
6 4150 suite 93 Select
2 1579 villa 5 Select
1 1526 villa 1 Select
When I click select I need to get the value in the room no. I tried creating a tracked variable and updating the value but got stuck, so any idea how I can do it in ember would be appreciated. I found an article which uses jQuery to do the same but I don't know how to add jQuery to an ember application.
Myy handlebar file
{{#if this.request.isPending}}
loading data...
{{/if}}
<main class="conttainer mt-5 ">
<container class="cond">
<table border="1|0" class = "tab">
<thead>
<tr>
<th><td>Capacity</td></th>
<th><td>Price</td></th>
<th><td>RoomType</td></th>
<th><td>RoomNo</td></th>
<th><td>Action</td></th>
</tr>
</thead>
<tbody>
{{#each this.result as |row|}}
<tr>
{{#each-in row as |key value|}}
<td>{{value}}</td>
{{/each-in}}
<td><button class = "btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>//--> wrong decleration yet i dont know how to access the roomno column
</tr>
{{/each}}
</tbody>
</table>
</container>
<form>
<table>
<tr>
<td><h5>room number</h5></td>
</tr>
<tr><td>{{this.room}}</td></tr>//---> i have to show the value here
<tr><td><b>Enter the Start Date</b></td></tr>
<tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "sdate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
<tr><td><b>Enter the End Date</b></td></tr>
<tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "edate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
<tr><td><button type = "button" {{action "get"}}>submit</button></td></tr>
</table>
</form>
</main>
My controller file
class RequestState {
@tracked value;
@tracked error;
get isPending() {
return !this.error && !this.value;
}
}
export default class RoomselectController extends Controller {
@service router;
@tracked room =0;
getroomno(value){
var that = this;
console.log(value);
that.room = value;
console.log(that.room)
}
@use request = resource(({ on }) => {
const state = new RequestState();
var dis = this;
$.ajax({
url: 'http://localhost:8080/hotelres/My',
method: 'GET',
dataType: 'json',
success: function(response){
console.log(response)
if(response == 0){
dis.transitionToRoute("error");
}else{
state.value = response
}
},
error: (xhr, status, error) =>
(state.error = `${status}: ${xhr.statusText}`),
});
return state;
});
get result() {
return this.request.value || [];
}
I need to render the room number when the select button is pressed.
In your row, I see:
<td><button class="btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>
which would invoke this.getroomno
before passing a "handler" to the on click event listener. (and then {{value}}
should be a syntax error? because there are two opening {{
and one closing }}
For more information on this syntax, see: this cheatsheet
I think you want something more like:
<td>
<button
class="btn-test"
{{on "click" (fn this.getroomno row)>
Select
</button>
</td>
Docs on fn
are here
fn partially applies row
to getroomno
, so when invoked, getroomno
will be passed the row and the click event will be the last argument (if needed)