I am trying to send the parameters to control and I am struck in between and need help.
There are multiple types of question inside the ng-repeat i.e 'question' and I am iterating these. The problem is when there are two question with same question type. When I give input into one question the other question is also taking the same data. Kindly help me out with this.
Below is the form.
<div ng-repeat="question in qgroup[grp_id].question" name="outerDiv">
<div ng-if="question.question_type === 'short_text'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
</div>
</div>
<div ng-if="question.question_type === 'date_format'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="d-type" name="date" class="form-control" id="date-type" placeholder="YYYY/MM/DD" ng-model="data.answer.date">
</div>
</div>
</div>
The problem is that the model you are using for the input is shared between questions of the same type.
A natural solution to this would be to put the answer onto the question object. i.e.
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="question.answer">
instead of
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
Related
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 1 year ago.
I am getting the dynamic input id custom_field_42, and i need to get the form-group div to change display to block from none, how can i do that?
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
I have tried this, it doesn't work.
$('#custom_field_42').closest('.form-group').show()
Community edit...
Actually, this works:
$('#custom_field_42').closest('.form-group').show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
You can use Element.closest to find the first parent element which matches a selector, which, in our case, is .row:
const input = custom_field_42;
input.closest('.row').style.display="block";
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
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.
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.
so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
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"