Mozilla doesn't displays datepicker input - browser

I am using this function to create a date input
public static function date($name, $value = null, $options = array()) {
$input = '<input type="date" name="' . $name . '" value="' . $value . '"';
foreach ($options as $key => $value) {
$input .= ' ' . $key . '="' . $value . '"';
}
$input .= '>';
return $input;
}
And then in my view
<div class="form-group">
{{ Form::label('sgs', Lang::get('messages.sgs').'*', array('class'=>'control-label col-lg-4')) }}
<div class="col-lg-8">
{{ Helpers\Helper::date('sgs', isset($v->sgs) ? $v->sgs : '' , array(
'class' => 'form-control'))
}}
</div>
</div>
In Google Chrome it works, and displays datepicker which is displayed by clicking at a arrow, the problem is with Mozilla Firefox which doesnt displays datepicker and just displays it as a simple input field. Why is happening this

The HTML5 DatePicker is not supported in Firefox. Therefore, you will need to use some custom DatePicker plugin. You can see this for the compatibility reference:
http://caniuse.com/#feat=input-datetime

Related

Laravel :Try Download Excel : Class 'XMLWriter' not found

I am trying download html table as excel file, first in blade template I did this :
<form method="POST" action="{{url('/download')}}" id="download_form">
{{ csrf_field() }}
<table class="table font-weight-bold w-100" id="excel_table">
...........
<button type="submit" id="download" class="btn btn-success">Download to excel</button>
</div>
</form>
<script>
$(document).ready(function(){
$('#download').click(function(){
var table_content = '<table>';
table_content += $('#excel_table').html();
table_content+= '</table>';
$('#file_contente').val(table_content);
$('#download_form').html();
})
})
</script>
the in controller I tried this :
namespace App\Http\Controllers;
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Shared\XMLWriter;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
public function download(Request $req)
{
$filename = $req->stage." ".$req->group . '.xlsx';
$temporary_html_file = './tmp_html/' .time() . '.html';
file_put_contents($temporary_html_file, $req->file_contente);
$reader = IOFactory::createReader('Html');
$spreadsheet = $reader->load($temporary_html_file);
$writer = IOFactory::createWriter($spreadsheet, 'Xlsx');
$writer->save($filename);
header('Content-Type: application/x-www-form-urlencoded');
header('Content-Transfer-Encoding: Binary');
header("Content-disposition: attachment; filename=\"".$filename."\"");
readfile($filename);
unlink($temporary_html_file);
unlink($filename);
}
I get this error :
Class 'XMLWriter' not found A class import is missing You have a
missing class import. Try importing this class:
PhpOffice\PhpSpreadsheet\Shared\XMLWriter.
Note the download is works correctly in locahost server
Just enable gd and xmlwriter in your php extension.
extension=gd2

Show optgroup in selected values in selctize.js

We have a selectize field where multiple values can be selected. These values are grouped in optgroups. To ease understanding, some values can be in multiple optgroups, we would like to see the name of the optgroup in the labels for the selected fields, too. How can we accomplish this?
See following fiddle, if you select "First Item" you do not know which one was selected, Store or Warehouse.
Thanks!
https://jsfiddle.net/4t8fjj7g/1/
HTML:
<select name="test" id="test-select" multiple="multiple">
<optgroup label="Store">
<option data-type="stores" value="1">First item</option>
<option data-type="stores" value="2">Second item</option>
</optgroup>
<optgroup label="Warehouse">
<option data-type="warehouses" value="3">First item</option>
<option data-type="warehouses" value="4">Second item</option>
</optgroup>
</select>
And this is the javascript code:
$('select#test-select').selectize({
searchField: ['text', 'type']
});
Basically, what Daffy has suggested, BUT...
You can use custom rendering functions for dropdown options and for selected items:
$('select#test-select').selectize({
searchField: ['text', 'type'],
render: {
item: itemRenderFunction,
option: optionRenderFunction
}
});
This will allow you to avoid label multiplication in selected items list.
What I did is have the values have the optgroup then the value like optgroup_value then when the form gets submitted on the server or doing something in JS I can get it by exploding the string like:
<select multiple class="my-select">
<optgroup label="taxes">
<?php foreach ( $taxes as $tax) : ?>
<option value="tax_<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></option>
<?php endforeach; ?>
</optgroup>
<optgroup label="Version">
<?php foreach ( $my_versions as $version ) : ?>
<option value="version_<?php echo $version->slug; ?>"><?php echo $version->name; ?></option>
<?php endforeach; ?>
</optgroup>
<optgroup label="Language">
<?php foreach ( $my_languages as $language ) : ?>
<option value="language_<?php echo $language->slug; ?>"><?php echo $language->name; ?></option>
<?php endforeach; ?>
</optgroup>
</select>
then
<?php
foreach ( $_POST['taxes'] as $val ) {
if ( ! empty( $val ) ) {
// $val_parts is an array with
// $val_parts[0] = optgroup only
// $val_parts[1] = the value of the option minus optgroup
$val_parts = explode( "_", $val );
// My use case to add a meta_query to a WP_Query so add filter based on both values
$meta_arg = array(
'taxonomy' => "my_" . $val_parts[0], // custom prefix then optgroup
'field' => 'slug',
'terms' => $val_parts[1] // value
);
// Add to running array and possibly do again
array_push( $args['tax_query'], $meta_arg );
}
}

