Dropdown. Data from checked option


#1

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 :slight_smile:

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?


#2

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


#3

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

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


#4
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 :smiley:
Used Session there, good old antipattern times
Use console.log there to debug if it is handled correctly.


#5

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?


#6

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


#7

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!


#8

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;

:confused:


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

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

#10

Yup. It works. Big thanks to you, guys :slight_smile:


#11

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


#12

I will read that, be sure! :smile:

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 :frowning:

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

Ughhh… :confused: 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}}

#13

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'))
    })
});

#14

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.


#15

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


#16

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')});
    },
});

#17

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.


#18

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 :smile:

{{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!


#19
<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.


#20

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.