CODEWITHSUNDEEP
javascriptember.js
moamenezzat
moamenezzat

Reputation: 129

Ember TransitionTo with queryParams not working

I'm new to ember and I'm trying to use transitionTo with queryParams but I can't get it to work I tried a lot of the solution but I can't find out what is wrong with my code. here the code for the two routes I'm to transition between:

1- index.js:

export default Ember.Route.extend({
 setupController: function(controller, model) {
 this._super(controller, model);
 controller.set("model", model);
 },
 model() {
  return {
   searchQuery: ""
  };
 },
 actions: {
  search() {
   const query = this.controller.get("model.searchQuery");
   this.transitionTo("/search-results", {
     queryParams: {
       q: query
     }
   });
  }
 }
});

2-search-results.js:

export default Ember.Route.extend({
 model() {
  return {
   fieldsInput: []
  };
 },
 setupController: function(controller, model) {
  this._super(controller, model);
  controller.set("model", model);
 }
});

I don't know if anything else should be added. I tried setting queryParams on the controller but it didn't work either. also, I tried adding 

  queryParams: {
   q: ""
  },

to the search results route but no use.

Upvotes: 1

Views: 1068

Answers (2)

Ember Freak
Ember Freak

Reputation: 12872

When you give url for transitionTo method so you need to provide full URL by constructing including queryParams. This will work

this.transitionTo(`/search-results?q=${query}`);

As you mentioned in comment, you were missing to specify queryParams property in route.

Upvotes: 1

Oisín Foley
Oisín Foley

Reputation: 3467

In "search-results.js", you need to access(tell your model) about the param you passed into the file from index.js, so in search-results.js, your model should look a little like this: 

model(param) {
   return {
    fieldsInput: [] 
   };
},

If you look where you've defined "fieldsInput" above, you're going to want to do some sort of Ember-Data lookup (if you are not familiar with it, then watch a youtube video or two, it'll help a lot going forward), to make use of the "queryParam" you passed from index.js.

(Hint: "return this.store.findRecord(someObject, param.someProperty)" is probably what you'll want to use)

Also, if you look in the line just under where you've written "this.transitionTo", you've a typo in your spelling of "queryParams".

Hope this helps.

Upvotes: 0

Related Questions