Dropdown. Data from checked option

bart93 · August 3, 2015, 11:51am

Hello there!
I need your help in probably small thing.

Firstly I just want to add that I’ve builded my app with MeteorKitchen, so the code could look different than normal code

I have a “dropdown” in my app and I want to take the data from checked option. Of course I want it to be changeable (if I change my check option, the data should be changed as well). I want to have the same info style as is on the left on my right side under “TO” dropdown.

I have some code here:

<div class="form-group  field-customer-id" id="inputcustomer">
    <label for="customerId" class="boldy">
     TO
    </label>
       <div class="input-div">
          <select class="form-control" name="customerId" required="required">
              {{#each customers}}
                    <option value="{{_id}}">
                        {{name}}
                    </option>
              {{/each}}
          </select>
     </div>
</div>

Is any way that I could take the data from that?

shock · August 3, 2015, 11:57am

events handler which listen for onChange property of that <select> element.
And it’s “selected” property contain currently selected option value.

bart93 · August 3, 2015, 11:59am

May you give an example of what you’ve said? I’m beginner, so… It’s sometimes hard to do that perfectly

I need to do in my Template.xxx.events property “onChange”, right?

shock · August 3, 2015, 12:10pm

Template.selectForm.events({
   "change select": function(event, template) {
   	Session.set("selectedCustomer",event.target.value);
   }
});

I fast copied some of my old code, dont know if it is working as expected
Used Session there, good old antipattern times
Use console.log there to debug if it is handled correctly.

bart93 · August 3, 2015, 12:19pm

Omg… Ok. You use session here… I’m so stupid. What I should do then? I need to do something in helpers or in that session?

AndreasGalster · August 3, 2015, 12:22pm

You retrieve the session via Session.get(‘selectedCustomer’) in your template helper.

bart93 · August 3, 2015, 12:31pm

Soooo… I have a template:

<template name="InvoicesNewNowaFaktura">
  <div class="form-group  field-customer-id" id="inputcustomer">
    <label for="customerId" class="boldy">
     TO
    </label>
       <div class="input-div">
          <select class="form-control" name="customerId" required="required">
              {{#each customers}}
                    <option value="{{_id}}">
                        {{name}}
                    </option>
              {{/each}}
          </select>
     </div>
  </div>
</template>

And then in my JS files I do:

Template.InvoicesNewNowaFaktura.events({
      "change select": function(e,t){
            Session.set("selectedCustomer",e.target.value);
            console.log(e);
    },
});

and in my helper:

Template.InvoicesNewNowaFaktura.helpers({
    numberone:function(){
            var try= Session.get('selectedCustomer');
            console.log(try);
    },
});

No I need to add {{numberone}} to my code?

EDIT
OMG … it works!

bart93 · August 3, 2015, 12:38pm

And one last question: how should I put it in my HTML?
I want to return 3 things - name, address and mail.

var customer = t.name;
var address = t.business_address;
var mail = t.email;

But I can’t do:

return customer, address, mail;

shock · August 3, 2015, 12:43pm

Template.InvoicesNewNowaFaktura.helpers({
    numberone:function(){
        return CustomerCollection.findOne({ _id: Session.get('selectedCustomer')});
    }
});

<div>
  Name: {{ numberone.customer}}
  Address: {{ numberone.business_address}}
  Mail: {{ numberone.email }}
</div>

bart93 · August 3, 2015, 12:50pm

Yup. It works. Big thanks to you, guys

shock · August 3, 2015, 12:53pm

Regarding that Session, it is not best pattern to keep state in it.
So have a look on this article how to migrate it to nice Template level reactive variable

Glad to help

bart93 · August 3, 2015, 1:07pm

I will read that, be sure!

I have one last problem here.
When I check one option and do “save” the invoice, I go to other invoice and edit that. My “customer data” isn’t the same as the customer I’ve chosen

I chose “8”, look at the “Customer”. And then…

Ughhh… I see that it choose the last thing I checked. Any idea? Should I do in my code sth like:

{{#if currentUser}}
  {{currentUser}}
{{else}}
  {{numberone.xxx}}
{{/if}}

shock · August 3, 2015, 1:19pm

well, that is based on that meteor kitchen code I expect, it does not select the chosen value form previous screen, but probably use the 1st value there.
You would probably need to manually need to add check there to add selected property to given customer

Something like

<select class="form-control" name="customerId" required="required">
              {{#each customers}}
                    <option value="{{_id}}" {{ #if isSelected _id }} selected {{ /if }}>
                        {{name}}
                    </option>
              {{/each}}
          </select>

Template.InvoicesNewNowaFaktura.helpers({
    numberone:function(){
        return CustomerCollection.findOne({ _id: Session.get('selectedCustomer')});
    }
    isSelected:function( id )({
      return ( id === Session.get('selectedCustomer'))
    })
});

bart93 · August 3, 2015, 1:33pm

I saw in my code, that I have sth like that:

<option value="{{_id}}" {{optionIsSelected ../invoice_edits.customerId _id}}>
    {{name}}
</option>

And it’s done by MeteorKitchen.
Now I want to take those info of my customer, but after that.

Sorry for that long code, but… hope you’ll understand.

<div class="form-group  field-customer-id" id="inputcustomer">
      <label for="customerId" class="boldy">
      TO
      </label>
        <div class="input-div ">
          <select class="form-control" name="customerId">
             {{#each customers}}
             <option value="{{_id}}" {{optionIsSelected ../invoice_edits.customerId _id}}>
                {{name}}
             </option>
             {{/each}}
          </select>
       </div>
     <div>
      <p>
        {{ klient.name}}; {{optionIsSelected ../invoice_edits.customerId klient.name}}
      </p>
       <p>
        {{ klient.business_address}}
       </p>
       <p>
        {{ klient.email }}
        </p>
    </div>

I’ve change “numberone” to “klient”. Do I need to add "{{optionIsSelected ../invoice_edits.customerId _id}" next to {{klient.xxx}} ?
of course that line "{{ klient.name}}; {{optionIsSelected ../invoice_edits.customerId klient.name}}" doesn not work.

shock · August 3, 2015, 1:41pm

well, depends what that _id in #each customers represents, cause it seems that to get collection _id or something like that you need to transform it using that ../invoice_edits.customerId helper from parent template

Or at least it looks that way from my point of view. I am not expert.

without seeing helpers for these it is kinda hard to comment

bart93 · August 3, 2015, 1:45pm

To be honest - there are NO helpers. For the same template, helpers look like that:

Template.InvoicesEditEditForm.helpers({
    "infoMessage": function() {
        return pageSession.get("invoicesEditEditFormInfoMessage");
    },
    "errorMessage": function() {
        return pageSession.get("invoicesEditEditFormErrorMessage");
    },
    klient:function(){
    return Customers.findOne({ _id: Session.get('selectedCustomer')});
    },
});

shock · August 3, 2015, 1:54pm

I dont know, first you pasted some code snippet.
Now you are pasting other version with some optionIsSelected helper… (with some strangely looking arguments, cause in spacebars they are evaluated as “helper1 helper2 data” as long as I know)

I am surrendering to this when facts are still changing.

bart93 · August 3, 2015, 7:27pm

Sorry for that.
I use the same code on tho sites - “new invoice” and “edit invoice”, so that’s why I used my “edit invoice” code now - where I want to see the data to change.

Everygthing is the same, so you don’t need to feel confused

{{optionIsSelected ../invoice_edits.customerId _id}}

That code give me the chosen _id of my customer, but… I want to take the data of that customer. Grrr! That’s akward!

bart93 · August 3, 2015, 7:36pm

<div class="input-div ">
  <select class="form-control" name="customerId">
    {{#each customers}}
      <option value="{{_id}}" {{optionIsSelected ../invoice_edits.customerId _id}}  {{#if isSelected _id}} selected {{/if}}>
        {{name}}
      </option>
    {{/each}}
   </select>
</div>

I added that and my console logged me that. I have never seen that error.

bart93 · August 3, 2015, 8:27pm

Sooo… I set a session in “new invoice” and that’s all. I need to set new page session in “edit invoice”? Or read the session from “new”? I need to load the data from the database (memory) and if that is checked - the data on screen should change as well.