CODEWITHSUNDEEP
javascripthtmlmeteor
Eman Emad
Eman Emad

Reputation: 77

pass data from 2 collections to 2 dropdown menu - Meteor

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.

NOTICE: I use 2 other template to insert data in both dropdowns. I didn't use any library & I use iron router

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>

<template name="selectClient">
  Client Name :
<select class="select">
  <option selected disabled>Choose client name</option>
  {{#each custom}}
  <option>{{clientName}}</option>
  {{/each}}
</select>
</template>
<template name="selectAddress">
  Address:
<select class="select" name="Choose the address">
  <option selected disabled>Choose the address</option>
  {{#each address}}
  <option>{{addressName}}</option>
  {{/each}}
</select>
</template>

main.js 

Template.selectClient.helpers({
    'custom': function(){
        return Customers.find();
    }
  });
  Template.selectAddress.helpers({
    'address': function(){
        return Addresses.find();
    }
});

Upvotes: 0

Views: 130

Answers (3)

Eman Emad
Eman Emad

Reputation: 77

I used ReactiveVar to solve the problem

    const clientAddress = new ReactiveVar()
      const clientOrder = new ReactiveVar()


    Template.selectAddress.helpers({
      'address' : function () {
        return Addresses.find({customerId: clientOrder.get()});
    }
    });
    Template.selectClient.events({
        'change .select-customer': function (event) {
        const addressValue = $(event.currentTarget).val();
        clientAddress.set({customerId: addressValue});
        }
    });

Template.selectClient.events({
  'change .select'(event, templateInstance) {
    // get the value using jQuery
    const value = templateInstance.$(event.currentTarget).val()
    // update the ReactiveVar
    selectedCustomer.set({ clientName: value })
  }
}); `

my html

<template name="selectClient">
Client Name :
<select class="select-customer" name="client1">
    <option selected disabled>Choose client name</option>
    {{#each custom}}
        <option value="{{_id}}">{{clientName}}</option>
    {{/each}}
</select>

Upvotes: 0

Casey Gibson
Casey Gibson

Reputation: 2863

The subscription you can pass in a reactive variable that gets passed to the publication which you'll then pass into the Mongo query. Every time the reactive var is updated, it updates the subscription.

Personally, I would avoid subscriptions as much as possible as every subscription you create, the server has to keep track of it in memory. In this scenario, the best thing to do is to use ReactiveVar's and Meteor Methods.

When the first drop down changes, use a "event" to do a Meteor call that gets the address data. When the address data is passed back from the Meteor call, save it into the ReactiveVar that's returning to the address helper. That should then update automatically while not bogging down the server.

Using this method you'll also be able to use loading dialogs while the Meteor call is waiting.

Upvotes: 0

Mozfet
Mozfet

Reputation: 369

You need to handle change events on client dropdown, in the handler find the address in the Addresses collection and select the address in the address using jQuery.

Upvotes: 1

Related Questions