I want to add a dropdown from a Many2one I've created to the pos.xml file (I know how to inherit from this), can someone help me with this?
I saw in the code that for every dropdown they used widget.pos.name, but this I can't seem to find it anywhere. Here is an example for countries (here I want to replace it by my variable).
<select class='detail client-address-country' name='country_id'>
<option value=''>None</option>
<t t-foreach='widget.pos.countries' t-as='country'>
<option t-att-value='country.id' t-att-selected="partner_country_id ? ((country.id === partner.country_id[0]) ? true : undefined) : undefined">
<t t-esc='country.name'/>
</option>
</t>
</select>
I don't know where the t-foreach='widget.pos.countries' comes from and how I can manage this for my own variable called "domain" which is part of a class "domainnames". And called from a Many2one from res.partner
Your Que: I saw in the code that for every dropdown they used widget.pos.name, but this I can't seem to find it anywhere.
Answer: widget.pos.name come from the In POS, models.js line No: 130., Here Server side model are loaded. This is the list of the models that need to be loaded from the server. in your custom module you can also load other models according to your requirement.
Que: I don't know where the t-foreach='widget.pos.countries' comes from and how I can manage this for my own variable?
Answer: For Country widget, it comes from models.js line No: 178, model:'res.country' loaded from the server.
In line 180: You can see that in loaded function they define countries(loaded: function(self,countries)) // You can give any naming conventions here.
So you can directly pass that function parameters in your (Many2One Field) xml file.
Example:
Write in your JS File of custom module:
module.PosModel.prototype.models.push({ //loaded model
model: 'res.partner',
fields: ['partner_id','name'],
loaded: function(self,partners){ //pass parameters
self.partners = partners;
},
});
In XML File:
<div class='client-detail'>
<span class='label'>Partner</span>
<select class='detail client-partner' name='partner_id'>
<option value=''>None</option>
<t t-foreach='widget.pos.partners' t-as='partner'>
<option t-att-value='partner.id' t-att-selected="partner_partner_id ? ((partner.id === partner.partner_id) ? true : undefined) : undefined">
<t t-esc='partner.name'/>
</option>
</t>
</select>
</div>
So, Just like that: In your js, you can load any of the model here and fetch data in your XML file.
Hope this will help you..!!!
Thanks...!!!
Related
I have a web form created that requires template creation by the user. Calling all previous entries that are templates isn't an issue, but passing the information to the form when called seems to be tricky. Basically I want the user to be able to select a template from the dropdown (See the screenshots and stuff below), then based on their selection, update the variables in the script to autofill form data. Right now, it only selects the most recent entry. Is this possible just using python/flask/javascript or am I missing something? Any help would be appreciated! Thanks!
Template Dropdown
<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id='template_select' onchange='changeTemplate()'>
<option value=''></option>
{% for template_info in template_search %}
<option value='{{template_info.client_name}}'>{{template_info.client_name}}</option>
{% endfor %}
</select>
Javascript to change values
{% for template_info in template_search %}
<script>
function changeTemplate(){
var template = document.getElementById('template_select').value;
document.getElementById('client_name').value='{{template_info.client_name}}';
document.getElementById('client_name').innerHTML='{{template_info.client_name}}';
}
</script>
{% endfor %}
Python Passing in the Query
template_search = newmatter_model.NewClientMatter.query.filter_by(
creator=verifier, is_template='on').all()
Your mistake is to create Javascript code in a loop. You don't need to do this.
What you want to do is think of the data sent to the browser as independent. Make it work first without Flask and Jinja2. Create a static page that works and does what you want.
The following code would work with static data:
function changeTemplate(){
var template = document.getElementById('template_select').value;
document.getElementById('client_name').innerHTML = template;
}
<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id="template_select" onchange="changeTemplate()">
<option value=""></option>
<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
</select>
<div id="client_name"><i>No client set</i></div>
That's HTML for a select box, a separate <div> element, and Javascript code to copy the selected option value into the <div>. Note that the Javascript code doesn't know anything about what data is involved; no client names are stored in the code. All that the small function does is to copy the value from the currently selected option, to somewhere else.
Once that works on its own you can start thinking about how you are going to insert the values from your application. In the above code, all that needs replacing is the dropdown options, because the Javascript code can then access everything it needs from the <select> element value.
So the Javascript code doesn't need to be generated at all, you only generate the <option> elements, as you already did in your question.
You rarely need to generate dynamic Javascript code, and it would be much better for your app if you don't. Static Javascript code can be served by a CDN and cached in the browser, removing the need for your app to keep serving that again and again for all clients. Try to minimise that whenever you can.
Instead, generate just the data that the code needs to operate on.
You can put that information in HTML tags. In the above example, your data is put in the repeated <option> tags. Or
you could add data attributes to your HTML, which are accessible both to Javascript code and to CSS. Or
use AJAX to load data asynchronously; e.g. when you pick an option in the <select> box, use Javascript and AJAX to call a separate endpoint on your Flask server that serves more data as JSON or ready-made HTML, then have the Javascript code update your webpage based on that. Or
generate JSON data and put it directly into your HTML page. Just a <script>some_variable_name = {{datastructure|tojson|safe}};<script> section is enough; then access that some_variable_name from your static Javascript code to do interesting things on the page. JSON is a (almost entirely a) subset of Javascript, and the way the tojson filter works is guaranteed to produce a Javascript-compatible data structure for you. The browser will load it just like any other embedded Javascript code.
To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.
I have a app written in C# .NET using WebApi and AngularJS.
At some points in my aplication I fill up a select tag with options using ENUMS, because since the values are not in the database I don't feel like need to create a service that return the enums because I'm using razor pages so I can use the enums directly.
Everything was working fine until I updated the angular version to 1.4.7, Than this stop working, and I can't downgrade the angular version (for some enterprise reasons).
For example, I have this code
<div class="col-md-3 col-xs-12">
<label for="qualificacaoCobreJunta" class="col-xs-12 control-label">#IsiCTB.Internationalization.Res.Controls.label_cobre_junta<span class="obrigatorio">*</span></label>
<div class="col-xs-12">
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta"
required>
<option value="" id="cobrejunta-0">#IsiCTB.Internationalization.Res.Controls.label_prompt_selecione</option>
<option id="optCobreJuntaCom" value="#IsiCTB.Entities.Enums.ComSem.Com.ToInt()">#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()</option>
<option id="optCobreJuntaSem" value="#IsiCTB.Entities.Enums.ComSem.Sem.ToInt()">#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()</option>
<option id="optCobreJuntaAmbos" value="#IsiCTB.Entities.Enums.ComSem.Ambos.ToInt()">#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()</option>
<option id="optCobreJuntaNA" value="#IsiCTB.Entities.Enums.ComSem.NA.ToInt()">#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()</option>
</select>
<div ng-show="formQualificacaoSubmitted" class="error-form-validation">
<div ng-show="gerenciaQualificacoesSoldador.qualificacaoCobreJunta.$error.required">#IsiCTB.Internationalization.Res.Controls.label_obrigatorio</div>
</div>
</div>
</div>
Code getting data from WebApi.
QualificacaoService.get({ id: idQualificacao }, function (data) {
$scope.qualificacao = data;
});
And that return a JSON object with a bunch of attributes, like that:
{
id: 1,
cobrejunta: 2,
anotherEnumField: 1,
anotherEnumField2: 5,
anotherEnumField3: 2
....
}
If I have like qualificacao.cobrejunta = "2" (string) setting in the model, the select is pointing to right option, but if I have qualificacao.cobrejunta = 2 (integer) than nothing seems to work.
There's anyway to get this working again, or the only (best) solution is crete a service that will request a API, and this API will build the array and than return that for using ng-option?
Thank you guys.
This is discussed here.
All you have to do is to change your select as below
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta" required
ng-options="entry.value as entry.label for entry in [{value : #IsiCTB.Entities.Enums.ComSem.Com.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Sem.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Ambos.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()'}, {value:#IsiCTB.Entities.Enums.ComSem.NA.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()'}]">
</select>
I think Angular behaviour has changed with the version 1.4.8. I had the same problem: I had a list of values into a combo (static values), and I assigned dynamically the value to select throught the controller. It wasn't a problem with version 1.3.8, but it's with 1.4.8 when the selected value remains blank. But I can show the value in the view, and it's correct.
The way to solve this for me was to translate that static values, to an object containing that values, and defining it al the begin of the controller (before assigning the value). It's strange to have to do it, but I didn't find another way to success.
I have ui-select2 dropdown that depends on the selection of a parent. I have a array of options for the first ui-select2, then when something is selected from that dropdown, the next dropdown will appear. The available options for the 2nd dropdown will depend on what is selected in the first dropdown. The ng-repeat directive is iterating over an array of choices. Here is the html and the js code.
HTML:
<select name="application" placeholder="Select a Tenant"
ng-disabled="!sharedObj.tenantApplications ||
sharedObj.tenantApplications.length == null"
class="form-control" id="application"
ng-change="vmOrderItem.vmNameUSI=null" ui-select2
ng-model="vmOrderItem.tenantApplication" title="Select tenant application"
data-style="btn-default" required><option></option>
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter()" value="{{tenantApplication.id}}">{{tenantApplication.name}}
</option>
</select>
JS:
/** Filters the tenant depending on what domain is selected */
$scope.tenantFilter = function(tenantApplication) {
$scope.sharedObj.tenantApplications;
tenantApplication.name;
tenantApplication.id;
return true;
/* return $scope.vmOrderItem.domain.id == tenantApplication.domainId;*/
}
The issue I get is that even if I return true, nothing ever shows up on the dropdown. I did this to test the logic. I don't know why the tenantApplication parameter is always undefined in the function. I used google chrome inspect element to insert a breakpoint and it complains that the argument is undefined. But I don't see why it wouldn't work properly when I return true. I'm a newbie to JavaScript and AngularJS so any help is greatly appreciated. I've worked through all the AngularJS examples and read their docs but I'm still just a beginner.
Think this should be:
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter" value="{{tenantApplication.id}}">
I am trying to instantiate a multi-select box with Meteor JS and Select2. My html resides in a template as follows:
<template name="selectbox">
<select id="testbox">
<option value="AL">Alabama</option>
<option value="AL">Washington</option>
</select>
</template>
Within my client js I have the following code:
Template.selectbox.rendered = function(){
var options = { allowClear : true, multiple : true }
$("#testbox").select2(options);
};
Unfortunately my browser's console produces the following error:
Exception from Deps afterFlush function: Error: Option 'multiple' is not allowed for Select2 when attached to a <select> element.
I have also tried placing the following code directly in my client js file (as well as within Template.selectbox.create):
$(document).ready(function(){
var options = { allowClear : true, multiple : true }
$("#testbox").select2(options);
});
Unfortunately I receive the same error. The peculiar thing is I receive no error if my options are simply:
var options = { allowClear : true, placeholder : 'test' }
Neither option appears to take affect. However, The rendering of the select box is that of selct2.
Any idea what could be the issue? Thanks in advanced.
See how the example on select2 website is made. According to that code, you should add multiple attribute to the select tag, not to js method parameters.
So in your template replace <select id="testbox"> with <select multiple id="testbox">.