We Keep Coding

Set a twig value with JS

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();
});

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'],

Retrieve data from modal without refreshing

I have an h4 tag and a button. The button opens a modal with a GridView whose action column contains a button in order to select the row.
What I need the row button to do is closing the modal and populate the h4 tag with "Row 3 was selected", for instance. But I don't want the page to be reladed.
This is the parent page tag and button:
<h4>*</h4>
<?
echo Html::button('Explotación', [
'value' => Url::to('/explotaciones/seleccionar'),
'class' => 'btn btn-primary',
'id' => 'modalButton'
]);
Modal::begin([
'header' => 'Seleccionar Explotación',
'id' => 'modal',
'size' => 'modal-md'
]);
echo "<div id= 'modalContent'></div>";
Modal::end();
?>
The action column in the modal:
[
'class' => 'yii\grid\ActionColumn',
'template' => '{seleccionado}',
'buttons' => [
'seleccionado' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-chevron-right"></span>', '#', [
'id' => 'seleccionado_' . $model->exp_id,
'class' => 'seleccionado',
'data-fila' => $model->exp_id
]);
}
]
]
Registering the javascript in the modal:
<?
$assets_js = Yii::$app->assetManager->publish(__DIR__ . '/js');
$this->registerJsFile($assets_js[1] . '/seleccion.js', [
'depends' => [
'app\assets\AppAsset'
]
]);
?>
And the javascript itself:
(function($){
$(document).ready(function() {
$('.seleccionado').click(function(evento) {
var value = 'HELLO';
alert(value);
value = $(this).data("fila");
alert(value);
$('h4').html(value);
$('#modal').modal('hide');
});
});
})(jQuery);
The code prints the HELLO alert but it does not print the second one nor poupulates the h4 tag nor closes the modal.
Which is the right way to make this work?

Erasing the cache in order to reload javascript changes correctly did the trick. Thanks anyway.

Yii: Javascript & CSS not loading after Ajax calls

I have created a view with tabs and each tab has a form with ajax submit and gridview. I am using renderpartial in tabs widget to render the form and gridview and after clicking submit it filters the gridview. Everything looks fine within the tab till I click the submit button. After clicking submit it filters the gridview as expected.. but it does not load the bootstrap javascript and css so the layout is totally messed up and the tabs and menu bar all appears as a list and the page keeps on loading.
Anyone know why is it not loading the required scripts and css which I have preload in main config. Do I have to specify something seperately when calling ajax function from a view.
EDIT: Code Added
Code for tabs widget(producers.php)
<?php $this->widget(
'bootstrap.widgets.TbTabs',
array(
'type' => 'tabs',
'tabs' => array(
array('label' => 'Monthly' ,'id' => 'tab1',
'content' => $this->renderPartial('_prod_monthly',array('dataProvider' => $dataProvider,'dataProvider2' => $dataProvider2 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'month' => $month),true,true),
'active' => true),
array('label' => 'Weekly' ,'id' => 'tab2',
'content' => $this->renderPartial('_prod_weekly',array('dataProvider4' => $dataProvider4,'dataProvider5' => $dataProvider5 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'week' => $week),true,true)),
array('label' => 'Daily', 'id' => 'tab3', 'content' => 'ABC' )),
)); ?>
Code for partial view (_prod_monthly.php):
$form = $this->beginWidget(
'bootstrap.widgets.TbActiveForm',array(
'id' => 'form_monthly',
'enableAjaxValidation'=>true,
'type' => 'inline',
'method' => 'get',
'htmlOptions' => array('class' => 'well','onsubmit'=>"return false;",/* Disable normal form submit */
'onkeypress'=>" if(event.keyCode == 13){ send2(); } " /* Do ajax call when user presses enter key */),)); ?>
Select Month:
<?php echo CHtml::dropDownList('month', $month,
$sel_month); ?>
Select Employee:
<?php echo CHtml::dropDownList('opm', $opm,
$sel_opm); ?>
<?php $this->widget('bootstrap.widgets.TbButton',
array(
'buttonType'=>'button',
'label'=>'Submit',
'type' =>'primary',
'htmlOptions'=> array('onclick' => 'send2()'),)
);
$this->endWidget();
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'sortableRows'=>true,
'afterSortableUpdate' => 'js:function(id, position){ console.log("id: "+id+", position:"+position);}',
'type'=>'striped bordered hover',
'dataProvider'=>$dataProvider,
'type'=>'striped bordered responsive',
'template' => "{summary}\n{items}\n{extendedSummary}\n{exportButtons}"));?>
<script type="text/javascript">
function send2()
{
var data=$("#form_monthly").serialize();
$.ajax({
type: 'GET',
url: '<?php echo Yii::app()->createAbsoluteUrl("op/producers"); ?>',
data:data,
success:function(data){
document.write(data);
},
error: function(data) { // if error occured
alert("Error occured.please try again");
alert(data);
},
dataType:'html'});
}
</script>
Thanks.

There is no Yii based solution for handling UI-Widgets with AJAX right now and will never come.
Probably, this will never happen again in Yii2. The main Problem is about your missing JS-Ressources and Binding (as you know already). Yii will generate those codes (which you are missing) within the layout process, which is not called on "AJAX"-Requests. Don't try to put in your JS-Ressources by yourself. Yii generated JS-Cods are realy tricky ... and not that easy to handle manualy. This will come up with a lot of problems.
My solution: I dont use any of the "UI"-Features included in Yii. They come along with a lot of problems (Ajax, Multiple announces, etc.). Its not hard to write that features yourself or using jQueryUI.
Take a look at the Tab feature and try write it yourself .. and be happy ! :)

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)) )));