In my Vue.js application I want to post form data to my Node.js/MongoDB Backend.
This is my source code: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobEdit.vue
JSON for my job entry: http://t2w-api.herokuapp.com/jobs/591c09a55ba85d0400e5eb61
Relevant code for my question:
HTML:
<div class="row">
<input type='text'
:name="'qual'+index"
v-model="qualifications[index]">
<button #click.prevent="removeQualifiaction(index)">X</button>
</div>
Methods:
onChange(value, $event){
if (!this.job.xmlOnline)
this.job.xmlOnline = []
const index = this.job.xmlOnline.findIndex(v => v == value)
const checked = $event.target.checked
if (checked && index < 0)
this.job.xmlOnline.push(value)
if (!checked && index >= 0)
this.job.xmlOnline.splice(index, 1)
}
removeQualifiaction() {
this.qualifications.splice(this.qualifications.index, 1);
}
Sending the form data with submit button on form end:
editJob() {
let job = Object.assign({}, this.job);
job.qualifications = this.qualifications;
job.responsibility = this.responsibility;
this.$http.post('https://t2w-api.herokuapp.com/jobs/' + this.$route.params.id, job).then(response => {
console.log(response);
}, response => {
console.log(response);
});
}
My problems now:
When I edit a "Job", I have a list of "qualification items", that are input fields in my form.
Clicking the "delete" button results that the first input gets deleted, not the one I am clicking. Done with #thanksd answer.
How do I add a button and method to add a new input field and to append it to my job.qualifications?
In my JobAdd.vue implemented, to add a new entry to job.qualifications, like this:
<a #click.prevent="addQualification">+</a>
addQualification() {
this.qualification.push({ text: '' });
}
addJob() {
let job = Object.assign({}, this.job);
job.qualifications = this.qualification.map(q => q.text);
this.$http.post('https://t2w-api.herokuapp.com/jobs/', job).then(response => {....
Full source for my JobAdd.vue: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobAdd.vue
this.qualification.push({ text: '' }); doesnt work obviously not in my JobEdit.vue when there are already strings in my job.qualifications.
Change your removeQualifiaction method to use the index being passed in:
removeQualifiaction(index) {
this.qualifications.splice(index, 1);
}
Related
I'm creating a web app that allows the user to update their status and location.
I have a data list table on SharePoint with the user's name, email address, status (for example: online, offline, or busy), location (which is a select field), along with other fields.
The web app is just 2 different select fields. Which allows the user to update his status and location.
When the user accesses the page on componentDidMount() I'm getting the user's email addresses (since he's logged into SharePoint) and then filtering the data list array to view the element for his information (so looking for his email address in the MyList. The part I'm stuck at now is updating the MyList list with the selected response that the user selected.
Using PnP-JS i found this should be possible here are two links showing the update() function.
https://github.com/SharePoint/PnP-JS-Core/wiki/Basic--Operations
https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items
My code found here:
export default class SigninLocationWebpart extends React.Component<ISigninLocationWebpartProps, {Status: string, Location: string, userName: string, getEmail: string, selectedUser: any}> {
constructor(props) {
super(props);
this.state = {
Status: 'Online',
Location: 'New York',
userName: '',
getEmail: '',
selectedUser: {},
};
this.handleChangeStatus = this.handleChangeStatus.bind(this);
this.handleChangeLocation = this.handleChangeLocation.bind(this);
}
handleChangeStatus(event) {
const { value } = event.target;
this.setState({ Status: value });
}
handleChangeLocation(event) {
const { value } = event.target;
this.setState({ Location: value });
}
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(1).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
})
})
//This gets the list of all all items in the list
pnp.sp.web.lists.getByTitle("MyList").items.get().then((items: any[]) => {
console.log(items);
//Comparing email from sign in user and filtering items array to get that element
var compareEmail = this.state.getEmail;
console.log(compareEmail);
let selectedUser = _.filter(items, function(item) {
return item.Email_x0020_Address.toLowerCase() === compareEmail.toLowerCase();
});
console.log(selectedUser);
});
}
}
public render(): React.ReactElement<ISigninLocationWebpartProps> {
return (
<div className={ styles.signinLocationWebpart }>
<h3>Hello {this.state.userName}</h3>
<form onSubmit={this._onUpdate}>
<label>
Check In our Out
</label>
<select name="Status" value={this.state.Status} onChange={this.handleChangeStatus}>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
<option value="Busy">Busy</option>
</select>
<label>
Location
</label>
<select name="Location" value={this.state.Location} onChange={this.handleChangeLocation}>
<option value="New York">New York</option>
<option value="Michigan">Michigan</option>
<option value="Los Angeles">Los Angeles</option>
</select>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
First of all, instead of getting all items in the List, and then filtering for the current user, you should get only the item(s) for the current user to begin with. Once you list gets large, you would be performing a lot of overhead by retrieving all items.
Secondly, and what you allude to in your comments, is that you need to specify the ID of the item to update. So, in your componentDidMount, after you get the List Item for the current user, save that Item in your state.
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
});
pnp.sp.web.lists.getByTitle("MyList").items.filter("Email_x0020_Address eq '" + this.state.getEmail + "'").top(1).get().then((items: any[]) => {
if (items && items.length) {
this.setState( { selectedUser: items[0] } );
}
});
})
}
}
Then at update time, you can use the ID of that item to save it.
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(this.state.selectedUser.ID).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
Additionally, you'll want to make sure you are binding your submission handler just like you are doing for your onchange handlers in your constructor:
this._onUpdate = this._onUpdate.bind(this);
I will also add, that unless you've make sure to pre-populate the List with all possible users, and will always keep it updated with new users, it would be best in to put a check in your _onUpdate that if this.state.selectedUser == null || this.state.selectedUser.ID == null then you should create a new item (and add the new item to your this.state.selectedUser), instead of updating.
Im receiving data from the Marvel api and use ngFor to display the data.
Before displaying the data I need to make some changes to it.
If the name doesn't exist or the description is empty I want to show a message.
Where is the best place to manipulate data and how can I do this?
I tried something like this in my comic view after the subscribe but it didnt work.
If (stuff.data.results['0'].title == ''){
stuff.data.results['0'].title == 'try gain'}
my service.ts
getComics(searchterm): Observable<any> {
const search: URLSearchParams = new URLSearchParams();
search.set('titleStartsWith',searchterm);
search.set('ts', '1'); // time stamp
search.set('apikey', 'key');
search.set('hash', 'key');
let obs: Observable<any> = this.http
.get(ComicService.BASE_URL, new RequestOptions({search}))
.map( (res) => res.json());
console.log("obj " + obs)
return obs;
}
my comic-view.ts
searchComics(event): boolean {
this.error = 'fout'
this._comicService.getComics(this.searchterm)
.subscribe(
stuff => {
this.stuff = stuff; console.log('title: ' + stuff.data.results['0'].title + ' description:' +
stuff.data.results['0'].description);
},
error => { this.error = error; }
);
return false;
}
comis.html
<ul>
<li *ngFor=" let x of stuff?.data?.results ">
<label> Title:</label> {{x.title}}
<br>
<label> description: </label> {{x.description}}
<br>
</li>
</ul>
In running into a problem where I have a repeating DIV on my page, but I am getting duplicates when I add new rows. So for example if I have Row A and and Row B, and then I click "Add" to add a new row, I would like to see 3 rows. However I get 5 rows, Row A, Row B, then Row A, Row B and the new Row C.
The page initializes fine, will display only the 3 rows, but what am I doing wrong with the "Add" of new rows...It appears to be not refreshing as I would like?
Any help would be great!
Thanks!
My ng-repeat looks like this:
<div ng-repeat="infant in Infants" class="list card">
<h2>{{infant.name}} - {{infant.ID}}</h2>
<a class="item item-icon-left assertive" href="#"> <i class="icon ion-ios-analytics"></i> Last measurement 188mm / 190mm (size 5.5) </a>
</div>
The initialisation of Infants above is achieved with a global array:
$scope.Infants = [];
...
if (firebaseUser) {
//set the user and infant list variables
$log.log("Signed in as:", firebaseUser.uid);
var usersRef = firebase.database().ref('users');
loggedInUser = usersRef.child(firebaseUser.uid);
loggedInUser.on('value', snapshot => {
$log.log("UserDetails:", snapshot.val());
});
InfantList = loggedInUser.child('infantList');
InfantList.on('value', snapshot => {
$log.log("InfantDetails:", snapshot.val());
angular.forEach(snapshot.val(), function (value, key) {
$log.log("val", value);
$log.log("key", key);
$scope.Infants.push(value);
});
});
}
Then the function call when the ""Add" button is clicked looks like this:
$scope.AddProfile = function () {
// get the firebase location
var newInfantRef = firebase.database().ref('/users/' + firebaseUser.uid + '/infantList/');
// create the element
var newRef = newInfantRef.push();
//add attributes
var newItem = {
riskLevel: '1.0'
, ID: newRef.key
, name: "Reggie"
, gender: "M"
, DOB: "2015-02-01"
};
// Write the new infant.
var newInfant = {};
newInfant['/' + newRef.key + '/'] = newItem;
newInfantRef.update(newInfant);
}
In your InfantList.on() you are pushing again all values to the array when a new value is added.
To solve this try:
InfantList.on('child_added', snapshot => {
...your things...
}
This only push the new value to the array when the new value is added.
I'm pretty new to React, but liking it so far. I'm building a large application, which is going well, except I've run into an issue. I'm building a list of responses to questions, and they can be deleted, but I also want to have a "Cancel" button so all unsaved changes can be reverted. What is confusing me is the cancel button reverts to the initial state for the name value, but not the responses. If I add in some console logging to the response deletion script, I would expect to see log lines 1 & 2 match, with 3 being different. However, I'm seeing that 1 is the original, but 2 & 3 match. Why is state being updated before I call setState, and why does updating state seem to update the my initial props?
EDIT: I added a jsFiddle
getInitialState: function() {
return {
name: this.props.question.name,
responses: this.props.question.responses,
};
},
handleCancelButtonClick: function(e) {
this.replaceState(this.getInitialState());
},
handleNameChange: function(e) {
this.setState({name: e.target.value});
},
handleResponseDeletion: function(e) {
var resp = this.state.responses;
var from = Number(e.target.value);
console.log(JSON.stringify(this.state.responses));
resp.splice(from, 1);
console.log(JSON.stringify(this.state.responses));
this.setState({responses: resp});
console.log(JSON.stringify(this.state.responses));
},
render: function() {
var key = "mp" + this.props.question.name;
var resp = [];
if (this.state.responses) {
this.state.responses.forEach(function(response, i) {
var rkey = "r_" + this.props.question.name + "_" + i;
resp.push(<ModalResponse response={response} key={rkey} value={i} deleteResponse={this.handleResponseDeletion} />);
}.bind(this));
}
return (
<layer id={this.props.question.name} style={questionModal} key={key}>
<h2>Edit {this.state.name}</h2>
<button onClick={this.handleCancelButtonClick}>Cancel</button>
<div class='form-group'>
<label for='client_name' style={formLabel}>Question Name:</label><br />
<input type='text' style={formControl} id='question_name' name='question_name' value={this.state.name} onChange={this.handleNameChange} required />
</div>
<div class='form-group'>
<label style={formLabel}>Responses:</label><br />
<ul style={responseList} type="response_list" value={this.props.qname}>
{resp}
</ul>
</div>
</layer>
);
}
});
The problem is that splice modifies original array. It means the one that belongs to the original question. So when you call getInitialState from within handleCancelButtonClick you get modified array.
To avoid this you need to somehow clone original data inside getInitialState. For example
getInitialState: function() {
//copy array and responses
const copy = resp => ({...resp})
return {
name: this.props.question.name,
responses: this.props.question.responses.map(copy)
};
}
Here's what I did to fix the issue:
handleResponseDeletion: function(e) {
var resp = []
var from = Number(e.target.value);
this.state.responses.forEach(function(res, i) {
if (i != from) {
resp.push(res);
}
});
this.setState({responses: resp});
},
i am using kendo ui tree view with check box
i want the check box's id when it is getting unchecked
this is kendo ui mine code
// var homogeneous contains data
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: false,
template:"# if(!item.hasChildren){# <input type='hidden' id='#=item.id#' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' id_a='#= item.id #' name='c_#= item.id #' value='true' />#}else{# <div id='#=item.id#' style='display:none;' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#",
},
dataSource: homogeneous,
dataBound: ondata,
dataTextField: "value"
});
function ondata() {
//alert("databound");
}
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
in this code i am not getting checkbox's id when it is unchecked so i have tried this
jquery code
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
this code is only working in js fiddle but not in my case http://jsfiddle.net/NPUeL/
if i use this code then i can get the number of count but i dont know how to use it
var treeview = $("[data-role=treeview]").data("kendoTreeView");
treeview.dataSource.bind("change", function (e) {
if (e.field == "checked") {
console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
}
});
what changed i need to do in data source so i can get id
thanks in adavance
If you want to get the id you might do:
$('input[type=checkbox]').click(function (e) {
var li = $(e.target).closest("li");
var id = $("input:hidden", li).attr("id");
var node = treeView.dataSource.get(id);
if (node.checked) {
console.log('checked');
} else {
console.log('not checked');
}
});
What I do in the event handler is:
find the closest li element that is the node of the tree that has been clicked.
the id is in an HTML input element that is hidden (this is the way that I understood that you have stored it).
Get item from dataSource using dataSource.get method.
See your code modified and running here
i made the small change and its working now
function ondata() {
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
}