Template for MIGX MODx

I have some PHP foreach that i have moved to MIGX, now can somebody know how to make template for MIGX, here is my PHP
<?php
$i = 0;
$y = 0;
$active = 'active';
echo '<ol class="carousel-indicators">';
foreach(glob($dir) as $file) {
if ($i < 1) {
echo '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="active"></li>';
$i = $i + 1;
}
else {
echo '
<li data-target="#myCarousel" data-slide-to="' . $i . '"></li>';
$i = $i + 1;
}
}
echo '</ol>';
echo '<div class="carousel-inner">';
foreach(glob($dir) as $file) {
$y = $y + 1;
if ($y == 1) {
echo '
<div class="' . $active . ' item">
<img class="img_book" src="' . $file . '" alt="">
</div>
';
}
else {
$active = 'not-active';
echo '
<div class="' . $active . ' item">
<img class="img_book" src="' . $file . '" alt="">
</div>
';
}
}
echo '</div>';
The MIGX Extra comes with a Snippet getImageList that will parse the values in the MIGX TV and return them based on a Chunk template that you specify.
For example, you could put this snippet call in your Template:
<div class="carousel-inner">
[[getImageList?
&tvname=`myMIGXtv`
&tpl=`myTplChunk`
]]
</div>
The snippet would return the values stored in the MIGX TV named myMIGXtv, in the currently requested Resource, and format the output based on the tpl Chunk names myTplChunk. The content of myTplChunk would be something like:
<div class="[[+idx:is=`1`:then=`active`:else=``]] item">
<img class="img_book" src="[[+file]]" alt="[[+another_migx_field]]">
</div>
The syntax of calling the [[+idx]] placeholder with a : after the tag name, invokes the MODX output modifier class, which supports conditionals.
Here are some reference materials for the methods described above:
Documentation for MIGX getImageList
Documentation for MODX
Output Modifiers
The right way and wrong way to use conditional
MODX Output Modifiers

Concrete 5 Theme: for Menu navigation

i am new to concrete 5, i search alot for theming of Menu (i.e: sub menu's) navigation with image icon and description but not found any related material. i have the following Html:
<div class="menu">
<ul>
<li><span>Hem</span></li>
<ul>
<li><span>New</span><img href="images/first.jpg" /><span class='short-description'>some description</span></li>
<li><span>Nice</span></li>
</ul>
<li><span>Om oss</span></li>
<ul>
<li><span>Om Shine</span><img href="images/second.jpg" /><span class='short-description'>some description</span></li>
<li><span>Uom</span></li>
<li><span>Opasd</span><img href="images/third.jpg" /><span class='short-description'>some description</span></li>
<li><span>Hem</span></li>
</ul>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
</div>
So how i can theme for this in concrete 5. or use like.
<div id="headerNav">
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
</div>
Any idea about it, that how to theme for this in concrete 5 for sub menus with description and image icon.... Thanx.
Open file concrete\concrete\blocks\autonav, and changed line
if ($c->getCollectionID() == $_c->getCollectionID()) {
echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
}
Apply your active class in " tag like
if ($c->getCollectionID() == $_c->getCollectionID()) {
echo('<li class="nav-selected nav-path-selected"><a class="active" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

wordpress wp_nav_menu - add name property to <a>

in wordpress, I am fetching menu using wp_nav_menu() function. It will list menus in following form.
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
</ul>
I want to add one more property to tag. I want it in following form.
<a href="url" name="aa">AA</li>
<a href="url" name="bb">BB</li>
<a href="url" name="cc">CC</li>
name property should have value equal to link text but in lower case. i.e. is menu text is AA then name property should have aa
You can do this with Wordpress Walkers. They can be a bit tricky at first, but very powerful. This is a rough implementation, you would probably need to improve it.
First, you extend the Walker_Nav_Menu to your needs:
class my_nav_menu extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
$output .= '<li><a href="' . get_post_link($item->ID) . '" name="' . $item->post_name .'" >';
$output .= apply_filters( 'the_title', $item->post_title, $item->ID ) ;
$output .= '</a></li>';
}
}
Then you pass an instance of your class to wp_nav_menu:
wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' , 'walker' => new my_nav_menu() ) );
This will output menu elements like this:
<li><a name="test-page" href="http://mydomain.foo/?page_id=1">Test Page</a></li>

Resources