Meteor Page Refreshing with Button Click

Question

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/

Answer 1

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
  }
});