In the code below, the button labeled Add More is not functioning as expected. Ideally it should add the input value to the unordered list on the page. Instead, I get the following error:
Uncaught TypeError: document.queryselector is not a function
Page Code
<div id="root">
<input type="text" id="input" v-model="message"/>
<p>The value of the input is : {{message}}</p>
<ul>
<li v-for="n in names" v-text="n"></li>
</ul>
<input id="input1" type="text"/>
<button id="button"> Add More </button>
</div>
<script>
var app = new Vue ({
el : '#root',
data : {
message : 'Hello World!',
favourite : 'author',
names : ['Sunil' , 'Anis' , 'Satyajit']
},
});
document.queryselector('#button').addEventListener('click', function(event) {
var n = document.queryselector('#input1');
app.names.push(n.value);
n.value = '';
});
</script>
Its document.querySelector. Note the capital S in querySelector.
You also have a mispelling with addEventListner. It should be addEventListener.
Related
I am trying to use the last version of vuejs with Laravel 5.3 ! The idea I am trying to fulfill is make a component foreach user. So that I have all users listed and foreach one there is a button "edit" , when I click this button I should see the form to update this user.
So this is how I defined the component :
<script>
new Vue({
el: '.view-wrap',
components: {
user-view: {
template: '#user-view',
props: ['user']
}
},
data: {
users: <?php echo json_encode($users); ?>,
},
methods: {
showForm: function(number){
$('div.update-user-'+number).css({'display':'block'});
},
getClassName: function (index) {
return "update-user-"+index;
},
getUpdateUrl: function(id){
return '/users/update/'+id;
},
}
});
This is the template for the "user-view" which take a class name "updateClass" which contains the id of every user (for show/hide purposes), an "updateUrl" which is the url to update the user to bind it with each form action and finally the object user :
<template id="user-view">
<div>
<div class="updateclass">
<form class="form-horizontal" method="PUT" action="updateUrl">
{{ csrf_field() }}
<ul>
<li>
<label for="name"> Name </label>
<input type="text" name="name" :value="user.name">
</li>
<li>
{!! Form::submit('Save', ['class' => 'button-green smaller right']) !!}
</li>
</ul>
{!! Form::close() !!}
</div>
and This is finally how I call the template :
<user-view v-for="user in users" :updateclass="getClassName(user.id)" :user="user" :updateUrl="getUpdateUrl(user.id)"></user-view>
The issue then : it seems that for example [class="updateclass"] doesn't change the value of updateclass with the result of getClassName(user.id) as defined in template call that is binded to. When I try it with [:class="updateclass"] in the template I get : Property or method "updateclass" is not defined on the instance ...
and the same thing applies to all other binded attributes.
The syntax you are using to assign a class dynamically is wrong. from the getClassName method you have to return a object having className like this : {"className: true} , like following
getClassName: function (index) {
var tmp = {}
var className = 'update-user-'+index
tmp[className] = true
return tmp
}
Than you can assign it like following as is in documentation:
<div :class="updateclass"></div>
I have two Collection : a collection A which include array of B ids.
Template A :
<template name="templateA">
Name : {{name}} - {{_id}}
{{#each allBsOfThisA}}
{{> Bdetail}}
{{/each}}
Add B for this A
</template>
Note : in this templateA, I list all A and their detail informations. At bottom of the A, I putted a link to add a B.
Template of Bsubmit :
<div class="form-group {{errorClass 'nameOfB'}}">
<label class="control-label" for="nameOfB">nameOfB</label>
<div class="controls">
<input name="nameOfB" id="nameOfB" type="text" value="" placeholder="nameOfB" class="form-control"/>
<span class="help-block">{{errorMessage 'nameOfB'}}</span>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
On the Bsubmit script : I want to get the ID of A. I tried with template.data._id but it's not working :
Template.Bsubmit.events({'submit form': function(e, template) {
e.preventDefault();
console.log("template.data._id: " + template.data._id);
var B = {
name: $(e.target).find('[name=name]').val(),
AId : template.data._id
};
}
});
EDIT :
BSubmit's iron-router part :
Router.route('Bsubmit ', {name: 'Bsubmit '});
Neither the template nor the route does know about the A-instance of the other template/route.
So one solution would be to pass the id to the route, which allows you to fetch the instance or use the id directly:
Template:
<template name="templateA">
Name : {{name}} - {{_id}}
{{#each allBsOfThisA}}
{{> Bdetail}}
{{/each}}
Add B for this A
</template>
Route:
More information about passing arguments to a route
Router.route('/Bsubmit/:_id', function () {
var a = A.findOne({_id: this.params._id});
this.render('Bsubmit', {data: a});
});
Then you could use template.data._id in the event.
Another solution would be to embed the form into the other view, so you can access the data of the parent template in there (documentation of parentData).
I have set up an example in JSFiddle, http://jsfiddle.net/4stu2jg3/63/
In the first textbox if you add a non-numeric number and click the button is will show the required message. I would assume this should be showing the number message since there is a value?
In the second textbox if you delete the string and click the button is will show the number message. I would expect this to show the required message?
If you comment out the custom template everything works as I would expect it to. I am not sure what I am doing wrong?
<div id="test">
<div><input data-bind="value: first" /></div>
<div><input data-bind="value: last" /></div>
<input type="button" value="Validate" />
</div>
<script type="text/html" id="qmsKoValidationTemplate">
<span class="qms-val-panel" data-bind="visible: field.isModified() && !field.isValid(), text: field.error"></span>
</script>
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: false,
messageTemplate: "qmsKoValidationTemplate"
});
var t = function() {
var self = this;
self.first = ko.observable()
.extend({required: { message: 'Required' } })
.extend({number: { message: 'Number' } });
self.last = ko.observable('Del')
.extend({required: { message: 'Required' } })
.extend({number: { message: 'Number' } });
}
var s = new t();
ko.applyBindings(s, document.getElementById('test'));
$('input[type="button"]').click(function() {
//console.log(s.first(), s.last());
//console.log(ko.validatedObservable(s).isValid())
ko.validatedObservable(s).isValid()
});
Using a bit of debug, ko.isObservable(field.error) returns false which would explain the "not changing" aspect of the issue.
In looking closer, the custom binding validationMessage is used in the default template. Replacing the text binding with this custom binding appears to provide the desired behavior.
<span class="qms-val-panel" data-bind="visible: field.isModified() && !field.isValid(), validationMessage: field">
</span>
Modified fiddle
I have a konockout validation:
define([
"jquery",
"knockout",
"knockout.validation",
"inte/accdevice"
], function ($, ko, validation) {
return function (model, getzipcodeurl) {
$(function () {
ko.validation.registerExtenders();
function ViewModelprofile() {
var self = this;
self.firstName = ko.observable(model.FirstName).extend({ required: { message: errors} });
self.updating = ko.observable(true);
};
var vms = new ViewModelprofile();
vms.errors = ko.validation.group(vms);
ko.applyBindingsWithValidation(vms, document.getElementById('infosBlocEdit'), { messagesOnModified: true });
});
};
});
This is my HTML:
<input id="FirstName" name="FirstName" type="text" value="#Model.FirstName" data-bind="value: firstName" maxlength="19" />
<span class="errorMsg" data-bind="validationMessage: firstName"></span>
Actually when there is an error i show:<span class="errorMsg" data-bind="validationMessage: firstName">errors</span>
I need to personalize css on error and on success on each element validation:
On error i need to show this:<span class="invalidLine">
<span class="bble"> </span>
<span class="bbleTxt">errors</span>
</span>
and on succes:<span class="validLine"></span>
How can I do this?
If I understand the question correctly and from what I see you use knockout validation, you need something like:
<span class="invalidLine" data-bind="visible: !firstName.isValid()">
<span class="bble"> </span>
<span class="bbleTxt">errors</span>
</span>
<span class="validLine" data-bind="visible: firstName.isValid()"></span>
I am new to knockout.js. I am following this tutorial. It is working fine on knockout site but not for me. Error console is also not showing any error.
Below is my code
View:
Tasks
<form data-bind="submit: addTask">
Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
<button type="submit">Add</button>
</form>
<div >
<ul data-bind="foreach: tasks, visible: tasks().length > 0" id="testing">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
Delete
</li>
</ul>
</div>
View Model:
<script>
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}
function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel(),document.getElementById("testing"));
</script>
The problem is that the ko.applyBindings doesn't apply to all data-bind attributes. Move your "testing" id to a place where it covers all the HTML code with the relevant "data-bind" attributes.