StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POTrying to create reply comment feature in meteor
text
Body
copied!<p>I am trying to make a reply to comment option, currently I have a input field with a text area which when submitted prints a name and a comment to the screen. Now I have created a second input and textarea which I want to also print to the screen ideally later on that input and text area will popdown with a onclick of a reply button beside a name and comment that are on the screen. But currently all I want to get to work is the second input and text area to print anything to the screen. I have basically copied the previous code and just changed the variable and function names adding a 1 after them now it doesnt work, it breaks at the point where I add <code>{{> message1}}</code> in the body. Nothing on the page even shows. Here is a link to the live site <a href="http://tuts.meteor.com" rel="nofollow">http://tuts.meteor.com</a> </p> <p>and here is the code I am using</p> <p><strong>HTML</strong></p> <pre><code><head> <title>tutorial</title> </head> <body> {{> messages}} {{> entry}} {{> entry1}} </body> <template name="messages"> {{#each messages}}  {{> message}} {{/each}} </template> <template name="message"> <p><strong>{{name}}:</strong>{{message}}</p> </template> <template name="entry"> <p><input type="text" id="name" placeholder="your name"></p> <p><textarea type="text" id="messageBox" placeholder="your message"></textarea></p> <p><input type="button" id="submit" value="submit"></p> </template> <template name="messages1"> {{#each messages1}}  {{> message1}} <a href="#">reply</a> {{/each}} </template> <template name="message1"> <p><strong>{{name}}:</strong>{{message1}}</p> </template> <template name="entry1"> <p><input type="text" id="name1" placeholder="your name"></p> <p><textarea type="text" id="messageBox1" placeholder="your message"></textarea></p> <input type="button" id="submit1" value="submit"> </p> </template> </code></pre> <p><strong>JAVASCRIPT</strong></p> <pre><code>Messages = new Meteor.Collection('messages'); Messages1 = new Meteor.Collection('messages1'); if (Meteor.is_client){ ////////// Helpers for in-place editing ////////// // Returns an event_map key for attaching "ok/cancel" events to // a text input (given by selector) var okcancel_events = function (selector) { return 'keyup '+selector+', keydown '+selector+', focusout '+selector; }; // Creates an event handler for interpreting "escape", "return", and "blur" // on a text field and calling "ok" or "cancel" callbacks. var make_okcancel_handler = function (options) { var ok = options.ok || function () {}; var cancel = options.cancel || function () {}; return function (evt) { if (evt.type === "keydown" && evt.which === 27) { // escape = cancel cancel.call(this, evt); } else if (evt.type === "keyup" && evt.which === 13) { // blur/return/enter = ok/submit if non-empty var value = String(evt.target.value || ""); if (value) ok.call(this, value, evt); else cancel.call(this, evt); } }; };//added as test Template.entry.events = {}; /* Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({ ok:function(text, event){ var nameEntry = document.getElementById('name'); if(nameEntry.value != ""){ var ts = Date.now() / 1000; Messages.insert({name: nameEntry.value, message: text, time: ts}); event.target.value = ""; }//if statment ends } }); */ Template.entry.events['click #submit'] = function() { var nameEntry = document.getElementById('name'); if(nameEntry.value != ""){ var ts = Date.now() / 1000; Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts}); } } Template.entry.events['click #submit1'] = function() { var nameEntry1 = document.getElementById('name1'); if(nameEntry1.value != ""){ var ts = Date.now() / 1000; Messages1.insert({name: nameEntry1.value, message1: $('#messageBox1').val(), time: ts}); } } Template.messages1.messages1 = function () { return Messages1.find({}, { sort: {time: -1} }); }; Template.messages.messages = function () { return Messages.find({}, { sort: {time: -1} }); }; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload