So I've been running into this issue where I can't seem to get values from my templates to my view objects.
For instance, take this signin form:
App.AuthSignInView = Ember.View.extend
templateName: 'auth/sign_in'
email: null
password: null
submit: (event, view) ->
event.preventDefault()
App.Auth.signIn
data:
email: #get 'email'
password: #get 'password'
And this template:
<form>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{view Ember.TextField valueBinding="email"}}
</div>
<div class="controls">
{{view Ember.TextField type="password" valueBinding="password"}}
</div>
</div>
<button class="btn btn-inverse">Sign In</button>
</form>
When the view attempts to access the email and password properties on submit, they are still null. I'm sure I'm doing something simple wrong here, but I'm not sure what.
Although it's not a good practice to have your view's holding state for your app, everything logic related should be done in controllers, which is the default lookup place for values defined in your templates. But if you really need your values to be on your view you should prefix you value bindings with view.email and view.password in your templates to have it use the values on your view.
See here for a working jsbin using the view approach.
And here an example jsbin using the controller which is the recommended way.
Hope it helps.
Related
Im am currently working on my CRUD operations for the website. On the attached pictures you can see that im using the create form for 2 purposes. 1. to create a user and 2 to edit a user. My Query is made well but when im adding a hidden id to get a certain user for editing. I cannot press create user anymore because i passed the piece of code in at picture 1. (the line i selected)
But when i remove this piece of code i can create a user but when im trying to edit a user when removing this piece of code it just edits the user and then creates a new one with the edited content. Does anyone know how to fix this issue?
p.s. i made screenshots of the controller and the piece of code where it goes wrong.
Kind regards,
Sem
[Piece of code where it goes wrong][1] [User controller][2] [User
controller][3] [Data transfer objects][4] [CreateOrUpdate
query/function][5]
[1]: https://i.stack.imgur.com/5XxDe.jpg [2]:
https://i.stack.imgur.com/s5pqh.jpg [3]:
https://i.stack.imgur.com/2vLXM.jpg [4]:
https://i.stack.imgur.com/R2OBn.jpg [5]:
https://i.stack.imgur.com/ADyv5.jpg
As per your screenshot you are calling same action method from UI, in that case you need to validate id in your action method to see if it valid then its update otherwise it will be add. Scenario first time your page loaded id will be empty and second time if you load then it will have id and same you can use for edit.
Hope this solve your problem 👍
First, you can copy your code using '{}' in above toolbar, so it will be more convenient for others to test your code.
but when im trying to edit a user when removing this piece of code it just edits the user and then creates a new one with the edited content.
You can check the database for the passed model, if id exists, create one, but if not, remove the old one and create this new one.
Here is a demo with linq, you can check the logic and modify my code to yours:
public async Task<IActionResult> ProcessCreate(UsersDto user)
{
if (!_context.UsersDtos.Any(x => x.Id == user.Id)) //if not exist, create one directly
{
_context.Add(user);
await _context.SaveChangesAsync();
}
else { //else, delete old one and create new one
var therow = _context.UsersDtos.Where(x => x.Id == user.Id).FirstOrDefault();
_context.Remove(therow);
_context.Add(user);
await _context.SaveChangesAsync();
}
return RedirectToAction("Index");
}
In Create.cshtml,you can show the id:
<form method="post" asp-action="ProcessCreate">
<div class="form-group" hidden>
<label asp-for="Id" class="control-label"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="First_name" class="control-label"></label>
<input asp-for="First_name" class="form-control" />
<span asp-validation-for="First_name" class="text-danger"></span>
</div>
//.......
<div class="form-group">
<input type="submit" value="CreateOrEdit" class="btn btn-primary" />
</div>
Result:
I realy like this tools, because of their simplicity and compactness. But sometimes I face lack of plugins / snippets (my JS skills also pretty weak, usually I'm backend developer), so here's one of those cases:
For example, I have simple form like this one:
<div class="row">
<div class="six columns">
<label for="email">Contact email*</label>
<input v-model="email" class="u-full-width" type="email" id="email" placeholder="admin#exchange.com" name="email">
</div>
<div class="six columns">
<label for="date">Launch date*</label>
<input v-model="date" class="u-full-width" type="text" id="date" placeholder="June, 2014">
</div>
</div>
As you can see, I want to make this fields required, email input should be in email format, something like ***#***.***, date field can be anything.
What is the best way to realize it? Also I've found 3 Vue plugins, who's your favorite?
vue-validator
vee-validate
vue-form
Thanks for any examples/snippets/etc
Since you come from backend and are not expert with JS ( neither am I :D ) I suggest you do it yourself. You will learn more.
This is how I would do it:
<input name="email" v-model="email" #keyup="validateEmail()" />
... vue component or instance ...
data: function() { // if you are doing this on Vue instance and not component then data property will look differently but if in component it has to be a function that returns an object
return {
email: ""
}
},
methods: {
validateEmail: function() {
console.log(this.email)
// here you have access to email input as it changes so you can use either regex or substring or some other string manipulation to determine if the string satisfies your criteria
}
I want to include a Blaze template with an argument and then use the argument value in an event. The problem is that when I include the template a second time with a different argument I get the argument value from the first instance of the template in events.
Template:
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="input-field">
<label for="input-field">Upload file</label>
</form>
</template>
Include:
{> UploadFormLayoutImage layoutArea="area1"}}
{> UploadFormLayoutImage layoutArea="area2"}}
js:
Template.UploadFormLayoutImage.onCreated(function(){
this.currentArea = new ReactiveVar;
this.currentArea.set(this.data.layoutArea);
});
Template.UploadFormLayoutImage.helpers({
layoutArea: function() {
return Template.instance().currentArea.get(); //Returns the correct argument value for each instance of the template.
}
});
Template.UploadFormLayoutImage.events({
'change input[type="file"]': function(e, instance) {
e.preventDefault();
console.log(instance.data.layoutArea); //Allways returns 'area1'
}
});
What am I missing here? (This is my first Stackoverflow question. Please be gentle :))
What if you change the instance.data.layoutArea in your events method to this.layoutArea?
In my effort to make the code example easy to read i stripped away the part that caused the problem. I'm using a label for the input field and therefore the input field has an id and thats of course not ok when repeating the template.
I now use the layoutArea-helper as an id value and every thing works just fine.
<template name="UploadFormLayoutImage">
<form class="uploadPanel">
<input type="file" name="fileupload" id="{{layoutArea}}">
<label for="{{layoutArea}}">Upload file</label>
</form>
</template>
I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:
Controller:
$scope.primaryColor = "#325490";
Form Input:
<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">
</div>
</div>
Live Preview:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">
I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!
Remove {{}} and '' and it should work, like this:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">
I was just playing around a bit with Meteor.js when I ran into this strange issue, I have a form with two textfields, but somehow my event is not listening to the submit.
When I remove one textfield, everything works fine ...
Below is my template for the form:
<template name="new_timer">
<div class="timer timer--empty">
<form id="new_timer">
<input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
<input type="text" name="timer__description" class="timer__description" placeholder="Timer description">
</form>
</div>
</template>
And on the client side:
Template.new_timer.events({
'submit form': function(e) {
console.log('new timer');
e.preventDefault();
}
})
This doens't seem to work, however when I change my template to the following, it works
<template name="new_timer">
<div class="timer timer--empty">
<form id="new_timer">
<input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
</form>
</div>
</template>
Am I just overlooking something very basic here?
You might add an event like
'keyup form': function(e) {
if (e.keyCode === 13) {
// do something
}
}
Basically using a submit in a single page application is not adapted. In this kind of application everything is event based, you never reload a page so you never really 'submit' a form.
The 'form' tag becomes useless, most of developers (including me) are keeping it by habit but it is not required.
It is a bit late for an answer, I hope it can help somebody else!
I had similar problem, submit event does not work with more inputs without this:
<input type="submit" hidden="hidden">