in bootstrap table the select dropdown menu displays default option after onchange performs - bootstrap-table

I have the following issue. Here is a cell in a bootstrap table created with flask jinja
<td>
<select id="{{idselectop}}" onchange="operazione_scelta_onchange({{ii}});" class="form-control"
name="operazione_scelta">
{% for jj in ciclo_mysql %}
{% if righe_estese[ii].operazione == jj[3] %}
<option value="{{jj[3]}}" selected>
{% else %}
<option value="{{jj[3]}}" >
{% endif %}
{{jj[3:6]|join('-')}}
</option>
{% endfor %}
</select>
</td>
When I choose one of the dropdown options, the onchange starts the following js function:
function operazione_scelta_onchange(i) {
let val = $("#operazione_scelta"+i).val();
var ciclo_mysql_j = {{ciclo_mysql|tojson}};
for (let x = 0; x < ciclo_mysql_j.length; x++) {
if (ciclo_mysql_j[x][3] === val) {
$table.bootstrapTable('updateCell', {
index: i,
field: 'desc_op',
value: ciclo_mysql_j[x][4]
})
}
}
}
changing the value and the display of the value in another cell.
After that, in the cell containing the dropdown menu I see again the default option instead of the choosed one, i think because the table is reinitialised. If I set {reinit: false} in the updatecells parameters, the dropdown menu shows the choosed option but the cell to be updated shows the old value.
How can I solve?
Thankyou very much in advance

I solved using document.getElementById("stateSelect").selectedIndex = i;

Related

Render as multiple bagdes with an AssociationField in EasyAdmin

I got an issue with that question.
I've make this to render a "string" for a ManyToMany relation :
->formatValue(function ($value, $entity) {
return implode(",",$entity->getCategories()->toArray());
})
and it works pretty good ! But I've a question !
How can I render many badges in Index ? Because this method render one unique badge with "Value 1, Value 2"... And I want to see 2 badges, one with "Value 1" and one other with "Value 2" in the same line.
Someone know how to do that ?
I hope my question is clear.
Noé
You need to create a custom template that does it.
Use easy admin ->setTemplatePath() method to override your field template.
Example:
->setTemplatePath('fields/yourEntity/categories.html.twig')
And your twig template loop through each values to render it with multiple badges:
{% for value in field.value %}
<span class="badge badge-info">
{{ value }}
</span>
{% else %}
<span class="badge badge-secondary">
None
</span>
{% endfor %}
You should get a badge for each categories, you could also customize how to render those badge (with different colors ?) by using {{ value }} and any of its method to render it differently.

Handlebars: Using Parent Variable as a Parameter to a Custom Helper Wrapped in an Each Block

