mercredi 15 novembre 2017

EmberJS - Sending form input values via query param to execute a query

I currently have a form that has 4 inputs. The first input is a selector and the other 3 are parameters for executing a query based on date range or customer ID.

I am trying to send the values of the inputs to a route so that I can return the query results via my RESTAdapter.

Here is the form on my template:

<div class="col-sm-3"><label>Module:</label>

            
            
            
            
            
  
        </div>

          <div class="col-sm-3"><label>Date From:</label></div>
          <div class="col-sm-3"><label>Date To:</label></div>
          <div class="col-sm-3"><label>Customer ID:</label></div>
          <div class="col-lg-10 col-lg-offset-5" style="margin-top:15px">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit"class="btn btn-info">Submit</button>
            </div>

To handle this I have the following in my controller:

module: null, //Variable to hold the value of the first 'Select a Module' input

actions: {
  selected(x){
    module = x
},

  submitQuery(dateFrom){ //dateFrom added as an example of an input
      switch(module) {
        case 'Option1':
         this.transitionToRoute('Option1') 

I have tried adding query params to the this.transitionToRoute like this.transitionToRoute('Option1', queryParams: {dateFrom: 'dateFrom'}) but the item doesn't appear in the URL on the new route upon Submit.

I've also tried adding the query params on the controller as a standalone object like:

queryParams: ['dateFrom'],
  dateFrom: this.get('dateFrom'),

but this stops the template from rendering with an error to say that dateFrom is undefined. This is the same with any variation of http://ift.tt/2AMN48m etc.

I don't know if my mistake is how am trying to access the values or in how I have set up my controller.

My desired result is a case where I can submit the following query from the form:

Select from Option one where where list_date >= date(dateFrom) and list_date <= date(dateTo) //(customer ID is option and handled seperately but you get the idea)




Aucun commentaire:

Enregistrer un commentaire