I am trying to add jquery ui autocomplete widget in yii2 gridview with this code in the grid view filter column...
'filter' => AutoComplete::widget([
'model' => $searchModel,
'attribute' => 'site_id',
'clientOptions' => [
'minLength' => 3,
'autoFill' => true,
'source' => new JsExpression('
function(request, response) {
jQuery.getJSON("'.Url::to(['site/search']).'",
{query: request.term}, function(data) {
var suggestions = [];
jQuery.each(data, function(index, ele) {
suggestions.push({
label: ele.name,
value: ele.id
});
});
response(suggestions);
});
}'),
'select' => new JsExpression('
function(event, ui) {
jQuery("#'.Html::getInputId($searchModel, 'site_id').'")
.val("ui.item.value");
jQuery("#'.Html::.'").yiiGridView("applyFilter");
}')
],
]),
How to add a html hidden input element for this filter column to send the 'site_id' with grid filter query and display the jui autocomplete widget label as 'name'. Currently the 'site_id' (e.g. 2) is displayed on the filter column.
I just add
. Html::hiddenInput('site_id', '')
after the auto complete widget.
Related
I have a form field, when I select a car, I want to get the type of car or the result of the model.
$this->crud->addField([
'name' => 'car_id',
'label' => 'Car',
'type' => 'select2_from_ajax',
'attribute' => 'name',
'model' => Car::class,
'data_source' => url('admin/api/cars'),
'placeholder' => 'Search and select a car',
'minimum_input_length' => 2,
]);
And how do I use the result to determine which other fields to show in the form?
You can do that in Backpack v5 using the included CrudField JS Library. To hide/show other fields depending on card_id, you should:
Step 1. In your setupCreateOperation() and/or setupUpdateOperation() load a new JS file:
Widget::add()->type('script')->content('assets/js/admin/forms/product.js');
Step 2. Create that JS file. Inside it, you can now easily select and get the value of Backpack fields. To show/hide other fields depending on car_id:
crud.field('car_id').onChange(function(field) {
// eg. show "car_model" if "car_id" is 1
crud.field('car_model').show(field.value == 1);
}).change();
For more things you can do with the CrudField JS Library, check out its docs.
Thanks in advance,
Want to implement jquery date time picker with zend framework 2 using ZF FORM, with validation of form date selection depending on to date.
Please suggest the best practice.
You can proceed as follows
In your form you add a date field:
$this->add([
'name' => 'birthDate',
'type' => 'Zend\Form\Element\Date',
'attributes' => [
'id' => 'birthDate',
'class' => 'required datepicker-date',
'type' => 'text'
],
'options' => [
'label' => 'Birth date'
]
]);
notice the 'type' => 'text'.
Then in the view you print the form element as you please and add the following javascript snippet:
$(document).ready(function() {
$( ".datepicker-date" ).datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true
});
});
Adjust the options according to your needs.
You can do it by using bootstrap-datepicker
So firstly you want to insert following CSS and JS files.Those are
1.bootstrap.css
2.bootstrap-datetimepicker.min.css
3.jquery.min.js
4.bootstrap-datepicker.min.js
<script type="text/javascript">
$(document).ready(function() {
$('#yourTextFieldIDName').datepicker({
format: "yyyy-mm-dd",
viewMode: "day",
minViewMode: 'day'
});
</script>
I'm using drupal 7 module date (date_popup). I have 2 datepickers. I need to update minDate on the second datepicker on "onSelect" event by click on the first one. It works but only for the second click. If I click on the first datepicker and select date nothing happens and minDate is not updated. When I select the second time it works well. Why doesn't it work from my first click?
Here is my datepicker init php code for my module.
<?php
$form['leave'] = array(
'#type' => 'date_popup', // types 'date_popup', 'date_text' and 'date_timezone' are also supported. See .inc file.
'#title' => t('Leave'),
'#default_value' => date('Y-m-d'),
'#date_format' => $format,
'#required' => TRUE, // Added
'#date_label_position' => 'within', // See other available attributes and what they do in date_api_elements.inc
'#date_increment' => 15, // Optional, used by the date_select and date_popup elements to increment minutes and seconds.
'#date_year_range' => '-3:+3', // Optional, used to set the year range (back 3 years and forward 3 years is the default).
'#datepicker_options' => array(
'changeMonth' => false,
'changeYear' => false,
'altField' => '#edit-leave-alt',
'showOtherMonths' =>true,
'selectOtherMonths' =>false,
'altFormat' => 'D, M d, yy',
'minDate' => 0,
), // Optional, as of 7.x-2.6+, used to pass in additional parameters from the jQuery Datepicker widget.
'#attributes' => array('readonly' => 'readonly')
);
$form['leave'] = array(
'#type' => 'date_popup', // types 'date_popup', 'date_text' and 'date_timezone' are also supported. See .inc file.
'#title' => t('Leave'),
'#default_value' => date('Y-m-d'),
'#date_format' => $format,
'#required' => TRUE, // Added
'#date_label_position' => 'within', // See other available attributes and what they do in date_api_elements.inc
'#date_increment' => 15, // Optional, used by the date_select and date_popup elements to increment minutes and seconds.
'#date_year_range' => '-3:+3', // Optional, used to set the year range (back 3 years and forward 3 years is the default).
'#datepicker_options' => array(
'changeMonth' => false,
'changeYear' => false,
'altField' => '#edit-leave-alt',
'showOtherMonths' =>true,
'selectOtherMonths' =>false,
'altFormat' => 'D, M d, yy',
'minDate' => 0,
), // Optional, as of 7.x-2.6+, used to pass in additional parameters from the jQuery Datepicker widget.
'#attributes' => array('readonly' => 'readonly')
);
?>
Here is my js code
(function($) {
Drupal.behaviors.ifly_search = {
attach: function (context, settings) {
$("#edit-leave-datepicker-popup-0").datepicker({
onSelect: function(date,param) {
var data = new Date(param.currentYear, param.currentMonth, param.currentDay);
$("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
},
});
}
};
})(jQuery);
Just to flesh out my comment. Try this instead:
(function($) {
Drupal.behaviors.ifly_search = {
attach: function (context, settings) {
$("#edit-return-datepicker-popup-0").datepicker({minDate: new Date()});
$("#edit-leave-datepicker-popup-0").datepicker({
onSelect: function(date,param) {
var data = new Date(param.selectedYear, param.selectedMonth, param.selectedDay);
$("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
},
});
}
};
})(jQuery);
Skarist, thank you a lot!
Here is the working code:
Drupal.behaviors.ifly_search = {
attach: function (context, settings) {
$("#edit-leave-datepicker-popup-0").datepicker({
onSelect: function(date,param) {
var data = new Date(param.selectedYear, param.selectedMonth, param.selectedDay);
$("#edit-return-datepicker-popup-0").datepicker({minDate: data}).val(date);
$("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
},
});
}
};
I have below CJuiAutoComplete and when loading I want to display "Search" in the text field and on click I want to clear . I tried using "value" under options , but couldn't make it work . Thanks for your help
tried also
'htmlOptions'=>array('value'=>'Search',)
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'test1',
'source'=>'js: function(request, response) {
$.ajax({
url: "'.$this->createUrl('myAutoComplete/autoCompleate').'",
dataType: "json",
data: {
term: request.term,
brand: $("#type").val()
},
success: function (data) {
response(data);
}
})
}',
'options' => array(
'showAnim' => 'fold',
'select' => 'js:function(event, ui){ alert(ui.item.value) }',
'click'=>'js:function( event, ui ) {
alert("test");
return false;
}',
),
'htmlOptions'=>array('value'=>'Search',)
));
?>
Regards
UPDATE
directly putting 'value' =>'Search' worked .
Checking for click handler
Kiran
What you can do is give your widget an id and then you place the onClick event in the widget's htmlOptions and using JavaScript you clear the value.
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'id' => 'test1_id',
'name'=> 'test1',
'source'=>'js: function(request, response) {
$.ajax({
url: "'.$this->createUrl('myAutoComplete/autoCompleate').'",
dataType: "json",
data: {
term: request.term,
brand: $("#type").val()
},
success: function (data) {
response(data);
}
})
}',
'options' => array(
'showAnim' => 'fold',
'select' => 'js:function(event, ui){ alert(ui.item.value) }',
),
'htmlOptions' => array(
'onClick' => 'document.getElementById("test1_id").value=""'
)
));
You cannot put onClick in the options attribute as these are jQuery options for the CJuiAutocomplete, onClick is not defined in the JUI Autocomplete options.
Cheers
Old thread, but for newbies who land up here, its simple to add a html placeholder attribute in Yii CAutoComplete. See code below and add in the htmloptions line:
<?php $this->widget('CAutoComplete', array(
'model'=>$model,
'attribute'=>'tags',
'url'=>array('suggestTags'),
'multiple'=>true,
'htmlOptions'=>array('size'=>50,'placeholder'=>'Seperate tags with commas'),
)); ?>
I am new to zend, Below is my piece of code,
$TEST = new Zend_Form_Element_Radio('test', array(
'label' => 'Send:*',
'value' => $data,
'multiOptions' => array(0 => 'TEST1', 1 => 'TEST2',2 => 'TEST3 '),
));
$this->addElement($TEST);
Here i Want to apply onclick event for above 3 option button respectively.Is it possible ?.Kindly help me on this
You would probably be best off using jQuery for this? E.g.:
$(function() {
$("#test").click(function(){
// whatever you need to do
});
});