MeteorJS: How to get id to load from collection - html

I'm trying to load an array (with simple text) and trying to load it up on the template whenever it is called. How do I get the ID from that specific item to get the array that I stored in it?
HTML Template:
<template name="commentMarker">
<div id="viewMarker">
<h3 id="markerTitle">{{markerName}}</h3>
<h6 id="markerCategory">{{markerCategory}}</h6>
<br>
<fieldset>
<legend>Description</legend>
<p>{{markerDescription}}</p>
</fieldset>
<form id="commentForm">
<fieldset>
<legend>Comments</legend>
<input type="text" id="markerId" name="idForComment" value={{markerId}}>
<textarea rows="3" cols="19" name="comment" id="commentArea" placeholder="Insert your comment here..."></textarea>
{{#each comments}}
<p id="oneComment">{{this}}</p>
{{/each}}
</fieldset>
<input type="submit" value="Comment" class="commentButton">
<input type="submit" value="Close" class="exitButton">
</form>
</div>
</template>
JS:
Template.commentMarker.helpers({
comments(){
alert(template.find("#markerId").value);
if(commentArray.length===0) return;
else return commentArray;
}});
This is where I insert the comment into the collection's item and it's working fine
Template.commentMarker.events({
'click .commentButton': function(e, template){
e.preventDefault();
var id = template.find("#markerId").value;
var comment = template.find("#commentArea").value;
Points.update(id, { $push: { comments: comment }});
commentArray = Points.findOne(id).comments;
template.find("#commentArea").value = ' ';
}
I tried with commentArray as a global variable which still is. But I'm at loss how I can get the Id from that specific item, I even put it's Id (with hidden display) in the form to actually be able to insert the comment. But it doesn't help me with showing the comments because I cannot seem to get to this field in the Template.helpers ...

Not entirely sure what you are trying to do. It's almost like as if you are displaying the comments right after you updated in to the collection. It looks like you are doing this entirely on local and not a online collection.
However, storing it as a session would work...or reactive var. Might not be the best solution tho. Basically replace commentArray = Points.findOne(id).comments; with:
Session.set('comments', Points.findOne(id).comments)
Then to get it out in helpers:
let commentArray = Session.get('comments')
It's not safe to use it all the time tho for sensitive data. Also try catch the findOne(id).comments because it does produce errors if it happen to not find it.
NOTE: If you are going to use Meteor.Methods, you cannot use Session. You have to return the id and find it in your helpers.

Related

Remove object from array typescript(Angular 2)

I just try to delete object from array in typescript, in angular 2.4.0, let me show the code, its my html file:
button type="submit" (click)="addAnotherLanguague()" >Add non native languague</button>
<li *ngFor="let languague of listOfLanguagues;">
<div class="form-item form-item--text">
<label class="label invisible">Years studied</label>
<input type="number" min="0" [(ngModel)]="languague.yearsStudied" name="years" placeholder="Years studied"/>
</div>
<button type="submit" (click)="removeLanguague(languague)" >Remove</button> // here you can see use of method
</li>
And there is component.ts
(...)
this.listOfLanguagues = new Array <LanguagueInformationData>();
}
addAnotherLanguague(){
this.listOfLanguagues.push(new LanguagueInformationData);
}
removeLanguague(languague){
this.listOfLanguagues.slice(this.listOfLanguagues.indexOf(languague), 1);
}
(...)
Adding works well, but I tried everything to remove and still dont know how to transfer that languague's reference, I dont want to use .pop, because I want to remove exactly this languague below which is button.
Can you help me?
[edit]
I got problem again with this code, because every time I try to add new languague(push) it clears my data on classes existing in array, do you know what can cause it ?
<li *ngFor="let languague of listOfLanguagues; let i = index">
<button type="submit" (click)="removeLanguague(languague, i)" >Remove</button>
removeLanguague(languague, index){
this.listOfLanguagues.splice(index, 1);
}
You have to use splice and not slice
this.listOfLanguagues.splice(this.listOfLanguagues.indexOf(languague), 1);
slice returns a section of an array, and splice removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements

How to bind data from datepicker to a regular ng-model

jsp page:
<label>Script ID:</label>
<input name="scriptId" type="text"
ng-model="selectedScript.scriptId"
ng-disabled="true"
value="{{selectedScript.scriptId}}"
/>
<form>
<h1>Date Pannel</h1>
<fieldset>
Pick a start date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerStart" ng-model="parent.startDate" onchange="document.getElementById('datePickerEnd').setAttribute('min', document.getElementById('datePickerStart').value)"><br><br>
Pick an end date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerEnd" ng-model="parent.endDate" ><br><br>
<button ng-disabled = "mode =='BROWSE'" ng-click="setDates()"
>Set Dates</button>
</fieldset>
</form>
controller.js
$scope.parent = {startDate:''};
$scope.parent = {endDate:''};
$scope.selectedScript.startDate = null;
$scope.selectedScript.endDate = null;
$scope.setDates = function setDates() {
$scope.selectedScript.startDate = $scope.parent.startDate.getTime();
$scope.selectedScript.endDate = $scope.parent.endDate.getTime();
myAppFactory.setDates($scope.selectedScript.startDate, $scope.selectedScript.endDate, $scope.selectedScript.src).success(function(data) {
$scope.selectedScript.src=data;
});
}
That's all the code i need to get some stuff done...
Now I have a table on my jsp page...
<tr
ng-repeat="s in scripts
ng-click="selectScript(s, $index)"
ng-class="getSelectedClass(s)">
<td>{{s.scriptId }}</td>
<td>{{s.fileName }}</td>
</tr>
controller.js
$scope.selectScript = function(script, index) {
if ($scope.mode != 'BROWSE')
return;
$scope.parent.startDate = $scope.selectedScript.startDate; <-- this part
$scope.parent.endDate.setTime = $scope.selectedScript.endDate; <--and this
$scope.selectedScript = script;
$scope.selectedRow = index;
};
When I save the script, the data in the database has startDate and endDate
that works...
My problem is that selectedScript as a model, in the code above, don't has any value in startDate and endDate...it's null (but the fields exist, and the database has the data I need)
But I need somehow to make it possible that parent.startDate and endDate are bound to the selectedScript's startDate and endDate...
Btw, i 1st tried to make the ng-model of the datepicker like selectedScript.startDate, but that didn't work...
Later I found out that the datepicker has it's own scope, and that's causing my problems...at least I believe so.
I just hope that I have made myself clear...
Can you help me?
I think your issue is because when you retrieve the data from the database, it passes it as a string, which isn't a format that the datepicker can read.
Essentially what you need to do is parse it as a Date attribute, to do this you can do;
$scope.parent.startDate = new Date($scope.selectedScript.startDate);
$scope.parent.endDate = new Date($scope.selectedScript.endDate);
Use this in the relevant places to parse as a date, or you can set up a watch to do it for you whenever the value is changed;
$scope.$watch('parent.startDate', function(startDate){
$scope.parent.startDate = new Date($scope.parent.startDate);
});
You can only use $watch for single values, or you can watch the whole object as 'parent'.
Hope it helps!

Why is my attempt to fetch and show MongoDB documents in my Meteor app crashing?

I'm trying to fetch and display some MongoDB documents in my Meteor app. I am trying to use the docs here as a basis for this.
The HTM I've added is this:
{{> placesLived}}
. . .
<template name="placesLived">
<table style="width:60%">
{{#each places}}
<tr>
<td>{{ts_city}}</td>
<td>{{ts_state}}</td>
<td>{{ts_yearin}}</td>
<td>{{ts_yearout}}</td>
</tr>
{{/each}}
</table>
</template>
...so that the entire .html file is now this:
<head>
<title>timeandspace</title>
</head>
<body>
<h1>A List of the Places I Have Lived</h1>
{{> addTimeSpaceForm}}
{{> placesLived}}
</body>
<template name="addTimeSpaceForm">
<form>
<label for="city">City</label>
<input type="text" name="city" id="city">
<br/>
<label for="state">State</label>
<input type="text" name="state" id="state">
<br/>
<label for="yearin">Year Arrived</label>
<input type="text" name="yearin" id="yearin">
<br/>
<label for="yearout">Year Departed</label>
<input type="text" name="yearout" id="yearout">
<br/>
<input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived">
</form>
</template>
<template name="placesLived">
<table style="width:60%">
{{#each places}}
<tr>
<td>{{ts_city}}</td>
<td>{{ts_state}}</td>
<td>{{ts_yearin}}</td>
<td>{{ts_yearout}}</td>
</tr>
{{/each}}
</table>
</template>
The Javascript I've added is this:
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
...so that the entire .js file is now this:
TimeAndSpace = new Mongo.Collection('timeAndSpace');
if (Meteor.isClient) {
Template.addTimeSpaceForm.events({
'submit form': function(event){
event.preventDefault();
var city = event.target.city.value;
var state = event.target.state.value;
var yearin = event.target.yearin.value;
var yearout = event.target.yearout.value;
Meteor.call('insertLocationData', city, state, yearin, yearout);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
Meteor.methods({
'insertLocationData': function(city, state, yearin, yearout){
console.log('attempting to insert a record');
TimeAndSpace.insert({
ts_city: city,
ts_state: state,
ts_yearin: yearin,
ts_yearout: yearout
});
}
});
}
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
My notion of what is supposed to happen here is that the "placesLived" template is added to the page, which template calls the "places" function in the js file -- which returns all the TimeAndSpace documents -- and finally the "placesLived" template loops through those returned documents, placing each field in a "td"
However, saving these changes (which restarts the Meteor app) wreaks havoc in the Meteor field: the command prompt cast the following aspersions (not to be confused with asteroids) on me:
The Meteor machine is obviously not amused. What have I fouled in my code / what needs to change?
Your helper is running on the client & server. Put an isClient around it & you'll be fine.
Anytime you get pretty purple/blue colors on the console it means something is wrong with your server. When it says Template is not defined that tells you the server can't find something called Template.

Form with select and text options

I have an HTML form that needs to collect information entered into a text box as well as options that are chosen from a set of dropdown menus. To give a little context, I am creating virtual machines that can be configured by the user on a web page. They must enter a name (arbitrary) and a hostmachine in two separate boxes in addition to selecting options from three different dropdown menus. Because I am working with clusters, there could be as many as 99 "rows" of dropdown menus representing different system configurations that will be a part of the cluster.
Is it possible (if so, advisable?) to have both the text fields and the dropdowns contained in one form? If not, how do I make sure that the submit button sends all the data to my Django server for processing as I need all of this information to ultimately come to the same place.
I currently have them in different forms, but just ignore this for now as it doesn't do anything at the moment. Also don't worry about the lack of dropdowns present in this code as the addSelect() JS function is fully functional. Just know that each added node is given a unique name (node1, node2, etc.) and goes into the div "nodes".
<body><b>Virtual Cluster Initialization</b><br></br>
<div id="container">
<div id="general">
<form method="POST" id="naming">Cluster name:<br>
<input type="text" name="cluster_name">
<br>
Host Machine:<br>
<input type="text" name="host_machine">
</form>
</div>
<form method="POST" id="node_config"></form>
<div id="nodes" form="node_config"></div>
<div id=node1">
<select name="node_type" id="node_type">Node Type</option>
(two options go here)
<select name="issp_version" id="issp_version>ISSP Version</option>
(7 or so options go here)
<select name="os" id="os">Operating System </option>
(about 20 options)
<button id="add" onclick="addSelect('nodes');">+</button>
</div>
<br></br><input type="submit"></input>
</body>
EDIT1: Added the an example dropdown for clarity. Would it be better to NOT make a new div for each node? I did this initially because it seemed like a good way to keep each node's configuration separate. Like I said, there could be up to 99 nodes, each with three dropdown menus.
Not really sure if I understand what you're asking. Showing us the code after your drop downs are added would help. Syntax wise, this wont work. Inputs should be inside forms and div doesn't have a form property.
Put everything into one form if you want it to all be in one post. If your dynamically adding new form elements you can use an array as element names.
How about something like this?
<script>
var nodeID = 0;
function addSelect() {
var html = "<div id='node_" + nodeID + "'>";
html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
html += "</div>";
document.getElementById('nodes').innerHTML += html;
nodeID++;
}
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
<div id="container">
<div id="general">
<div>Cluster name:</div>
<div>
<input name="cluster_name" type="text">
</div>
<div>Host Machine:</div>
<div>
<input name="host_machine" type="text">
</div>
</div>
<div id="nodes">
<div>Nodes</div>
<div id="node_0">
<select name="node_type[0]" id="node_type"><option>example</option></select>
<select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[0]" id="os"><option>Operating System </option></select>
</div>
<div id="node_1">
<select name="node_type[1]" id="node_type"><option>example</option></select>
<select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[1]" id="os"><option>Operating System </option></select>
</div>
</div>
<div>
<button type="button" id="add" onclick="addSelect();">+</button>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
Here is a JSfiddle to help you visualize what this does:
https://jsfiddle.net/fdss08w9/2/
Example of how you might use this in Django:
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# Get the number of nodes we added
for id, node_type in enumerate(form.cleaned_data['node_type']):
issp_version = form.cleaned_data['issp_version'][id]
os = form.cleaned_data['os'][id]
#do stuff with node_type, issp_version, os

Displaying info in form to update - Razor WebMatrix

People, i have been breaking my back searching the internet for the answer to this. I need to know the code needed to show user details in a form, so that they can change and update their info?
I've tried with the following code, but i am hitting a brick wall?
#{
Layout = "~/_template1.cshtml";
var db = Database.Open("StayInFlorida");
var OwnerID = WebSecurity.CurrentUserId;
var FirstName = ("SELECT FirstName from OwnerInfo WHERE OwnerID='OwnerID'");
<h1>My Details</h1>
<form method="post">
<input>#FirstName</input>
<input type="submit" value="Insert" class="submit" />
</form>
}
I'm sure this is really wrong, but help on the net about this is very limited.
Check out the awesome Getting Started tutorials on the ASP.NET Web Pages web site:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started
The links on the right go to all 9 parts of the article, including extensive details on adding and editing data in a database.
<form action="" enctype="multipart/form-data" method="post">
<input type="submit" value="#FirstName" class="submit" />
</form>
and then to update:
if(IsPost)
{
var FName = Request["FirstName"];
var insertQueryString = "UPDATE OwnerInfo Set FirstName=#0";
db.Execute(insertQueryString, FName);
}
and I don't think you need
<input>#firstName</input>