How to show singlePost Id in a modal with flow router (and not in a new page)

help
1

I have created the routes and the patFor to be able to reach mysite.com/post/id but instead of opening it in a new page I want this to be opened inside a modal and can’t find how to do it with blaze and flow-router

The current way I link to the postId page is with the meteor add arillo:flow-router-helpers package:

<a href="{{pathFor '/post/:id' id=_id}}">Link to post</a>

but this will take me to my singlePost blaze template…I want that template to be opened in a modal instead of being a new page…so I changed that to :

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    {{#if Template.subscriptionsReady}}
        {{#with thisPost}}
            <li>{{title}}</li>
            <li>{{country}}</li>

        {{/with}}
    {{else}}
        <p>Loading...</p>
    {{/if}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

but how do I toggle that specific post._id with the modal and its data context?

thanks

2

You could return the post._id in a session variable and return it using a helper function.
The return could be placed in your href, which would call a new modal.

1 Like
3

Thanks! I got the same answer on stackoverflow but still couldn’t understand it much, could you provide some example to get me going on that? I am not sure how to return the specific post._id each time

I have about 1000 documents in the collection

4

I’d do something like:

<template name="listOfItems">
  {{#each item}}
    <a href="#" class="item-link" data-id="{{_id}}" />{{title}}</a>
  {{/each}}
</template>

<template name="viewItemModal">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    {{#if Template.subscriptionsReady}}
        <li>{{title}}</li>
        <li>{{country}}</li>
    {{else}}
        <p>Loading...</p>
    {{/if}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</template>

Template.listOfItems.events({
  'click .item-link': function(e,t){
    e.preventDefault();
    var itemId = e.currentTarget.dataset.id;
    var item = Items.findOne({_id:itemId});
    var title = item.title;
    var country = item.country;
    Modal.show('viewItemModal', {title:title, country:country});
  }
});

One problem that you may run into (as I did) is that you may have to look at redefining your pub/sub, making the data accessible onclick, rather than on a route load, as this solution assumes you have access to the entirety of the collection/sub in question…

Also, this package is what I use to pass the params to the modal…

1 Like
5

This worked perfectly! , I have only one sub to all the collection so it worked out of the gate based on your code, spent all day trying to figure this one out lol, thanks

6

Cool, glad it helped!

1 Like