I was following some code here: http://code.tutsplus.com/tutorials/real-time-messaging-for-meteor-with-meteor-streams--net-33409
To build a chat app. I wanted to add another text input box that also sent items to the chatbox but whenever I press another button a created. In other words there are two input boxes for one chat box.
When I press one button it works, when I press the other button it refreshes the page and removes everything previously in the chatbox. Any help would be excellent.
<!-- Chat Box with chat messages and the input box -->
<template name='chatBox'>
<div id='messages'>
{{#each messages}}
{{>chatMessage}}
{{/each}}
</div>
<textarea id='chat-message'></textarea><br>
<button class='btn btn-primary' id='send'>Send Chat</button>
</template>
<!-- Template for the individual chat message -->
<template name='chatMessage'>
<div>
<b>{{user}}:</b> {{message}}
</div>
</template>
<template name="solBox">
<h3>Your problem is:</h3>
<strong>Write a structure definition in racket for a <em>vector</em> with fields <em>x</em> and <em>y</em>.</strong>
<br>
<br>
<form class="solution">
Solution:
<textarea id='solText'></textarea>
<button class='btn btn-primary' id='solve'>Send Solution</button>
</form>
</template>
//assign collection to the messages helper in chatBox template
Template.chatBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
//generate a value for the 'user' helper in chatMEssage template
Template.chatMessage.helpers({
"user": function(){
if(this.userId == 'me'){
return this.userId;
} else if (this.userId){
getUsername(this.userId);
return Session.get('user-' + this.userId);
} else {
return 'anonymous-' + this.subscriptionId;
}
}
});
//When send chat is clicked add the typed chat message into the collection
Template.chatBox.events({
"click #send": function(){
var message = $('#chat-message').val();
console.log(message);
chatCollection.insert({
userId: 'me',
message: message
});
$('#chat-message').val('');
//add the message to the stream
chatStream.emit('chat', message);
}
});
//Solutionbox stuff
Template.solBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
Template.solBox.events({
"click #solve": function() {
var solution = $('#solText').val();
console.log(solution);
chatCollection.insert({
userId: 'me',
message: solution
});
$('#solText').val('');
solStream.emit('sol', solution);
}
});
chatStream.on('chat', function(message){
console.log(message + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: message
});
});
solStream.on('sol', function(solution){
console.log(solution + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: solution
});
});
I uploaded it to the site: http://grcooper-wesolve-test.meteor.com/
When you click a button inside of a form, the default browser behavior is to submit the form which causes another HTTP request and reloads the page. In order to avoid this, your event handler needs to explicitly prevent the default behavior:
Template.solBox.events({
'click #solve': function(e) {
e.preventDefault();
// the rest of your code goes here
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.