Bootstrap modal with custom route in Meteor

Question

I'd like to display user settings in a modal and the url to have /settings/

Not sure how to set it up. Is it done in the router setup or is it done in the click event on the settings link?

I have header.html :

<!-- nav stuff -->
<li><a href="{{pathFor 'userSettings'}}" >Settings</a></li>

header.js:

Template.header.events({
  'click #settings-link': function(event){
    event.preventDefault();
    if (!Meteor.user()) {
      Router.go('sign-in');
    } else {
      $("#userModal").modal("show");
    }
  }
});

userSettings.html :

<template name="userSettings">
  <div class="modal fade" id="userModal">
    <!-- Stuff -->
  </div>
</template>

routes.js:

this.route('userSettings', {path: '/settings'});

It worked on my end and now I see you edited the source. I'll see what I can do with your current source. — Chip Castle, Jan 14 '15 at 01:02
@ChipCastle thanks! like i said, i want the modal to popover let's say my `/` page content and the url to change to `/settings` just so there is no confusion — 416serg, Jan 14 '15 at 01:22
Yeah, I think that is a bit unusual, because for the modal to show, the template will need to be rendered. So I think you should either have a route that redirects to a conventional settings page (without a modal), or simply click a link that opens a modal - not both. In other words, why change to another route/page when you won't see what's behind it because the modal will be overlaid on top? — Chip Castle, Jan 14 '15 at 01:48
@ChipCastle the only reason i got the idea for that was from stripe's dashboard settings. it pops up as a modal and the url changes. maybe Meteor isn't there just yet — 416serg, Jan 14 '15 at 04:50
I just logged into my stripe account and see what you mean. However, their approach doesn't look like a typical route change which would be handled with iron-router, but instead I **suspect** they are just updating the browser's address bar manually. I would suggest getting the modal to work first before thinking about updating the browser's address bar. I'll see if I can find anything on the other part. — Chip Castle, Jan 14 '15 at 17:55
It looks like there is some info on this post as well, http://stackoverflow.com/questions/22062342/pushing-new-state-for-same-url-in-iron-router, so you might want to try this: https://github.com/devote/HTML5-History-API. — Chip Castle, Jan 14 '15 at 17:57

score 1 · Answer 1 · edited May 23 '17 at 12:31

I would do something similar to what's shown on this post, with some modifications:

1. Create a route for settings:

this.route('settings', {path: '/settings'});

2. Create a template for that route, such as under client/views/settings.html.

3. Put the templates into that file, but notice how the calls to projectImageItem and projectImageModal are not in the body, but instead inside the settings template:

<template name="settings">
  {{> projectImageItem}}
  {{> projectImageModal}}
</template>

<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
  <div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Big Image</h4>
        </div>
        <div class="modal-body">
          <img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
        </div>
      </div>
    </div>
  </div>

4. Put the event handling code into the js file, such as client/views/settings.js:

if (Meteor.isClient) {
  Template.projectImageItem.events = {
    "click .open-modal" : function(e,t) {
      e.preventDefault();
      $("#projectImageModal").modal("show");
    }
  };
}

Bootstrap modal with custom route in Meteor

1 Answers1