I have some troubles including AlloyUI in my Liferay Portlet.
Following this article, I have generated the following jsp:
<%# taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining
<aui:script>
YUI().use(
'aui-char-counter',
function(Y) {
new Y.CharCounter(
{
counter: '#counter',
input: '#some-input',
maxLength: 10
}
);
}
);
</aui:script>
But the rendered page looks like this:
I made sure that the taglib is correctly defined in the web.xml:
<taglib>
<taglib-uri>http://liferay.com/tld/aui</taglib-uri>
<taglib-location>/WEB-INF/tld/aui.tld</taglib-location>
</taglib>
AUI does work, when I include it in the jsp as follows:
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui/aui-min.js" rel="stylesheet"></link>
<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining
<script>
YUI().use(
'aui-char-counter',
function(Y) {
new Y.CharCounter(
{
counter: '#counter',
input: '#some-input',
maxLength: 10
}
);
}
);
</script>
I'm using Liferay 6.1.20 EE GA2
Liferay uses alloy-ui (also referred to asAUI) library developed on top of Yahoo UI (also referred to as yui) library.
The instance terms for both these libraries are different i.e. AUI for Alloy-UI and YUI for the other.
Replacing these terms in your code will resolve your issue i.e. have AUI instead of YUI.
The seed file declaration is all you need to access AlloyUI for this char counter code.
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
You shouldn't need the taglib reference in your web.xml. In fact, you're inhibiting access to the seed file. The taglib you're referencing may be inconsistent with the version of AlloyUI that is expected.
Also, accessing YUI's CharCounter is fine. See the API example at http://alloyui.com/api/classes/A.CharCounter.html.
Related
My website auto clear text in tag input html after 10 minutes. also I set idle timeout session 1 hour
enter image description here
IMO: I think you should use blazor for this if you are using MVC with Razor Pages or some js framework.
The server does not have to manage the presentation layer.
If you just want to clear the text in the HTML input after a certain time then you could try to use setTimeout() function of JavaScript.
In the function, you could reset the input value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script>
const myTimeout = setTimeout(clrval, 3000);
function clrval() {
document.getElementById("txt1").value = "";
}
</script>
</head>
<body>
<h1>This is test page....</h1>
<h2>Textbox value will be cleared after 3 seconds.</h2>
Test Field : <input type="text" id="txt1" value="This is my sample text..."></br>
</body>
</html>
Output:
Let me know if you have further questions.
I have a webgrid with a hyperlink column and upon clicking that link it should open a modal popup I have a modal named #examplemodal in a partial view named"GetDetails". Below I try to open the modal from a controller action method that returns partial view.
#Html.ActionLink("OrderNumber","GetDetails","Home",
new{id = item.ID}, new{data_target="#exampleModal", data_toggle="modal", #class="modal-backdrop"});
When I click on the link with Ordernumber screen blacks out and I dont see the grid at all. Any pointers on where I am doing a mistake. I am using asp.Net mvc5 and bootstrap v4.3.1
I think your concept is totally wrong. I assume you want to display the order details in a modal? And since you have a method to return a partial view for that already, you want to load that order details content into modal whenever the user clicks the hyperlink column?
If that's the case, bootstrap modal is not the right tool for you. It's designed to load static content. If you want to load dynamic content, i.e., order details for different order numbers, you should look into a concept called iframe, and libraries like Fancybox, etc.
Here's what I would do:
1.Define a modal layout
Because you want to display the partial view on a modal, you generally don't want to have things like sidebar, top navigation, etc, from your site layout. Hence I will define a layout for modals.
<!-- _PopupLayout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- All your necessary styles, meta data, etc -->
<title>...</title>
#RenderSection("css", required: false)
</head>
<body>
<main class="container-fluid">
#RenderBody()
</main>
<!-- All your necessary javascripts -->
#RenderSection("scripts", required: false)
</body>
</html>
2.Return views that use _PopupLayout
I know you've created partial views. But regular view is fine. In fact, it's better because you can setup the layout the regular view uses, as well as the view models for that.
Because you want this view to look like a bootstrap modal, you should construct your view using bootstrap modal structure.
#model ...
#{
ViewData["Title"] = "Order Details";
Layout = "~/Views/Shared/_PopupLayout.cshtml";
}
<div class="modal-header">
<h5 class="modal-title">Order Details</h5>
</div>
<div class="modal-body">
...
</div>
3.Write JavaScript to trigger FancyBox on link clicking
You can use a custom css class for the selector for all links you want to load the iframe from. In my case I call it .popup-fancy. You can also define multiple classes for popping up different sizes of modals/fancybox modals.
$(function() {
$().fancybox({
selector: 'a.popup-fancy',
defaultType: 'iframe',
baseClass: 'fancybox-md',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-lg',
defaultType: 'iframe',
baseClass: 'fancybox-lg',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-xl',
defaultType: 'iframe',
baseClass: 'fancybox-xl',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
});
See how it sets the default type to iframe? You can find those configuration options from Fancybox documentation. Not to forgot those 3 base classes styles (I'm using Sass):
.fancybox-md {
.fancybox-content {
max-width: 36.75rem;
}
}
.fancybox-lg {
.fancybox-content {
max-width: 65.625rem;
}
}
.fancybox-xl {
.fancybox-content {
max-width: 78.75rem;
}
}
4.Create links to open modal
Now you can create links with any of those fancybox trigger classes:
<a href="#Url.Action("details", "order", new { area = "", id = item.Id })"
class="popup-fancy">
See Order Details
</a>
I assume you have the order controller and details action method all setup to return a view that uses the _PopupLayout, then when the user clicks on the link, instead of the regular redirect to the page using standard layout, the page content should be loaded into the fancybox modal.
For example:
If you can only use bootstrap modal??
In that case, you will have to create a modal template (probably in the layout so that it can be called anywhere) with an iframe inside. And then on link clicked, you use javascript to set the source of the iframe and manually popup the modal.
Sample of modal template
<div id="fancy-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
Then on the page where you generate links, instead to generate actual links, you will have to generate the modal triggers:
<a href="#" class="fancy-modal-trigger"
data-iframe-src="#Url.Action("details", "order", new { area = "", id = item.Id })">
See Order Details
</a>
See here you put the actual link to your view on a data-attribute instead of href, because you don't want the link to actually navigate to the destination.
$(function() {
$('a.fancy-modal-trigger').click(function() {
let iframeSrc = $(this).data('iframe-src'),
$fancyModal = $('#fancy-modal');
$fancyModal.find('iframe').prop('src', iframeSrc);
$fancyModal.modal('show');
return false;
});
});
DISCLAIM: this is not yet tested.
I'm new on Thymeleaf template engine, and I'm making an application with Spring Boot and Spring MVC. I'm working just with application.properties for the configuration.
I want to know how I can write only ONE layout but the contents in many files: for example content1.html, content2.html, etc. and use the layout that already have the header, the footer.
If it is possible, how can I send from the controller the content file that will be replaced in the layout?
You could do something like this. Let's say you create a page where all other content will be embedded - main.html. It will look something like this:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="mainPage(page, fragment)">
<h4>Some header</h4>
<div th:include="${page} :: ${fragment}"></div>
<h4>Some footer</h4>
</div>
</html>
Then you want to create some page which will be embedded in your main.html page - some-page.html:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="somePage">
<h1>${title}</h1>
</div>
</html>
The goal is to replace <div th:include="${page} :: ${fragment}"></div> within main.html with the content from some-page.html. In controller, that will look like this:
#Controller
public class DemoController {
#RequestMapping
public String somePage(Model model) {
// Note that you can easy pass parameters to your "somePage" fragment
model.addAttribute("title", "Woa this works!");
return "main :: mainPage(page='some-page', fragment='somePage')";
}
}
And there you go! Every time when you want to swap content in main.html, you just change page and fragment parameters within string in your controller.
I have a xxx component, which when used with the riot-tag attribute and a standard HTML5 tag, works correctly: <article riot-tag="xxx"></article>. However when I use the riot-tag attribute inside of a loop, the tag is empty: <article each="{xxxTags}" riot-tag="{xxx}"></article>. Is using riot-tag in a loop possible at all? How can I make it work?
Additional explanation:
I have to generate several different, albeit similar components one by one. So I have an array to store them:
var xxxTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
Putting any of the textareas one by one manually for all of: xxx, yyy, zzz works fine and generates the respective components. However when I try to do it with each, they end up empty (no children) in chrome devtools, BUT otherwise identical to the ones put manually.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<my-tag></my-tag>
<!-- inlined tag definition -->
<script type="riot/tag">
<my-tag>
/*Standard, manual addition of different components (works)*/
<xxx></xxx>
<yyy></yyy>
<zzz></zzz>
/*Standard addition of same components in a loop (works)*/
<div each={myTags}>{tag}</div>
<br>
/*Addition of different components with "riot-tag" manually (works)*/
<div riot-tag="xxx"></div>
<div riot-tag="yyy"></div>
<div riot-tag="zzz"></div>
/*Addition of different components with "riot-tag" in a loop (DOESN'T WORK should look like the example above)*/
<div each={myTags} riot-tag="{tag}"></div>
this.myTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
</my-tag>
<xxx>
<p>X content</p>
</xxx>
<yyy>
<p>Y content</p>
</yyy>
<zzz>
<p>Z content</p>
</zzz>
</script>
<!-- include riot.js and the compiler -->
<script src="//cdn.jsdelivr.net/g/riot#2.2(riot.min.js+compiler.min.js)"></script>
<!-- mount normally -->
<script>
riot.mount('*');
</script>
</body>
</html>
Okay, looks, like the tags with riot-tag attribute are not mounted when generated with an each-loop (still looks like a bug?). For the above-mentioned code, adding this does the job:
this.on('mount', function() {
for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});
How do I create a component (like a footer section) and include it on a page?
I read stuff like markup inheritance, but that doesnt sound right (how would you re-use a footer section component in different pages when it can only inherit from a single page).
This is my 2nd day of using Wicket and wicket-library.com has some great examples, but at the moment it seems to be down when you try to view the source.
Thank you.
Create a basepage with header, footer, menu etc. Then extend you pages from that page. Use it like this:
public class BasePage extends WebPage {
public BasePage() {
add(new HeaderPanel("header"),
new FooterPanel("footer"),
new MenuPanel ("menu" ));
}
}
With this html:
<html xmlns:wicket>
<body>
<div wicket:id="header">
<div wicket:id="menu">
<wicket:child></wicket:child>
<div wicket:id="footer">
</body>
</html>
You would need to create a HeaderPanel, FooterPanel and MenuPanel.
Your child page example:
public class MyPage extends BasePage { ...}
Which has this html:
<html xmlns:wicket>
<body>
<wicket:extend>
</wicket:extend>
</body>
</html>
You can also create a no-menu basepage etc. The components and html you add to your child page will be placed between the tags of the basepage.