使用按钮单击刷新Meteor页面 [英] Meteor Page Refreshing with Button Click

问题描述

我在这里关注了一些代码：
http://code.tutsplus.com/tutorials/real-time-messaging-for-meteor-with-meteor-streams--net-33409

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

我将其上传到网站： http://grcooper-wesolve-test.meteor.com/

推荐答案

当您单击表单内的按钮时，默认的浏览器行为是提交导致另一个HTTP请求的表单并重新加载页面。为了避免这种情况，您的事件处理程序需要显式阻止默认行为：

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

这篇关于使用按钮单击刷新Meteor页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！