meteor handle form input

Question

I'm using meteor to build a web app that shows stock information. I currently have a input on the client side which takes in text. The input is hooked up to a Lookup API by Markit on Demand. This is the code:

Template.LookupTemplate.onRendered(function() {
this.$("#Lookup")
.focus()
.autocomplete({
  source: function(request,response) {
    $.ajax({
      url: "http://dev.markitondemand.com/api/v2/Lookup/jsonp",
      dataType: "jsonp",
      data: {
        input: request.term
      },
      success: function(data) {
        response( $.map(data, function(item) {
          return {
            label: item.Name + " (" +item.Exchange+ ")",
            value: item.Symbol
          }
        }));
      },
      minLength: 0,
              select: function(event,ui ) {
        console.log(ui.item);
      }
    });
  }
});

}); //Closing tag of LoookupTemplate.onRendered

How do I capture the selection by the client? When the user starts typing a company name, the jquery autocomplete kicks in and gives the client a list of options to select from. Once the user selects it and hits "enter" (submits it), the page reloads to

http://localhost:3000/Overview?stockname=AAPL

How do I capture that input (AAPL in this case) and then pass it to another function that builds a chart for that particular stock?

--Router.js

Router.configure({

// This is the default layout/top-level template layoutTemplate: 'layout' });

Router.map(function() {
    this.route('/', {
        path: '/',
        action: function() {
            this.redirect('landingpage')
        document.title = 'Cash'
    }
    });

  // Route for the landing page when user is not logged in
    this.route('landingpage', {
        path: '/landingpage',
        after: function() {
        document.title = 'Cash'
    }
    });

// Route to our main app. Note that I use / path as I treat this as default behavior
    this.route('/Overview', {
        path: '/Overview',
        after: function () {
            document.title = 'Cash';
        }
    });
})

why don't you use the router to read the param when it load to the next page ? — Thai Tran, Feb 24 '16 at 05:36

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

IronRouter only can read the param when you define them in the router. For the case of dynamically param created by the API, the best way is using javascript to read it. Please have a look at the solution in here

edited May 23 '17 at 12:15

Community

1
1

answered Feb 24 '16 at 05:37

Thai Tran

9,815
7
43
64

I put in a console.log( Router.current().params['stockname']) at the end of the Template.LookupTemplate.onRendered. I know initially it's supposed to give me undefined. But after selecting and being redirected to http://localhost:3000/Overview?stockname=AAPL, I still get the console.log as undefined. – AGS Feb 24 '16 at 05:42
so, after user select it, you redirect it into the same page ? – Thai Tran Feb 24 '16 at 05:43
prior to selection the url is : http://localhost:3000/Overview. After the client selects from the dropdown and submits it, the page is redirected to http://localhost:3000/Overview?stockname=*some stock name*. Not by my doing though. – AGS Feb 24 '16 at 05:44
Edited the original post – AGS Feb 24 '16 at 05:55
Thanks. will check it out! – AGS Feb 24 '16 at 06:12

meteor handle form input

1 Answers1