标签：javascript jquery mongodb meteor refresh

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

构建聊天应用程序.我想添加另一个文本输入框,它也将项目发送到聊天室,但每当我按下另一个按钮创建.
换句话说,一个聊天框有两个输入框.

当我按下一个按钮时,它会起作用,当我按下另一个按钮时,它会刷新页面并删除之前聊天框中的所有内容.任何帮助都会很棒.

<!-- 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请求的表单并重新加载页面.为了避免这种情况,您的事件处理程序需要显式阻止默认行为：

Template.solBox.events({
  'click #solve': function(e) {
    e.preventDefault();
    // the rest of your code goes here
  }
});

标签：javascript,jquery,mongodb,meteor,refresh
来源： https://codeday.me/bug/20191003/1847328.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。