Link between 2 collections in dropdown meteor

help
1

Hello,I’m new in Meteor… I have 2 dropdowns menu each one in several collection.first one: client name in Customers collection. second: address in Addresses. So, when I choose the client name in first dropdown the address of this client should show in the next dropdown.

I asked in stack overFlow,but the answer wasn’t enough.So if anyone could help me… I’ll be thankful.

2

Welcome!

Ah, the infamous chained selects. The stackoverflow answer was pretty good, but are you sure that you want those selects in two different pages/templates? typically those selects exist within the same page/template.

3

Thanks :grinning: .yes, but if you’ve another solution make it easier say i please

4

but notice that the both templates are in another template called ‘new order’

5

As I said typically those dropdowns co-exist in the same page/template. If they’re linked across pages/routes usually those values are maintained in a meteor session, global store (redux, mobx etc…) or the DB.

The reason why the stalk overflow answer is proposing reactive var is to create a global shared variable between the templates, however if they’re within the same template, then you can simply use a js variable within the template to store the the value of the first selection and pass that in the query for the second selection.

6

Thats what I thought, then why are they wrapped in templates? just put both selects in ‘new order’ template and use a shared JS variable.

7

this is the new order template…sorry i didn’t understand what you mean can you explain more please

<template name="newOrder">
  <div class="title">
    <h2>New Orders: </h2>
    <input type="button" class="new" value="&plus; New Customer">
  </div>
  <form class="newOrder">
    <p>{{> selectClient}}</p>
  <p>Mobile number:<br> <input type="tel" class="Mobile" placeholder="Enter your mobile number.."
    required></p>
  <p>Products:<textarea rows="3" cols="35"></textarea></p>
  <p>Address: {{> selectAddress}}</p>
  <p>Date:   <input type="date" name="date" ></p>
  <p>Status:
    <select>
      <option>Pending</option>
      <option>Preparing</option>
      <option> Delivering</option>
    </select></p>
  <input type="button" name="create" class="done" value="Done">
</form>
</template>
8

Well, you’ve two dropdowns (client & address), the address dropdown depends on the client.

When the user selects the client, somehow the address select needs to know which client has been selected. So the issue here is how to pass the data around. If each select is in different template you need to pass the select data between two templates. Since you’re just starting, I’m suggesting you move the code in the selectAddress and selectClient and insert it in the order page. This way you don’t have to worry about passing data across templates since both selects are in the same template (order template).

I hope that helps.

9

Okay, But i insert data in another template what i mean you want me to put the 2 templates where i insert data on them in one template…right or what!