meteormeteor-blazeflow-router
Template won't be rendered in Meteor FlowRouter
I need your help to figure out what's wrong with my code.
I have a HomeLayout devided to 3 sections;
- header
- side
- main
I have a conversation list ; it will be rendered in the main section and it contain a subsection called One_Conversation : when I click on conversation it's rendered
well right here it's ok : my problem that when I click on another conversation , the template won't be rendered
this is my code : /routes.js
FlowRouter.route('/conversation', {
name: 'Conversation',
action(){
BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list'});
}
});
FlowRouter.route('/conversation/:idConversation', {
name: 'oneConversation',
action(){
BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list', conversation: 'One_conversation'});
}
});
/HomeLayout.html
<template name="HomeLayout">
<div class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
{{> Header}}
<div class="app-body">
<div class="sidebar">
{{> Template.dynamic template=side }}
</div>
<main class="main">
<div class="container-fluid">
{{> Template.dynamic template=main }}
</div>
</main>
</div>
{{> Footer}}
</div>
</template>
/Conversation_list.html
<template name="Conversation_list">
<div class="messages">
////code
////code
////...
</div>
<conversation class="content">
{{> Template.dynamic template=conversation }}
</conversation>
</template>
and finnaly in my Conversation_list.events when I click to conversation
FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});
this is /OneConversation.html Template
<template name="One_conversation">
{{#with oneConversation}}
<div class="contact-profile">
{{#if isDefault}}
<img src="{{contact.profile_pic}}" alt="" />
<p>{{contact.first_name}} {{contact.last_name}}</p>
{{else}}
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
<p>{{contactLiveChat.first_name}} {{contactLiveChat.last_name}}</p>
{{/if}}
<div class="social-media">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
<div class="messages">
{{#each allMessagesOfConversation}}
<ul>
{{#if isFirst}}
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
<p>{{message}} </p>
</li>
{{else}}
<li class="sent">
<img src="{{contactM.profile_pic}}" alt="" />
<p>{{message}}</p>
</li>
{{/if}}
</ul>
{{/each}}
</div>
<div class="message-input">
<div class="wrap">
<input type="text" placeholder="Write your message..." />
<i class="fa fa-paperclip attachment" aria-hidden="true"></i>
<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
{{/with}}
</template>
and this is /OneConversation.js
import { Template } from ‘meteor/templating’;
import ‘./One_conversation.html’;
import {Meteor} from “meteor/meteor”;
var idConversation=’’;
var typeConversation=’’;
var token=’’;
var psid=’’;
Template.One_conversation.onCreated(function One_conversationOnCreated() {
idConversation = FlowRouter.getParam(“idConversation”);
// typeConversation= Session.get(‘typeConversation’);
//
//
// token= Session.get(‘token’);
// psid= Session.get(‘psid’);
// console.log("OneConversation psid: ",psid);
// console.log("OneConversation token: ",token);
//
// psid= FlowRouter.getParam(“psid”);
// console.log("OneConversation psid liveChat: ",psid);
Meteor.subscribe('allConversations');
Meteor.subscribe('allMessages');
Meteor.subscribe('allContacts');
Meteor.subscribe('allHotels');
Meteor.subscribe('allImMessenger');
});
Template.One_conversation.rendered = function () {
};
Template.One_conversation.helpers({
allMessagesOfConversation: function() {
return Messages.find({idConversation: idConversation},{sort: {createdAt: 1}}).map(function(message) {
if (message.typeMessage ==="1") {
message.isFirst=true;
return message;
}else {
return message;
}
});
},
oneConversation: function() {
return Conversations.findOne({_id: idConversation});
},
});
Template.One_conversation.events({
‘click .submit’(event,instance) {
const message = $(".message-input input").val();
if($.trim(message) === '') {
return false;
}
if(Session.get('typeConversation') ==='facebook'){
Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
if (er) {
console.log("send message problem");
console.log(er);
} else {
console.log("message sended successfully");
$(".message-input input").val('');
}
});
}else{
var newMessageInfo = {
idSender: Session.get('psid'),
message: message,
type: "liveChat",
createdAt: new Date(),
idConversation: Session.get('idConversation'),
status: "seen",
typeMessage: '1'
};
Meteor.call('insertMessages', newMessageInfo, function (er) {
if (er) {
console.log("insert problem");
console.log(er);
} else {
console.log("message added successfully", "success");
$(".message-input input").val('');
}
});
}
},
});
what am I doing wrong ?
Solution
Well it's fixed , my problem was in the idConversation ;
i set the id of the conversation in a session conversationList.events and get it in the oneConversation Helper so the code become like this
/Conversation_list.js
import { Template } from 'meteor/templating';
import './conversationList.html';
import {Meteor} from "meteor/meteor";
Template.conversationList.onCreated(function conversationListOnCreated() {
Meteor.subscribe('allConversations');
Meteor.subscribe('allMessages');
Meteor.subscribe('allContacts');
Meteor.subscribe('allHotels');
Meteor.subscribe('allImMessenger');
});
var psid="";
var token="";
Template.conversationList.rendered = function () {
};
Template.conversationList.helpers({
toUpperCase: function(str) {
return str.toUpperCase();
},
allMessagesOfConversation: function() {
return Messages.find({idConversation: Session.get('conversationId')},{sort: {createdAt: 1}}).map(function(message) {
if (message.typeMessage ==="1") {
message.isFirst=true;
return message;
}else {
return message;
}
});
},
oneConversation: function() {
return Conversations.findOne({_id: Session.get('conversationId')});
},
allConversations: function() {
return Conversations.find({idHotel: Hotels.findOne({contractId: Meteor.users.findOne({_id: Meteor.userId()}).profile.contractId})._id,archived:false},{sort: {createdAt: -1}}).map(function(conversation, index) {
if (index === 0) {
conversation.isFirst = true;
}
if(conversation.typeConversation === 'facebook'){
conversation.isDefault = true;
}
return conversation;
});
},
});
Template.conversationList.events({
'click #archive'(event){
Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {
if(err){
console.log(err);
}else{
FlowRouter.go('/conversation');
}
})
},
'click .contact'(event,instance) {
event.preventDefault();
if($("#contact_active").hasClass("active")){
$("#contact_active").removeClass("active");
$("#contact").addClass("active");
}else{
$("#contact").removeClass("active");
$("#contact_active").addClass("active");
}
Session.set('typeConversation',this.typeConversation);
if(this.typeConversation === 'facebook'){
const pageId = this.idPage;
console.log(pageId);
token = ImMessenger.findOne({pageId: pageId}).pageAccessToken;
Session.set('token', token);
psid = this.contact().idFacebook;
Session.set('psid', psid);
Session.set('conversationId', this._id);
}else{
psid = this.contactLiveChat()._id;
Session.set('idContactLiveChat', psid);
Session.set('conversationId', this._id);
}
FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});
Session.set('idOneConversation',this._id);
},
'click .profile-img'(event) {
event.preventDefault();
$("#status-options").toggleClass("active");
},
'click .expand-button'(event) {
event.preventDefault();
$("#status-options").toggleClass("active");
},
'click .status-options ul li'(event) {
event.preventDefault();
$("#profile-img").removeClass();
$("#status-online").removeClass("active");
$("#status-away").removeClass("active");
$("#status-busy").removeClass("active");
$("#status-offline").removeClass("active");
$(this).addClass("active");
if($("#status-online").hasClass("active")) {
$("#profile-img").addClass("online");
} else if ($("#status-away").hasClass("active")) {
$("#profile-img").addClass("away");
} else if ($("#status-busy").hasClass("active")) {
$("#profile-img").addClass("busy");
} else if ($("#status-offline").hasClass("active")) {
$("#profile-img").addClass("offline");
} else {
$("#profile-img").removeClass();
};
$("#status-options").removeClass("active");
},
});
and this is
/oneConversation.js
import { Template } from 'meteor/templating';
import './oneConversation.html';
import {Meteor} from "meteor/meteor";
var idOneConversation='';
var typeConversation='';
var token='';
var psid='';
Template.oneConversation.onCreated(function oneConversationOnCreated() {
idOneConversation = FlowRouter.getParam("idConversation");
Session.set('idOneConversation',idOneConversation);
Meteor.subscribe('allConversations');
Meteor.subscribe('allMessages');
Meteor.subscribe('allContacts');
Meteor.subscribe('allHotels');
Meteor.subscribe('allImMessenger');
});
Template.oneConversation.rendered = function () {
};
Template.oneConversation.helpers({
allMessagesOfConversation: function() {
return Messages.find({idConversation: Session.get('idOneConversation')},{sort: {createdAt: 1}}).map(function(message) {
if (message.typeMessage ==="1") {
message.isFirst=true;
return message;
}else {
return message;
}
});
},
oneConversation: function() {
return Conversations.findOne({_id: Session.get('idOneConversation')});
},
});
Template.oneConversation.events({
'click #archive'(event){
Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {
})
},
'click .submit'(event,instance) {
const message = $(".message-input input").val();
if($.trim(message) === '') {
return false;
}
if(Session.get('typeConversation') ==='facebook'){
Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
if (er) {
console.log("send message problem");
console.log(er);
} else {
console.log("message sended successfully");
$(".message-input input").val('');
}
});
}else{
var newMessageInfo = {
idSender: Session.get('idContactLiveChat'),
message: message,
type: "liveChat",
createdAt: new Date(),
idConversation: Session.get('idOneConversation'),
status: "seen",
typeMessage: '1'
};
Meteor.call('insertMessages', newMessageInfo, function (er) {
if (er) {
console.log("insert problem");
console.log(er);
} else {
console.log("message added successfully", "success");
$(".message-input input").val('');
}
});
}
},
});
- Twilio Voice and Meteor.js - Can’t Get req.body In WebApp.handlers.use()?
- Meteor server api using iron router returns HTML not the response
- In Meteor with Iron router how would I redirect to a thank you URL stored in the database after form submission
- Meteor: Iron route not to the right route
- Meteor GoogleMaps.load() not working on iOS with Iron
- How to delete Iron Router history
- Iron Router / Meteor - How can I pass data from the controller to the template?
- Meteor Rendering Templates with Functions
- Meteor Unable to Render Dynamic Templates
- Timeout error when running tests on Meteor demo app
- How to import bootstrap 5 javascript plugins into Meteor-Svelte project
- How to decrement like $dec?
- Meteor template Blaze how to return only first element of array
- this.unblock in a method if the method is non-blocking
- Why is it not possible to use spacebars to insert a style for an HTML element?
- connect.multipart() will be removed in connect 3.0 on meteor startup
- Helmet Rejects Localhost Even Though it is Included in Script-Src?
- mocha "describe" is not defined
- Setup for Helmet and ReportURi?
- Updating only certain sub documents in MongoDB
- how to prevent error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'
- Meteor JS global function
- MongoDB => findOne or find querying next object? ( Meteor / React )
- Cannot read properties of undefined (reading 'slice') when trying to run our meteor application in chrome only
- Error: ENFILE: file table overflow, scandir while run reaction on Mac
- Migrating from meteor 1.8.3 to 2.6
- MailChimp: Why is PUT method with javascript returning "Use PUT to insert or update list members"
- ionic sometimes not showing list items
- Why does my debugger stop visually at the wrong line?
- Puppeteer error: ProtocolError: Protocol error (Target.createTarget): Target closed