I'm setting a fieldset (collection) in my form, and i want allow add and remove elements.. So, my code is:
$hydrator = new Hydrator($this->getObjectManager(), 'Base\Entity\MyElements');
$fieldset = new MyElements();
$fieldset->setObjectManager($this->getObjectManager())
->setHydrator($hydrator)
->setObject(new \Base\Entity\MyElements())
->init();
$this->add(array(
'type' => 'Zend\Form\Element\Collection',
'name' => 'myElements',
'options' => array(
'label' => 'My Elements',
'count' => 1,
'should_create_template' => true,
'allow_add' => true,
'allow_remove' => true,
'target_element' => $fieldset
)
));
I can add elements, but, the remove button doesn't appear.. I'm doing wrong or forgetting something?
PS: My english is very poor, but i'm trying improve it. Sorry. And thanks
The allow_remove option doesnt add the button directly. Remeber that the allow_add also does not add the button. As you can see in the docs you have to add the button
<button onclick="return add_category()">Add a new category</button>
and the js function to add elements:
<script>
function add_category() {
var currentCount = $('form > fieldset > fieldset').length;
var template = $('form > fieldset > span').data('template');
template = template.replace(/__index__/g, currentCount);
$('form > fieldset').append(template);
return false;
}
</script>
exactly as this, you have to add the remove button
<button onclick="return remove_category()">Remove</button>
and the function:
<script>
function remove_category() {
//write your logic to remove the last, or the current element, for isntance:
$('form > fieldset > fieldset').last().remove();
return false;
}
</script>
Related
Hello I am trying to make a button that would allow me to add 2 additional fields to my form: 1 text type fields and 1 multiple choice selector (see image)
fields
I would like to be able to add these 2 fields as many times and save it in the database here is what the code of these 2 fields looks like:
<div class="zone_prestations">
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
</div>
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.id_contract',
'Préstation',
'col-sm-2 control-label'
);
echo $this->Form->input(
'Prestation.id_prestation',
array(
'type' => 'select',
'options' => $prestations,
'empty' => 'Selectionnez les préstations',
'div' => array('class' => 'col-sm-10'),
'class' => 'form-control search-select',
'multiple' => true,
'value' => $selected,
'id' => 'prestation_selector'
)
);
?>
</div>
</div>
Do you know how I could do this knowing that I have a multiple choice field. Thank you for your help
Update 20/02/21
<script type="text/javascript">
$(document).ready(function() {
$("select").select2({ width: '100%' });
});
$(document).ready(function () {
var maxField = 10;
var addButton = $('#add_button');
var wrapper = $('#prestation_select');
var x = 1;
var fieldHTML = '<div class="form-group">';
fieldHTML += <?php echo $this->Form->label(
'Prestation.' + x + '.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.' + x + '.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
fieldHTML +='</div>';
$(addButton).click(function () {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
$("select").select2({ width: '100%' });
});
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
Your code for generating fieldHTML is run once when your page loads, with the current version of x. Every time you click your add button, you'll be getting exactly that, always with "1" in it; it's not re-evaluated with the new x. Solution should be simple, just move the calculation of that HTML inside the add function.
On a separate note, don't decrement x when you click the remove button. If you start with field 1, then add 2 and 3 and 4, then remove 2, x decrementing x will mean that adding another field will give you a duplicate of 4. There's no need for them to be sequential, you just need distinct numbers in there.
I got a modal like that. Now i want to add Kartik's Popover X to the injected form.
<div class="ensemble-form-add">
<?php
$content = '<p class="text-justify">sometext</p>';
echo PopoverX::widget([
'id' => 'ownShit',
'header' => 'Usage Information',
'size' => PopoverX::SIZE_LARGE,
'placement' => PopoverX::ALIGN_BOTTOM,
'content' => $content,
'toggleButton' => ['label'=>'<span class="glyphicon glyphicon-question-sign"></span>', 'class'=>'btn btn-lg btn-link'],
]); ?>
<?php $form = ActiveForm::begin(['id' => 'add ...
...
The popover button and dialog (hidden) is rendered correctly. But hitting the button within the modal doesn't do anything. If i open up the above form alone (not in modal) the button works and displays the dialog.
Has anyone tried this before? Do i have to set id's to get this working?
Finally i got it working. I used the code from this link :
public static function renderLabelHelp($label, $help) {
return Html::tag('label', $label, [
'data-toggle'=>'popover',
'data-trigger' => 'click hover',
'data-placement' => 'auto right',
'data-html' => 'true', // allow html tags
// 'data-title'=> 'Help',
'data-content'=>$help,
'style'=>'border-bottom: 1px dashed #888; cursor:help;'
]);
}
And added the following js to make it work like a charm!
$(function(){
// this will show the popover within a modal window
$('#modal').on('shown.bs.modal', function(){
$('[data-toggle="popover"]').popover();
});
});
I am using symfony2 and bootstrap 3 and when I set the readonly attribute to a form field, it gets greyed and I have the forbidden cursor but the field is still editable (in my case a select dropdown).
The readonly attribute would work great for a simple text field, but not for a select.
How can I make sure users can't click a select and change its value ?
I can't use "disabled" as I need the value to be passed to the form.
Using jquery to rewrite the readonly attribute also did not work.
my form:
->add('product', 'entity', array(
'label' => 'Produit',
'class' => 'AppBundle:MarketPlace\Product',
'read_only' => true,
))
Create a data transformer ProductToTextTransformer for your entity as explained in the doc, and then use it in your formbuilder, adding a select or a readonly text according to the condition for the select to be disabled or not :
//...
// this assumes that the entity manager was passed in as an option
$entityManager = $options['em'];
$transformer = new ProductToTextTransformer($entityManager);
if ($condition_to_disabled_the_select){
$builder->add('product', 'entity', array(
'label' => 'Produit',
'class' => 'AppBundle:MarketPlace\Product',
));
}
else{
$builder->add(
$builder->create('product', 'text', array('label' => 'Produit', 'read_only' => true))
->addModelTransformer($transformer)
);
}
The following is working but I don't liek it that much, I feel it's not clean like it should be:
<script>
$(function(){
$(':input[readonly]').each(function(){
$(this)
.hide()
.parent().append('<p>' + $(this).find(":selected").text() + '</p>')
})
;
})
</script>
I'm having problem about making the second dropdown hide/unhide if the selected item is the 1st choice of the first dropdown. Since this is more of front-end, I figured I'd use AJAX.
I'm using X-editable widget, here's the code:
<div class="control-group">
<label class="control-label" for="category">大カテゴリ</label>
<div class="controls">
<?php
$criteria = new CDbCriteria;
$criteria -> condition = 'parent_id=:parent_id AND school_id=:school_id AND status=:status';
$criteria -> params = array(':parent_id' => 0, ':school_id' => $school_account_info -> id, ':status' => 'active');
?>
<?php
$this->widget('editable.EditableField', array(
'id' => 'drop', //ADDED THIS LINE SO I COULD GET THE SELECTED VALUE BUT I GUESS I'M WRONG
'type' => 'select',
'model' => $model,
'attribute' => 'category',
'url' => '/school/Materials_Photos/View',
'source' => Editable::source(AssetCategory::model()->findAll($criteria),'id','category'),
'placement' => 'right',
));
?>
</div>
</div>
//SECOND DROPDOWN (SAMPLE ONLY)
<div class="control-group" id="sub_category" style="display: none">
<label class="control-label" for="category">中カテゴリ</label>
<div class="controls">
<?php echo CHtml::dropDownList('sub_category', '', array(), array('prompt' => 'Select')); ?>
</div>
</div>
But then I saw this:
<script>
$(function(){
$('#status').editable({
value: 2,
source: [
{value: 1, text: 'Active'},
{value: 2, text: 'Blocked'},
{value: 3, text: 'Deleted'}
]
});
});
</script>
and I thought this is more practical, I just couldn't figure how to get the source from ActiveRecord through JS.
Check validate callback. May be it will help you. validate will trigger when you click on the OK button.
Read here. http://x-editable.demopage.ru/index.php?r=site/widgets#Options
Try like this
<?php
$this->widget('editable.EditableField', array(
'id' => 'drop', //ADDED THIS LINE SO I COULD GET THE SELECTED VALUE BUT I GUESS I'M WRONG
'type' => 'select',
'model' => $model,
'attribute' => 'category',
'url' => '/school/Materials_Photos/View',
'source' => Editable::source(AssetCategory::model()->findAll($criteria), 'id', 'category'),
'placement' => 'right',
'validate' => 'js: function(value)
{
console.log(value); //The value you are selecting from x-editable dropdown
if($.trim(value) == "Somthing")
{
//Your functionality
}
}'
));
?>
Could you not simply use jQuery for this?
$(document).ready( function() {
var drop1val = $(".drop1").val();
if (drop1val == "first")
{
$(".drop2").hide();
} else {
$(".drop2").show();
}
});
I'm not sure what the x-editable widget is, I'd just assume however in terms of a general html form, my code should work. Something to think about at the very least.
If your code generates a dropdown list, by creating a then would it be possible for you to add a class or id to that tag?
I want an alert that pops when user tries to click "add to favorite"
1) if there's no checkboxes checked.
2) I also want to know how to get the values of the checked boxes here's my current code on backend
<?php $this->widget('zii.widgets.grid.CGridView',array(
'id' => 'wsrecruitcvhead-grid',
'dataProvider' => $model->search(),
#'filter' => $model,
'columns' => array(
array(
'name' =>'',
'value' => 'CHtml::checkBox("rid[]",null,array("value"=>$data->ResumeID,"id"=>"rid_".$data->ResumeID))',
'type'=>'raw',
'htmlOptions' => array('width'=>5),
'visible' => !Yii::app()->user->isGuest,
),
array(
'name' => 'ResumeTitle',
'value' =>$model->ResumeTitle,
),
'ResumeSummaryIntroduction',
'Name',
array(
'class' => 'CButtonColumn',
'viewButtonUrl' => 'Yii::app()->createUrl("wsrecruitcvhead/view",array("id"=>$data["ResumeID"]))',
'template'=>'{view}',
),
),
));
?>
and here's the screen shot http://pastebin.com/sEpJBCiU
I hope this helps you.
Your code works just fine, just tried it. I would implement the functionality you mentioned using jQuery, like this:
<script type="text/javascript">
$("input:checkbox").click(function () {
var thisCheck = $(this);
if (thisCheck.is (':checked')){
// do what you want here, the way to access the text is using the
// $(this) selector. The following code would output pop up message with
// the selected checkbox text
$(this).val());
}
});
</script>
This code selects all those DOM elements of type checkbox, and then checks with the if condition if it is selected or not. Here you can find more information about this jQuery selector. jQuery is such a powerful tool!!
For get all seleccions of a Grid yii provides the follow code
var seleccions = ($.fn.yiiGridView.getSelection('id_my_cgridview'));
this return an array with the values of checkboxes selected