add data attributes to <options> rendered by django form library - javascript

I have django choice field
The HTML rendered by django looks like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take">Take</option>
<option value="query-action-forward">Forward</option>
</select>
Before executing the action which was choosen by the user, a confirmation should happen. But not all actions need a confirmation. In this example "delete" needs, but "take" does not need a confirmation.
I would like to add html data attributes the options
The result should look like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take" data-need-confirm="False">Take</option>
<option value="query-action-delete" data-need-confirm="True">Delete</option>
</select>
Up to now I found no way to inject the data "need confirmation" into individual choices.
... or am I on the wrong track here?
This question is only about "how to get the data into the html". The evaluation of the data (confirmation popup) is not part of this question.

You need to create a custom Widget for this. If you check out the Django docs for the Select widget (django.forms.Select), you will find a render_option() method. So best to subclass the default Select class and override this method.

The template renderer definitely contains the functionality to add the data, the question is where you get it from.
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
{% for action in actions %}
<option value="{{action.value}}" data-need-confirm="{{action.isConfirm}}">{{action.name}}</option>
{% endfor %}
</select>
Would this be something you want to add to a model? Probably not. But you can add it as a hard coded dictionary too.

Related

Vuejs Option. Get an ID from a selected item

I'm actually using VueJS and encountered a little problem
I have a selector, that needs to memorize an ID to be sent in an axios request later. In the "selected" var, we need to keep only the name of the "type" for user friendly reasons. So, I need to get the ID selected by the user without displaying it. Actually, the code looks like this.
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
{{onetype.idType}}-{{ onetype.name }}
</option>
</select>
Selected is the actual name of the selected type. Since it's vue, when I click on another Type from my selector, it changes it automatically
onetype contains two things : A name, and an idType
playertype contains an array of all types
As we can see in the code, i display things like this "idType - name", but I only want to display "name" (so just erase onetype.idType), but I need to get the id to send it elswhere (I can't use onetype.idType to get the id to my axios method)
I don't know if it's clear enough, but I need to send the onetype.idType to an axios method, but I can't use it this way.
Thanks you in advance, this is driving me crazy and I feel I've missed something obvious ><
Use value attribute and you will get it in v-model instead of displayed option:
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option
v-for="onetype in playertype"
:value="onetype.idType"
class="form-control"
id="lg_type"
name="lg_type"
v-bind:key="onetype.idType"
>{{ onetype.idType }}-{{ onetype.name }}</option>
</select>

Vue-i18n and lists

I’m currently working with vue-i18n for internationalization and got a problem with lists in this topic. The language can be changed using a dropdown menue on a permanent navigation bar.
There is a Component A with a child Component B. Within this child component there are two lists, filled via:
<select id="element1" class="ui dropdown" v-model="application.datatable">
<option value="">... ... ...</option>
<option v-for="i in tableRows" :value="i.id">
<p>
{{$t(i.element.name)}}
</p>
</option>
</select>
Here I’m experiencing the problem, that the {{$t(i.element.name)}} is translated correctly, but won’t change after the first initialisation. So if I change the language from english to german, all other labels and strings are changed, but the lists are still in english (Wochentag: |Monday|Tuesday|…)
For this, I would need a possibility to either rerender the lists (maybe via id, but found nothing in jQuery) or a way to get the lists rerendered every time the language changes.
Anyone having an idea about this?
Huge thanks!
AdV
Bind your select to ($i18n.locale) in html
<select name="lang" v-model="$i18n.locale">
<option v-for="lang in langs" :value="lang">
#{{ $t('general.' + lang) }}
</option>
</select>
Note: # symbole before curly brackets is because this code is in my .blade.php file. If you are in the .vue file, it is note needed.

jQuery Mobile Multi-Select from asynchronous data

I have a little problem with jQuery Mobile and AngularJS.
I want a multi-select so the user can chose a category. Categories have parents and childs. The whole structure comes from a database so its an asynchronous call to get the data.
The problem is that the select element has the data but doesn't show it unless you click on the first empty option.
Maybe i'll better show than tell
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
After angular has added/changed the optiongroups and options, you need to tell jQM to refresh the selectmenu widget:
$("#multiselect").selectmenu("refresh", true);
API Doc: http://api.jquerymobile.com/selectmenu/#method-refresh

It load values with javascript

I have a web app and about a table I push in a raw to obtain its values, then I have to show it on a popup. The values that I recover are "input type=Date" and they are also "Select".
When I try to show those datas on this popup in its corresponding component, I don´t know like make it.
The values in the table are like this:
For example: I´m making with javascript this, and I want to load the values of the table in its component
<input id="warranty" type="date"/>
<select id="manufacturer" >
<option value=""></option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
My javascript code is like this:
cutString = $(this).text().split ("\n");
...
$("#warranty").val(cutString[7].toString().trim());
document.getElementById("manufacturer").value = cutString[8].toString().trim();
...
But when I load the datas in popup it doesn´t load

How to set the selected field of combo box within the view

I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});

Categories

Resources