Is there a way to update the preRenderView components with ajax?
Some example:
<html>
<f:event type="preRenderView" listener="#{bean1.load}" />
<f:event type="preRenderView" listener="#{bean2.load}" />
<body>
<div jsf:rendered="#{bean1.enabled}" >
// some code here
</div>
</div jsf:rendered="#{bean2.enabled}" >
// some code here
</div>
</body>
</html>
In this example, i want the preRenderView of case 1 only be fired if bean1 is enabled. Adding a check in java code is not a good idea, because the session will be invoked everytime and i have a way more complex thing than the simple sample above.
Can i wrap the f:events in any component? Add a rendered attribute to the component and update them with an ajax call?
As far as i know, it's not allowed to add any other components as head or body as children of the html tag.
Is it allowed to pack the preRenderView inside the body element and wrap it with a simple jsf:div?
Use the preRenderComponent event instead and put those f:events inside the divs.
I'm not sure if it will play nicely with this kind of JSF binding though. You may have to replace those divs with h:panelGroup layout="block" (which renders simple divs as well).
Related
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I have a component A with its html/ts file. When I inherit a second component B from A, this will take all properties and method on the first. If I want to use the component A html, I can reference the comp A html in the templateUrl property.
I have a problem. I want use the component A html, but I want extend it. So my idea is "include" the first component html to the second. It's possible in Angular2? Is there another way?
I don't want to create an instance of component A in the component B. I want only the html markup.
EDIT:
In this example there is my problem:
https://stackblitz.com/edit/ng-content-projection-lzjwea
when I inherited the Hello2 ts, If I create an instance of hello component in hello2 html, it take its name property. I found three solutions:
Change all properties that need to be used in all inherit component to input and inject the
Duplicate html code
Find a way to reference the html of first component without creating an instance of it.
I think the best solution is the third. But I don't know a way to do it..
ng-content could be used to project dynamic content in a component.
For example, consider the following
hello.component.html
<div id='border'>
<h1>Base Component</h1>
<p>ng-content could be used for projecting dynamic content within a component</p>
<ng-content>
<!-- Dynamic content goes here -->
</ng-content>
</div>
So, now whatever that is in between
<hello>
<!-- dynamic html here -->
</hello>
app.component.html
<hello>
<div style="border: 2px solid red">
<h2>Child Component</h2>
<button id="sample1"> Sample 1 </button>
<button id="sample2"> Sample 2 </button>
</div>
</hello>
Example
Hope this helps
I have a s:checkbox inside a html div. When the code is run, the checkbox is outside (both) the div and the divs seem to be empty and nonexistant. Why is this occuring and how can I fix it? When I place random text inside either div, the div contains it. I set the background color to red so I can detect the div.
<div id="outer">
<div id="inner">
<s:checkbox name="chBx" id"chBx" fieldValue="false" value="true" label="Check
This" />
</div>
</div>
Like described in this answer (that you should consider upvoting too), Struts2 generates (or not) a certain kind of HTML when rendering Struts Tags, basing on the Theme you have chosen.
The default one is xhtml, that will generate a lot of stuff for you. It may be handy, but also annoying, according to how you work. Personally I prefer to generate the HTML by myself, and then I use the theme that won't generate almost any HTML: the simple Theme.
Note that when working on big projects or with multiple projects with the same, particular needs, you can also write your own custom theme (for example for generating security tokens automatically).
You can use a theme globally (in struts.xml)
<constant name="struts.ui.theme" value="simple" />
or locally to a single tag / form:
<s:checkbox name="chBx" id"chBx" fieldValue="false"
theme="simple"
value="true" label="Check This" />
In this case, you may need to write the <label> object by yourself.
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>
I have a webapplication where (as in many other ones out there) you click on an image to do something, for instance, mark an entry, send a mail, flag something...
Short, clicking on the image is supposed to call an action (via javascript, but that's not the point).
I was wondering, what is the "right" way to do this?
<a>-tag? Hmm... actually it is not a link...
<button>? Because obviously a button is the semantic element for calling an action...
<div>?
Any hints?
Short Answer
Use an <img> - not a button or an anchor or an input - as the rest suggest that the element is interactive, even without JavaScript.
Long Answer
clicking on the image is supposed to call an action (via javascript, but that's not the point).
I disagree; that is the point :)
Because the clicking activates JS-only features, your image should only be available in a JS environment.
As such the proper way is to insert it with JavaScript; while an HTML document should be semantically correct, a DOM structure doesn't really need to be semantically correct, so which element you use becomes irrelevant.
The Wrong Way
<div>
Click on the image to do something:
</div>
<div>
Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>
These are all wrong because a user who doesn't have JavaScript sees these items and can't use them.
Of all of these, I'd say the <img> is the lesser evil, as it doesn't suggest an interactive element. The greatest evil is using the <a> as an anchor should be a hyperlink to another document, and you should never, ever use the javascript: protocol.
You'll still have the same problem when you add the JavaScript event handlers externally:
/* external .js file */
document.getElementById("myButton").onclick = wtv;
<!-- HTML document -->
<div id="myButtonParent">
Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)"> </a>
</div>
As, again, you still have the (non-functioning) hyperlink available to those users who don't have JavaScript.
Instead
Instead, insert the whole damn thing using DOM scripting! I'm going to use an <img> with an onclick event:
/* external .js file */
window.onload = function() {
var img = document.createElement("img");
img.src = "...";
img.onclick = wtv;
img.style.cursor = "pointer"; // so the mouse turns into a finger,
// like on a hyperlink
// Note: instead assign a class attribute and put this in an external CSS file...
document.getElementById("myButtonParent").appendChild(img);
}
You could add an onclick event for the image:
<img id='image1' onclick="javascript:DoSomething()"...
or add it via jquery:
$("#image1").click(
function() {
DoSomething();
});
I don't think you should use an anchor tag here. Anchoring is for navigating not doing things. Not to mention if you use the beforeunload events, they will get fired if you use an anchor.
While the div works it doesn't add anything semantically to the page. You are not defining a distinct chunk of the page you need to make an image clickable.
I don't use a button control enough to talk about that as an option.
Do not quite understand what you want to achieve. But have you tried image input?
<input type="image" src="image source">
It will do an operation similar to form submit.