CODEWITHSUNDEEP
meteordynamicmodal-dialogbootstrap-modal
Marcus Tewksbury
Marcus Tewksbury

Reputation: 65

Getting a meteor modal to be dynamic

I'm working w/ a modal template (maybe I shouldn't be?). On screen, I have a list of products. When a user clicks on a product, I want the modal to open w/ details of that given product.

Right now, what I'm trying to do is update the subscription of the modal. However, the OnCreate() and OnRender() are not firing when the modal opens. Right now the rendered, OnRender, created, and onCreated of the modal all fire when the parent template (the product list) is first opened. I need it to happen when a product is clicked and the modal is shown.

Am I attacking this wrong? Or do I just need to position my subscription somewhere else in the modal?

(adding code - very simple)

<template name="parent">
    ...
    <div class="row form-row">
        <div class="col-sm-12 text-right">
            <a class="btn btn-outline" type="button" id="remove">Remove</a>
        </div>
    </div>
    {{> productEditModal}}
</template>

<template name="productEditModal">
    <div class="modal inmodal" id="productEditModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
...

Template.parent.events({

...

"click #aEditProduct": function (e) {
    e.preventDefault();

    Session.set("productId", this._id);

    $('#productEditModal').modal('toggle');
    $('#productEditModal').modal('show');

Template.productEditModal.onRendered(function() {

    var self = this;
    self.autorun(function() {
        self.subscribe("products", Session.get("bid"), function() {
            var bProduct = BoardProducts.findOne(Session.get("productId")); // some reactive operation
            // do fun stuff with thing
        });
    });

});

Upvotes: 1

Views: 727

Answers (1)

tomsp
tomsp

Reputation: 1807

ok, here is how I would approach this, assuming you did meteor add peppelg:bootstrap-3-modal

  1. parent template: loop over products and display preview

    <template name="parent">
  {{#each products}}
    {{name}}
    {{pic}}
    etc...
    <a class="btn show-details" type="button">show details</a>
  {{/each}}
</template>

  2. create a details modal

    <template name="productDetailsModal">
  <div class="modal" id="productDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          Details for product {{name}}
          ...

  3. parent template helper to return products cursor:

    Template.parent.helpers({
  products() {
    return Products.find();
  },
})

  4. the event to show details modal for every product

    Template.parent.events({
  'click .show-details'() {
    Modal.show('productDetailsModal', this);
  },
})

I wrote this off the top of my head and did not test it. Let me know if it works for you.

Upvotes: 2

Related Questions