I'm trying to create form which would simplify adding of the products which are not yet registered to nomenclatures for my small shop. For this I've created module with following form:
<t t-extend="ConfirmPopupWidget">
<t t-jquery="p.body" t-operation="replace">
<div class="product-container">
<div id="search_row" style="padding-bottom: 12px;padding-top: 11px;border-bottom: 1px solid gray;">
<label>Barcode </label>
<input style="height: 18px;" type="text" id="is_ean13" class="search" placeholder="EAN13 Barcode"/>
</div>
<div class="form-group">
<label for="is_name" class="col-sm-2 control-label">Product Name </label>
<div class="col-sm-10">
<input type="text" id="is_name" class="form-control" placeholder="Product name" style="height: 32px;background-color:#D2D2FF"/>
</div>
</div>
<div class="form-group">
<label for="is_sale_price" class="col-sm-2 control-label">Sale price</label>
<div class="col-sm-10">
<input type="text" id="is_sale_price" class="form-control" placeholder="Sale Price"/>
</div>
</div>
<div class="form-group">
<label for="is_internal_reference" class="col-sm-2 control-label">Internal Reference</label>
<div class="col-sm-10">
<input type="text" id="is_internal_reference" class="form-control" placeholder="Internal Reference"/>
</div>
</div>
</div>
</t>
</t>
I want to fill up ean13 barcode field "is_ean13" from barcode scanner, which is already used by POS interface, but could not make it working.
odoo.define('instant_sale.add_product', function (require) {
"use strict";
var bus = core.bus;
// bind event handler
bus.on('barcode_scanned', this, function(barcode) {
this.scan(barcode);
})
});
As it is written in https://media.readthedocs.org/pdf/odoo-development/latest/odoo-development.pdf page 38, but it seems I'm missing something, because I can't catch any event.
How can I catch barcode events in POS interface. Any help is highly appreciated. Thank you!
When the barcode scanner scans something, it will write it like if it was a keyboard then hit enter. This is how you get the information on a scan.
Because of this, you need to put the focus on the field input when you open your view so that the scanner writes in the correct html input.
Related
Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});
I am trying to find a way to change the color of text in a form as a result of passing a validation by another JavaScript function. Is there an easy way to do this?
Example of the element I want to update the color for:
<form name="contact" method="post" action="send_form_email.php" novalidate>
<div class="row">
<div class="col">
<label for="nameInput">Name:*</label>
<input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="emailInput">Email:*</label>
<input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name#domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
</div>
<div class="col-sm-12 col-md-6">
<label for="telInput">Telephone:</label>
<input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
</div>
</div>
<div class="form-group">
<label for="msgInput">Message:*</label>
<textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For example document. GetElementById('msgInput').style.color='#ABC666';
Another way is to toglle a class containing a rule like so:
JS: document. GetElementById('msgInput').classList.add('valid');
CSS: .valid { color: #ABC666; }
Aforementioned JS code has to be placed in the event listener.
You can add CSS class to your element:
// styles.css
.warning {
color: red;
}
// scripts.js
document.getElementById('msgInput').classList.add('warning');
I have few input fields and some static text. I need that to be printed but can not get it to work. Can you please help me?
<div class="modal-body" id="printable-consent">
<div class="row">
<div class="col-md-6">
<label for="patient-surname-consent">Patient’s surname/family name : </label>
<div class="form-group">
<input type="text" id="patient-surname-consent" onkeyup="printDiv()" name="patient-surname-consent" value="" class="form-control">
</div>
</div>
<div class="col-md-6">
<label for="patient-firstname-consent">First name: </label>
<div class="form-group">
<input type="text" id="patient-firstname-consent" onkeyup="printDiv()" name="patient-firstname-consent" value="" class="form-control">
</div>
</div>
</div>
I want to type text in the modal box and that to be print (sent to printer). Can you help me?
Thanks!
You can access it using JavaScript and the "value" property of the element.
For example,
var myPatientFirstName = document.querySelector("#patient-firstname-consent").value;
console.log(myPatientFirstName);
I have asked a similar question, but have since made a lot of progress so I wanted to share it.
Basically, I have form elements which can be dragged and dropped - it makes use of clone. It allows me to create my own forms. The problem is, an output might be something like so
<form id="content">
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
</form>
The problem with this is that if I clone 2 form elements of the same type, they both have the same name and id like shown above. So I need to make sure that each cloned element has a unique name and id. At the moment, I have a partial solution.
I have created a fiddle here Fiddle If you click Save Template, you will see what happens. The id numbers seem very strange, for instance textareaInput222. Really, each element type should start at 0, and 1 be added to it for each additional element of the same type.
Would this be possible? The other thing I am struggling with is setting the elements labels for attribute to be the same as the name which is set for that element.
How can I achieve this?
Thanks
$("#content").find(".form-group").each(function() {
$("textarea").each(function(index, value) {
my friend, these two each is the reason. There are around 6 .form-group element, so that textarea#each ran 6 times. And regard to DRY, here I gave my version https://jsfiddle.net/yjaL2zgL/2/
I'd use underscore.js's unique id function personally, or your own implementation of it and suffix every id with a unique number on the page that increments like "dateInput-345". Even just using a counter variable that everything uses would be easy enough instead of basing it on indexes in loops.
http://underscorejs.org/#uniqueId
your own counter:
instead of using
(index + 1)
you can use something like
var uid = 0; //this needs to be where you declared your other vars
then when you need an id:
var new_id = $(value).attr("id") + '-' + uid++;
just make sure you arent copying an id that already has a number attached to it or you need to deal with that too.
What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.
Any help you could offer would be greatly appreciated.
Thank you!
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >
Use ng-change directive.
var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
$scope.fn = "";
$scope.ln = "";
$scope.changed = function () {
$scope.un = $scope.fn[0] + $scope.ln;
};
}]);
DEMO
please use ng-value instead value
here demo: http://jsbin.com/zamih/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
</div>
</body>
Change this line:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
To this instead:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>
Your issue is that you are not evaluating createNewUser.LastName as an angular binding, but instead just assigning the text "createNewUser.LastName" to the value attribute. To fix this, put the createNewUser.LastName variable in double curly braces {{...}}.
Hope this helps!
If you have tried any/all of these above mentioned methods and still not able to fix your problem, it could be that your updated files are not loaded to Chrome.
That's what happened to me.
There are two ways to make sure that your js files are up to date on the browser,
1) Hold shift while clicking the reload button of your browser
2) Hard reload your page
* Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
* Right-click the reload button of your browser and click "Empty Cache and Hard Reload"