I'm trying to use genemu autocomplete to display a list of entities. I followed every step, but for some reason, it doesn't work : all I got is a text input, and nothing shows up when I type something inside.
So far, my build looks like this :
->add('departure', 'genemu_jqueryautocompleter_entity', array(
'class' => 'AOFVH\FlyBundle\Entity\City',
'property' => 'name',
))
Twig template looks like this :
<form id="msform" class="form-inline" role="form" method="post" {{ form_enctype(search) }}>
<!-- progressbar -->
<div class="form-group">
{{form_widget(search.departure)}}
</div>
<div class="form-group">
{{form_widget(search.arrival)}}
</div>
<hr>
<div class="form-group">
{{form_widget(search.passengers)}}
</div>
<div class="form-group">
{{form_widget(search.precisedate)}}
</div>
<hr>
<button type="submit" class="btn btn-default hp3">CHERCHER</button>
</form>
And I included jquery and jquery-ui. What did I miss ?
Most of these bundles comes with javascript and css of their own. Did you included them? I believe that you use GenemuFormBundle? If that is correct, there is paragraph for that as well:
You use GenemuFormBundle and you seen that it does not work! Maybe you have forgotten form_javascript or form_stylesheet.
The principle is to separate the javascript, stylesheet and html. This allows better integration of web pages.
Take a look at their example page: Docs.
Related
When I use an anchor tag without an href="" all is good and the button style is there, the second a add an href it completely removes the anchor tag and leave only the text inside the parent div
without href:
<div class="container">
<a class="button"> my button</a>
</div>
result in browser devtools
<div class="container">
<a class="button"> my button</a>
</div>
with href
<div class="container">
my button
</div>
result in browser
<div class="container">
my button
</div>
Looks like this could be the work of the link checker. Try adding x-cq-linkchecker="skip":
<div class="container">
<a x-cq-linkchecker="skip" href="/content/mypage.html" class="button"> my button</a>
</div>
I guess it might be also related to xssconfig
as you add 'href' attribute to div in your example
<div href="/content/mypage.html" class="container">
<a class="button"> my button</a>
</div>
In general it is not allowed, therefore AEM can remove it
/libs/cq/xssprotection/config.xml
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
I am using materializecss for the first time in my web application and
I am struggling with datepicker. It is not working at all.
I imported materialize.css and js file and use the code
<div>
<input type="date" class="datepicker" />
</div>
and added script code
$(document).ready(function() {
$('select').material_select();
window.picker = $('.datepicker').pickadate({
selectYears: 16, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
but nothing worked, it shows a disabled text box.
Also I want to know how to add timepicker in materializecss?
I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.
cheers
Thomas
First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.
check my code in init.js for initialization, CSS and JS Materialize via cdn
$(document).ready(function() {
$('.modal').modal();
//this are my init
$('#dtp').datepicker();
$('#dtp').setDate(new Date());
});
<html>
<head>
<!-- this is my CSS via cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="row">
<form class="col s12 m6 card">
<div class="row center">
<h4>Materialize DateTime Picker</h4>
<div class="input-field col s12 m12">
<input id="dtp" type="text" class="datepicker">
<label for="dtp">Birthday</label>
</div>
</div>
</form>
</div>
<!-- this is my JS via cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Check the documentation from Materialize website, it is always helpful for programmers like me.
Hope this answer help you
Try to run my Code Snippet
<div class="row">
<div class="input-field col s12">
<input id="idate" type="text" name="idate" class="datepicker" >
<label for="idate">Issue Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
How can I perfectly align and space my inline inputs forms in bootstrap
<div class="form-group col-lg-12">
<div class="col-lg-6">
<input type="text" class= "form-control" value="First Name">
</div>
<div class="col-lg-6">
<input type="text" class= "form-control" value="Last Name">
</div>
</div>
Use col-xs instead of col-lg
see this for a try
And keep all your input inside the
`<div class="form-group col-xs-12">`
I don't quite understand our question very well, maybe a picture to illustrate what you want to achieve would be helpful.
I have basically wrapped everything with a column-xs-12 so its perfectly aligned. Also included an example if you want to place two input forms on one line. I have made a plunk to help you out, hope it helps.
<div class="col-xs-12"> </div>
http://plnkr.co/edit/lj866U6QlvbLKhF4jujI?p=preview
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).