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

问题描述

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

构建聊天应用程序.我想添加另一个文本输入框，该框也将项目发送到聊天框，但是每当我按下另一个按钮时都会创建一个.也就是说一个聊天框有两个输入框.

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

<模板名称='chatBox'><div id='消息'>{{#每条消息}}{{>chatMessage}}{{/每个}}

<textarea id='chat-message'></textarea><br><button class='btn btn-primary' id='send'>发送聊天</button><!-- 个人聊天消息的模板--><模板名称='chatMessage'><div><b>{{用户}}:</b>{{信息}}

<模板名称=solBox"><h3>您的问题是:</h3><strong>在球拍中为<em>向量</em>写一个结构定义.带有字段 <em>x</em>和<em>y</em>.</strong><br><br><form class="解决方案">解决方案:<textarea id='solText'></textarea><button class='btn btn-primary' id='solve'>发送解决方案</button></表单>//将集合分配给chatBox模板中的消息助手Template.chatBox.helpers({消息":函数(){返回 chatCollection.find();}});//为chatMEssage模板中的'user'助手生成一个值Template.chatMessage.helpers({用户":函数(){if(this.userId == '我'){返回 this.userId;} else if (this.userId){getUsername(this.userId);return Session.get('user-' + this.userId);} 别的 {返回 '​​anonymous-' + this.subscriptionId;}}});//当点击发送聊天时，将输入的聊天消息添加到集合中Template.chatBox.events({点击#send":函数(){var message = $('#chat-message').val();控制台日志(消息)；chatCollection.insert({用户 ID:'我'，消息:消息});$('#chat-message').val('');//将消息添加到流中chatStream.emit('chat', message);}});//解决方案箱的东西Template.solBox.helpers({消息":函数(){返回 chatCollection.find();}});Template.solBox.events({点击#solve":函数(){var 解决方案 = $('#solText').val();控制台日志(解决方案)；chatCollection.insert({用户 ID:'我'，消息:解决方案});$('#solText').val('');solStream.emit('sol', 解决方案);}});chatStream.on('chat', function(message){console.log(message + "on");chatCollection.insert({userId: this.userId,//获取发件人的userIdsubscriptionId: this.subscriptionId,//发送方订阅id消息:消息});});solStream.on('sol', function(solution){控制台日志(解决方案+开")；chatCollection.insert({userId: this.userId,//获取发件人的userIdsubscriptionId: this.subscriptionId,//发送方订阅id消息:解决方案});});

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

解决方案

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

Template.solBox.events({'点击#solve':函数(e){e.preventDefault();//其余代码放在这里}});

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

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