Set a twig value with JS - javascript

I've seen many topics about questions like mine, but I can't get any solutions.
I'm using Symfony, and I have a twig template which displays a form.
Imagine that I have this line :
{{ form_row(demandeForm.distinction) }}
Thanks to this :
->add('distinction',null, [
'label_attr' => array('id' => "distinct_form"),
'required' => false,
'label' => 'distinction'
])
I also have a submit button. My wish is to modify the value of my row "distinction" when the button is clicked (id of the submit button : formDepot).
Here is my code :
$(document).ready(function(){
$('#formDepot').click(function(){
$('#distinct_form').value('555');
});
});
When I retrieve my datas on submit, I don't have any value in my "distinction".
Any ideas ?
Thanks

This is because you're applying the changes on the label value, not on the input itself.
'label_attr' => array('id' => "distinct_form") and in js : $('#distinct_form').val('555');
Change the form builder to this :
->add('distinction',
null,
[
'attr' => array('id' => "distinct_form"),
'required' => false,
'label' => 'distinction'
])

With attr for the field (not the label), you can try
$('#distinct_form').val('555'); not .value();

You are assigning a value, instead of getting the value, try this .....
$(document).ready(function(){
$('#formDepot').click(function(){
$('#distinct_form').val();
});

Related

Display an input according to the value of a drop-down list symfony

im trying to display an input according to the value of a drop-down list with symfony
my select box
->add('specialite', ChoiceType::class, [
'attr' => ['class' => 'form-control mb-3'],
'label' => 'Speciality',
'choices' => array(
'Select' => null,
'Nurses' => 'nurses',
'Doctors' => 'Doctors',
'Engineers' => 'Engineers',
'IT-Specialist' => 'IT-Specialist',
'Anesthetist technicians' => 'Anesthetist technicians',
'Others' => 'Others',
),
'choice_attr' => [
'Select' => ['disabled'=>'disabled'],
]
])
when the user select others , another field it displayed to him , im trying also with this code
form type
->add('otherspec', TextType::class, [
'attr' => ['class' => 'form-control mb-3'],
'label' => null,
])
html.twig
<script>
let foo = document.getElementById("emplopyer_specialite");
let bar = document.getElementById("emplopyer_otherspec");
foo.addEventListener('change', (event) => {
if (event.target.value === 'Others') {
bar.style.display = 'none'; // Hide the element.
} else {
bar.style.display = 'inline'; // Show the element.
}
});
</script>
My problem
my problem is whene i select any value of the select box , the second field appear , however i want it appear when i select the value="other"
thanks
If you console.log your event.target.value, you can see '1', '2'...
The offender is : 'Select' => null
Documentations says :
If there are choice values that are not scalar or the stringified representation is not unique Symfony will use incrementing integers as values. When the form gets submitted the correct values with the correct types will be assigned to the model.
So, if you want string as value, you have to set string in your Select key.
Or you can change your js condition with 6.

yii2 - How to set kartik select2 value in javascript

I try to set value to kartik select2 in javascript action but still no luck.
here is my code in view files:
<div class="col-xs-6">
<?= $form->field($model, 'item_id')->widget(kartik\select2\Select2::className(), [
'data' => \yii\helpers\ArrayHelper::map(\app\models\ItemProduction::find()->all(), 'id', 'name'),
'options' => ['placeholder' => 'Select item'],
'pluginOptions' => [
'allowClear' => true,
],
]) ?>
</div>
and my javascript code like this
$(document).on('click', '.select-row', function(){
// get id from custom button
var id = $(this).attr('data-id');
$.get('../ticket-timbangan/get-ticket', {id : id}, function(data){
var data = $.parseJSON(data);
alert(data.item_id);
$('#pengirimanproduksi-ticket_id').val(data.id);
$('#select2-pengirimanproduksi-item_id-container').val(data.item_id).trigger('change');
$('#pengirimanproduksi-bruto_tbg').val(data.bruto);
$('#pengirimanproduksi-tara_tbg').val(data.tara);
$('#pengirimanproduksi-remark').val(data.remark);
});
$('#modalTicketList').modal('hide');
});
this is I inspect kartik select2 element
<span class="select2-selection__rendered" id="select2-pengirimanproduksi-item_id-container"><span class="select2-selection__placeholder">Select item</span></span>
I try this code $('#select2-pengirimanproduksi-item_id-container').val(data.item_id).trigger('change'); but it changes nothing.
Please advice. thanks.
first id for select2 is wrong.
$('#select2-pengirimanproduksi-item_id-container')
don't confuse with this and use regular one according to your view name, like mine is $('#pengirimanproduksi-item_id').val(your_value).trigger('change') should work.
just reading select2 documentation.
you can give your own id:
'options' => ['placeholder' => 'Select item','id' => 'your_id'],

yii2 datepicker disable dates using javascript

I rewrited my question:
I'm using Kartick DatePicker to display a datepicker. On this datepicker, I want to disable dates using javascript. Here is what I have:
<?= DatePicker::widget([
'name' => 'mydate',
'language' => 'fr',
'clientOptions' => [
'autoclose' => true,
'format' => 'dd-M-yyyy'
]
]);?>
With the JS:
$(function(){
$("#w0").datepicker("setDatesDisabled", ['25-08-2017']);
});
I tried to change the format of the date to 2017/08/25 or 08/25/2017 but in any case nothing is displayed into the logs.
I also tried to use kvDatepicker() instead of datepicker() but this gave me
Uncaught TypeError: $(...).kvDatepicker is not a function
Any clue on what is wrong here? Thank's.
Your date is in the wrong format. It should be specified as:
$("#w0").datepicker("setDatesDisabled", ['08/25/2017']);
Of course make sure that w0 is the correct ID for the input element... it might also be that your selector doesn't match the input.
I've verified on the demo page that entering this in the browser's console correctly disables Aug 28:
$('#sandbox-container input').datepicker("setDatesDisabled", ['08/28/2017']);
If you are using Yii2 Specifically than this may help you
echo '<label id = "for-trigger">Date</label>';
echo DatePicker::widget([
'type' => DatePicker::TYPE_INPUT,
'id' => 'anyUniqueID',
'name' => 'date',
'value' => '2020-04-11',
'options' => ['placeholder' => 'Selectdate ...'],
'pluginOptions' => [
'format' => 'yyyy-M-dd',
'daysOfWeekHighlighted' => '2,3',
'todayHighlight' => true,
'datesDisabled' => ['2020-04-06', '2020-04-21']
],
'pluginEvents' => [
'changeDate' => "function(e) {
//something you want to do may be
}"
]
]);

Yii2: Get values to update form in modal window

I am using Yii2 modal to update a form in modal window but I am unable to fetch the values to be already filled in the form.
In this screen-shot link below:
http://awesomescreenshot.com/0f957qq367
When I click on edit option, It takes me to the update form which is opened in a modal window. But this form shows empty values in all fields. I want to update the form.
Please find this in this screen-shot below:
http://awesomescreenshot.com/0f257qqscb
This is the snippet for what I have tried yet:
<?php
use yii\bootstrap\Nav;
use yii\bootstrap\Modal;
Modal::begin([
'id'=>'modalEdit',
//'header' => '<h2>Hello world</h2>',
'size'=> 'modal-lg',
//'toggleButton' => ['label' => 'click me'],
]);
$newmodel = new Backlog();
// $newmodel->id;
echo $this->render('/backlog/update', ['model' => $newmodel]);
Modal::end();
echo Nav::widget([
'options' => ['class' => 'nav-pills navbar-right'],
'encodeLabels' => false,
'items' => [
['label' => '', 'items' => [
['label' => '<span data-toggle="modal" data-target="#modalEdit" style="cursor: pointer;">Edit</span>','url' => 'javascript:void(0);'],
'<li class="divider"></li>',
['label' => '<span>Assign</span>', 'url' => ['#']],
'<li class="divider"></li>',
['label' => '<span>Convert To Backlog</span>', 'url' => ['#']],
'<li class="divider"></li>',
['label' => '<span>Close</span>', 'url' => ['#']],
]],
],
]);
if Backlog is an ActiveRecord Replace the Line with this.
$newmodel = Backlog::findOne(['ID'=>$id]);
Finally, I solved the problem using javascript and ajax loading :
$(document).on("click",".edit-backlog",function(e){
var back_l_id=$(this).attr("b-id");
var modal_body=$("#modalEdit").find(".modal-body");
$.ajax({
url:getAjaxUrl('backlog','update'),
data:{'id':back_l_id},
success:function(res){
//console.log(res);
modal_body.html(res);
}
});
});
I added a class .edit-backlog to span and get the id ("b-id") and used in the above script. Hope this answer helps others too.

Get value of selectbox with JsHelper in CakePHP

I have a select box, and I want to use it to Ajax-update some other content on the page. So I have bound an event handler using the JsHelper (jQuery) like so:
<?php
echo $this->Form->select('car', $cars);
$this->Js->get("#car");
$this->Js->event('change', $this->Js->request(array(
'controller' => 'cars',
'action' => 'view',
???,
array('async' => true, 'update' => '#car-view', 'evalScripts' => true),
true
));
?>
But how can I get the value of the select box to send as an argument to the cars controller (at "???" in the code above)?
I could do everything in javascript, but is there any way to do this in cake?
To be honest, I struggled with this a while back. I couldn't find anything that worked, so I ended up just going the straight javascript route.
I think you are looking for this:
$this->Js->get('#selectbboxid1')->event('change',
$this->Js->request(array(
'action' => 'function'), array(
/*'before' => 'showLoader();',
'success' => 'hideLoader();',*/
'update' => '#selectboxid2',
'dataExpression'=>TRUE,
'method'=>'POST',
'async'=>TRUE,
'data' => $js->serializeForm(array('isForm' => TRUE, 'inline' => TRUE)) )));

Categories