Check out ../billerId below. If I put {{ billerId }} before the {{# each }} block, I can see that billerId is there and defined.
I want to user billerId in my custom helper to see if the option's value should be pre-selected.
<select class="searchbar-control col-6 form-control" id="searchbar-select-biller" style="display:none">
<option value=''>Select a biller...</option>
{{# each billers }}
<option value='{{ _id }}' {{ ifEqual _id ../billerId "selected" "" }} >{{ name }}</option>
{{/ each }}
</select>
Here's the helper code:
ifEqual: function (obj, value, trueString, falseString) {
return ( (obj===value) ? trueString : falseString );
},
I have tried various syntaxes: billerId, ../billerId, ../../billerId, {{ billerId }}.
No luck.
Not exactly an answer, but on researching, I don't think Handlebars allows this type of usage.
Instead, I put the billerId in a hidden span and referenced the span by its id from within javascript. I assigned "selected" from within the script.

CustomHelper inside {{# each}} block

I have a list of "matters." Each matter has an _id and name.
I have a "transaction." Every transaction belongs to a matter by reference to the matter's _id via a transaction.matterId property.
I'm presently working on a user interface to allow making changes to the transaction, including changing the matter to which the transaction is assigned. Like this:
Enter date:
Select a matter: (this is the culprit)
Enter the amount:
I am using handlebars to generate a Bootstrap select input with an option for each matter - i.e., "Select a matter..." This is easily done with handlebars {{ # each }} block helper. All the matters correctly appear as options, and each option's value is correctly assigned. No problem so far...
However, I want the option whose value matches the transaction.MatterId to be pre-selected since this is an update screen. For that, I invoke my custom "IfEquals" helper inside my {{# each }} block. The handlebars template is like this:
<div>Matter: {{ transaction.matterId}}</div> <-- I can see the matterId here.
<div class='form-group'>
<label for="selMatter">Case</label>
<select required id="selMatter" name="matterId" class="form-control">
{{# each matters }}
<option value='{{ _id }}' {{ ifEqual _id ../transaction.matterId "selected" "" }} >{{ name }}</option>
{{/ each }}
</select>
</div>
The custom helper is this:
ifEqual: function (obj, value, trueString, falseString) {
return ( (obj===value) ? trueString : falseString );
}
Let's say the 1st <div> shows a transaction.MatterId of "5." There will be one (and only one) option with a value of "5."
In the handlebars template, I have tried all sorts of possibilities to try to get {{ IfEqual }} to properly compare the 2 values. I tried the transaction.matterId without the "../" to see if it might be a context problem. No luck. I tried using a handlebars subexpression (even with its own helper function). Nope.
I am not getting the proper values inside the {{ IfEqual }} helper, and for that reason, even though the matching <option> is there, I can't make handlebars add the "selected" attribute to it.
Here is what I believe to be the right place to look, but I am not seeing what I am missing. http://handlebarsjs.com/expressions.html
Well, I got it, finally. If anyone comes across this scenario, here's what worked for me:
handlebars template:
<div class='form-group'>
<label for="selMatter">Case</label>
<select required id="selMatter" name="matterId" class="form-control">
{{# each matters }}
{{{ makeOption _id ../transaction.matterId name }}}
{{/ each }}
</select>
</div>
Here's the {{{ makeOption }}} helper:
makeOption: function (optionValue, dataValue, displayText) {
myOption = "<option value='" + optionValue + "'";
if ( optionValue.toString() === dataValue.toString() )
myOption += " selected";
myOption += ">" + displayText + "</option>";
return myOption;
},

How to pass an Twig expression as a parameter to a template, and then execute it with template's context?

I define a template which built select dropdown inputs for my forms:
<p id="{{key | ucfirst}}">
<span>{{label}} : </span>
<select required disabled>
{% for d in data %}
<option value="{{attribute(d, optionValue)}}" {{(attribute(d, optionValue) == selectedValue)?'selected'}}>{{attribute(d, optionIntitule)}}</option>
{% endfor %}
</select>
<span><em>{{initialValue | default("")}}</em></span>
</p>
Then I just need to include it, and passing it some data:
{% include 'selectForm.twig' with {'label': 'Manager'
, 'key': context.manager.id
, 'initialValue': projet.manager.username
, 'data': users
, 'keyValue': 'id'
, 'keyIntitule': 'username'
, 'selectedValue': projet.manager.id) }
%}
It works fine, but I want to do more. For instance I would like to show a value more usefull for end user into option's label: <option>Username (email)</option> instead of <option>Username</option>
So I think I can't use anymore the attribute function.
I thought I could pass an expression to my template like following:
{% include 'selectForm.twig' with {..., 'keyIntitule': "#{d.username (d.email)}"} %}
But the expression is evaluated with immediate context, not template's one. So it doesn't work.
I also tried with template_from_string but I don't suceed in (I never used this function before...)
Is there a way to pass an expression to another template, and make it evaluate the expression with it's own context?
If you want to block the immediate context you can use include function instead of include tag. Then you can disable context this way (example taken from the documentation) :
{# only the foo variable will be accessible #}
{{ include('template.html', {foo: 'bar'}, with_context = false) }}
I found the solution with Twig's template_from_string function:
{% include 'selectForm.twig' with {..., 'keyIntitule': template_from_string("{{d.username}} ({{d.email}})")} %}
And then I use keyIntitule variable as a template:
<option value="{{attribute(d, optionValue)}}">{% include(keyIntitule) %}</option>
Works also with:
<option value="{{attribute(d, optionValue)}}">{{ include(keyIntitule) }}</option>
If you working with objects you could set keyIntitule to uniqueName and in the user entity define new method:
public function getUniqueName()
{
return sprintf('%s (%s)', $this->getUsername(), $this->getEmail());
}
Twig will call corresponding getter method. In this case uniqueName transforms to getUniqueName()

twig automatic convert string to day

I want to convert a string value to day by tapping in a widget, e.g. 24 → 1
{% block convert_day %}
<td>{{ form_widget(form['crush']) }}</td>
<td><!-- displaying my value in day --></td>
{% endblock %}
No It doesn't work !
To be more clear ,I want to do something like that but just display number of days : http://www.convertworld.com/en/time/Days.html
{{ hourValue / 24 }}
Or, if you want to round the value to two decimal places:
{{ hourValue / 24 | number_format(2, ".", ",") }}
Documentation:
http://twig.sensiolabs.org/doc/templates.html#math
http://twig.sensiolabs.org/doc/filters/number_format.html
edit
Alternatively, you can put the precision into the form instance itself. When you create your form, you're probably doing something like this in your controller (or if the form has its own class, you're doing something similar in the buildForm() method of that class):
$form = $this->createFormBuilder($entity)
->add('name', 'text')
->getForm();
When you add your crush field, you can then specify the number of decimal places that should be represented on the form by including the precision option:
$form = $this->createFormBuilder($entity)
->add('name', 'text')
->add('crush', 'number', array('precision' => 3) )
->getForm();
The form will then round the value before inserting it into the database.
Documentation:
http://symfony.com/doc/current/reference/forms/types/number.html#precision
that's what I did ;
<script type="text/javascript">
function execute_time_ext(clicked) {
if (document.forms && document.forms['show_convert']) {
var from = document.forms['show_convert'].unit_from.value;
var elms = document.getElementsByName('unit');
var amount = document.forms['show_convert']['value'].value;
var to;
var amount_int = ['show_convert']['value'] - 0;
for (var i=0; i<elms.length; i++) {
to = elms[i].value;
convert(show_convert['value'], from, to, false, false);
}
var cookie = 'default_decimals';
if (getCookie(cookie) != decimals) {
setCookie(cookie, decimals, null, '/');
}
} else {
if (clicked) {
alert('Converter error. Conversion not supported by browser.');
}
}
}
execute_time_ext(false);
</script>
widget :
<div onkeyup="execute_time_ext(true)" onchange="execute_time_ext(true)"> {{ form_widget(form['value']) }} {% endblock %}
<div> <input id="value_4" type="hidden" value="365.25|0|4" name="unit"></div>
</div>

Resources