in my symfony 4 project I use Select2 for some of my fields: https://select2.org/
So, I've this :
So, in my form, I've :
->add('user', EntityType::class, [
'class' => User::class,
'label' => 'Agent',
'placeholder' => "Agent",
'choice_label' => 'fullName',
'choice_value' => 'fullName',
'attr' => [
'class' => 'js-example-basic-single',
]
])
And in my view :
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr'
});
</script>
I would like to use bootstrap 4 with this field, so that it has the same design as the other fields.
So, I found this link : https://github.com/ttskch/select2-bootstrap4-theme
Is it a good link ?
It's the first time I use npm, so I executed the following command :
npm install #ttskch/select2-bootstrap4-theme
But I dont see where are the css links, to import them in my view
You just have to pass correct theme name in select2 field definition.
So in your case it will look like this:
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr',
theme: 'bootstrap4',
});
</script>
If you're using webpack as official documentation suggest, you should add following lines:
assets/js/app.js
require('select2');
assets/css/app.scss:
#import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";
Related
I am using jQuery QueryBuilder plugin. I initiated my queryBuilder then used SQL Parser to set a rule from SQL.
After, I want to set my queryBuilder to read-only which means the queryBuilder will be disabled. You won't be able to add other rules or change the current rule.
Based on documentation, it should be as this but couldn't make it work.
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"] });
Any suggestions please what am I doing wrong ? Thank you very much.
$(document).ready(function() {
$('#queryBuilder').queryBuilder({
filters: [
{ id: 'name',
label: 'Name',
type: 'string',
value_separator: ',',
operators: ['in']
}
]
});
// here I set the rule from sql query without ready only feature and it works fine
$('#queryBuilder').queryBuilder('setRulesFromSQL', "name in ('Alex','Adam')");
//Here I want to update the previous method to include read only feature.
//There will be only that rule and you can't change it.
//I couldn't make it work although I believe I did write the correct syntax
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/css/query-builder.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>
<div id="queryBuilder"></div>
Flags at rule level works for me
https://querybuilder.js.org/#methods
Hopes that helps
I have a problem with this datepicker :http://bootstrap-datepicker.readthedocs.org/en/stable/index.html
I work with symfony framework, on last version.
I do all css/js file inclusion, i add a class on my field for js, and i use this configuration :
$('.datepick').datepicker({
language: "fr",
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true
});
So in regular step, i can select a date with my datepicker.
My problem is :
when i don't select a date in form (optionnal field), the current date is always saved on field.
I just want to remove this behaviour : when no date is selected, no date is persist in entity. I don't have any idea for solve this.
Anyone have an idea ?
--
Thx for you help
my field in formtype is :
$builder->add('dateNaissance', 'birthday', array(
'label' => 'form.tiers.dateNaissance', 'translation_domain' => 'GBPCoreBundle', 'required' => false,
'widget' => 'single_text', 'format' => 'dd/MM/yyyy', 'input' => 'datetime', 'attr' => array('class' => 'datepick')
))
My view is :
{{ form_row(form.dateNaissance) }}
My entity is :
/**
* #var \Date
*
* #ORM\Column(name="dateNaissance", type="date", nullable=true)
* #Assert\Date(message="La date de naissance {{ value }} doit être un type {{ type }} valide.")
*/
private $dateNaissance;
and my consctructor is empty, i didn't set default value
My controller is very basic, i don't act on this field
First, verify your entity date field have nullable option like nullable=true
Then, If the problem persists, and you can't find any option to do this trick, you can use Javascript.
On document load, set the datepicker value with an empty string, using jQuery it's like :
$(document).ready(function(){
$('#dateField').val('');
});
Now, the default value is empty, and if value change (user choose a date), you save the date, else you save NULL or ''
Now I tried a bit around with Zend_Dojo_Form. The elements do not work like expected. The only element which is working is the checkBox.
To see for everybody here a screenshot:
Here a snippet of my formclass:
$this->addElement('DateTextBox','datum',array(
'label' => 'datum',
'datePattern' => 'dd-MM-yyyy',
'required' => 'true'
));
$this->addElement('TimeTextBox','zeit',array(
'label' => 'Uhrzeit',
'timePattern' => 'HH:mm',
'required' => 'true'
));
$this->addElement('CheckBox','test',array(
'label' => 'ja Nein',
'checkedValue' => 'yes',
'uncheckedValue' => 'nein',
'checked' => 'true'
));
$this->addElement('editor','test1',array(
'label' => 'Editor',
'plugins' => array('redo',
'undo','|','bold','italic','underline'),
'editActionInterval' => 2,
'height' => '100px'
));
My form extends Zend_Dojo_Form
I want to use date and time, don't mind I tried the others also to see if Zend_Dojo is found.
The date and time elements don't drop down on click, they just show like in the screenshot an X and a second row.
EDIT:
I have the dojo like follows in my application.ini
resources.view.helperPath.Zend_Dojo_View_Helper = "Zend/Dojo/View/Helper"
In my layout.phtml:
if ($this->dojo()->isEnabled()){
$this->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE);
$this->dojo()->setCdnDojoPath(Zend_Dojo::CDN_DOJO_PATH_GOOGLE);
//$this->dojo()->requireModule('dijit.form.DateTextBox');
echo $this->dojo();
}
Do I need something else?
now it works, because I tried around to solve my errors the stylesheet was missing. So I added in my layout.phtml the stylesheet:
$this->dojo()->addStyleSheetModule('dijit.themes.tundra');
I want to change the browser's default confirm dialog (data-confirm) box which comes on click of delete button.
I want to replace this with custom dialog box.
Following is my Gridview Code:
<?=
GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
//['class' => 'yii\grid\SerialColumn'],
'account',
'code',
[
'class' => 'yii\grid\ActionColumn',
'header' => 'Action',
'template' => ' {update} {delete}',
'buttons' => [
'update' => function ($url, $model) {
return Html::a('<span class="btn-xs btn-primary">Edit</span>', $url, [
'title' => Yii::t('app', 'Edit'),
]);
},
'delete' => function ($url, $model) {
return Html::a('<span class="btn-xs btn-danger">Delete</span>', $url, [
'title' => Yii::t('app', 'Delete'),
//'data-confirm'=>'Are you sure you want to delete this item?',
'data-method'=>'POST'
]);
}
]
],
],
]);
?>
My JQuery code:
confirm: function (message, title, okAction) {
$("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Ok": function () {
$(this).dialog("ok");
okAction();
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
},
resizable: false,
title: title,
modal: true
}).text(message);
}
});
$(document).ready(function () {
$(".delete-row").click(function () {
$.confirm("Are you sure you want to delete this item?", "Production Control WF");
});
});
However the confirm dialog box appearing after implementation of this code but simultaneously its redirecting as well without clicking on any button.
Any help would be appreciated.
My answer contains two parts:
Replacing the default confirm-dialog
Using SweetAlert as the replacement
In the first part I explain the procedure to replace the default confirmation-dialog. This is the official and proper way to replace the Yii2-confirm-dialog globally.
In the second (optional) part I show how to use SweetAlert in Yii2 to replace the dialog.
Replacing the default confirm-dialog
Its pretty easy actually since the yii.js was overhauled since the launch of Yii2. You have to create a JS-file which you deploy to your web folder. This is done as follows:
1. Create folder for JS-File
In your web folder create a folder named js (or whatever name you wish)
2. Create the actual JS-File
In the folder from step 1 create a JS-file named for example yii_overrides.js
In this file you override the yii.confirm variable with your own handler-method.
My yii_overrides.js looks like this:
/**
* Override the default yii confirm dialog. This function is
* called by yii when a confirmation is requested.
*
* #param string message the message to display
* #param string ok callback triggered when confirmation is true
* #param string cancelCallback callback triggered when cancelled
*/
yii.confirm = function (message, okCallback, cancelCallback) {
swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
allowOutsideClick: true
}, okCallback);
};
The swal function calls the SweetAlert-Projects beautiful alert-box. Feel free to use whatever confirmation-style or -extension you want. SweetAlert looks awesome though...
3. Add JS-File to your Yii2-asset-bundle
Open assets\AppAsset.php and add your JS-File to assure it will be added to your HTML-header. Your file should look something like this now:
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
//HERE!
'js/yii_overrides.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
//additional import of third party alert project
'app\assets\SweetAlertAsset',
];
}
Also make sure to include the asset of your custom alert-library if necessary. You can see this on the last line of the $depends-variable in the code above.
Adding SweetAlert
If you want to use SweetAlert as well, here is how you do it. There is a yii2-extension available providing you with an asset-bundle, but it is not current and uses old filenames. It therefore doesn't work. But its VERY easy to do it yourself.
1. Add dependency to SweetAlert
In your composer.json add
"bower-asset/sweetalert": "1.1.*"
to the required section and trigger composer update. You now have the necessary files.
2. Create SweetAlertAsset
Create a file named SweetAlertAsset.php next to your AppAsset in the assets-folder of your project. This is the content:
<?php
namespace app\assets;
class SweetAlertAsset extends \yii\web\AssetBundle
{
public $sourcePath = '#bower/sweetalert/dist';
public $css = [
'sweetalert.css',
];
public $js = [
'sweetalert.min.js'
];
}
Reference it within AppAsset as seen further above.
3. Done
Easy, wasn't it!?
Based on Sweet Alert 2.0 updates
i've modify the answer by PLM57
SweetAlert has changed callback functions to promises.
Here is the example override code for promise implementation:
/**
* Override the default yii confirm dialog. This function is
* called by yii when a confirmation is requested.
*
* #param string message the message to display
* #param string ok callback triggered when confirmation is true
* #param string cancelCallback callback triggered when cancelled
*/
yii.confirm = function (message, okCallback, cancelCallback) {
swal({
title: message,
icon: 'warning',
buttons: true
}).then((action) => {
if(action){
okCallback()
}
});
}
For more info on update from 1.x to 2.x, refer to this
Short and simple way.
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view} {update} {delete}',
'buttons' => [
'delete' => function ($url, $model, $key) {
return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
'data-method' => 'post',
'data-pjax' => 0,
'data-confirm' => 'Your message text'
]);
},
]
i think you only need to change $url to #
return Html::a('<span class="btn-xs btn-danger">Delete</span>', "#", [
'title' => Yii::t('app', 'Delete'),
//'data-confirm'=>'Are you sure you want to delete this item?',
'data-method'=>'POST'
]);
https://github.com/rbartholomay/ExtJS.ux.HtmlEditor.Plugins is a group
of ExtJS4 compatible plugins for a htmleditor field.
What would be the best way of using these plugins in a Netzke form panel that contains a htmleditor field?
More in general, I would like to know how to use ExtJS plugins in Netzke.
Here is some of my code:
class DocumentForm < Netzke::Basepack::FormPanel
config do
{
:title => "Edit Document",
:items => model_fields
}
end
def model_fields
[{
:xtype => 'textfield',
:field_label => 'Title',
:name => 'title',
:allowBlank => false,
:read_only => false
},
{
xtype: 'htmleditor',
name: 'body',
field_label: 'Bodytext',
height: 300,
anchor: '98%',
read_only: false,
}]
end
I would like to make some changes to the toolbar of the htmleditor, but can't figure out how to specify this in Netzke. Please help.
It's depend on ExtJS4 API. you can pass any config properties of htmleditor direct to your item hash config like
{
:xtype => :htmleditor,
:some_config => "some_value"
}
because when you use ":xtype" netzke will create ExtJS component with your prefer configuration.It's not Netzke component. (like Netzke::Basepack::Panel is different from :xtype => :panel)
What do you meed "to make some changes" ? I think you want to delete some basic staff from htmleditor such as font, hyperlink, yeah?
This is easy:
xtype => 'htmleditor',
name => 'body',
field_label: 'Bodytext',
height => 300,
anchor => '98%',
read_only => false,
enableColors => false,
enableAlignments => false,
enableFont => false,
enableFontSize => false,
enableFormat => false,
enableLists => false
I think this is what you are looking for.