lundi 22 août 2022

retriving table content data in ember

am creating an ember application which gets data from servlet and print it in a table format.. the table look like this

Capacity Price  RoomType    RoomNo  Action
6        4150   suite         93    Select
2        1579   villa          5    Select
1        1526   villa          1    Select

when i clicked 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 can i do it in ember.. i found an article which uses jquery to do the same but dont know how to add jquery in ember.

my handlebar file


  loading data...

<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>
   
        
      <tr>
        
          <td></td>
          
        
        <td><button  class = "btn-test" >Select</button></td>//--> wrong decleration yet i dont know how to access the roomno column
        
      </tr>
    
  </tbody>
</table>
</container>
<form>
  <table>
    <tr>
      <td><h5>room number</h5></td>
    </tr>
    <tr><td></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" >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




Aucun commentaire:

Enregistrer un commentaire