Using Foundation 5 attributes in JSF [duplicate] - javascript

This question already has an answer here:
Custom HTML tag attributes are not rendered by JSF
(1 answer)
Closed 7 years ago.
I've searched high and low and cannot find anything for this particular use-case for Zurb Foundation framework.
Working on a small JSF project that I am testing Foundation 5.1.1 with, however I'm having issues getting the Foundation attributes (data-topbar, reveal-modal, etc) to work. Instead it results in the following error. The project is running on a local port via Glassfish 4:
An Error Occurred:
Error Parsing /includes/content/content.xhtml: Error Traced[line: 18] Attribute name "data-reveal" associated with an element type "div" must be followed by the ' = ' character.
The code block I using to access the modal is:
<div class="medium-8 columns pw">
<p class="panel callout">This is a modal</p>
</div>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Test Header.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">X</a>
</div>
Has anyone else run across this error before?

On Mojarra 2.2.12, you can render empty attribute and 2.2.10 for Myfaces.
Bug on Mojarra.
Bug on Myfaces.
What I suggest you is to take a JSF component with the JSF 2.2 passthrough feature. If you want to refresh it with AJAX, you must use a component.
Example :
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
<h:panelGroup id="myModal" p:data-reveal="data-reveal"
styleClass="reveal-modal" layout="block">

Related

Unable to update element ID of HTML text using Javascript Jquery [duplicate]

This question already has answers here:
jquery executes too fast
(2 answers)
Closed 1 year ago.
Using JS and AJAX, I am loading a template file on my Index.html page.
Once the template is loaded, I then want to apply changes to the DOM.
The template is successfully loading on the index.html page.
The JS is FAILING to update the DOM elements.
What am I doing wrong?
I have 2 html pages.
index.html
page-banner-area.html
index.html
<div id="page-banner-area"></div>
<script>
$(function(){
$("#page-banner-area").load("assets/static_html/page-banner-area.html");
$("#title").text('Join a Community Group in your area.');
$("#keypoint-1").text('We are against mandatory vaccines & passports.');
$("#keypoint-2").text('We do not stand for corruption & censorship.');
$("#keypoint-3").text('We believe in freedom!');
});
</script>
page-banner-area.html
<div class="p-2 flex-grow-1">
<h3><span id="title"></span></h3>
<span id="keypoint-1"></span><br />
<span id="keypoint-2"></span><br />
<span id="keypoint-3"></span>
</div>
The problem is that the load() method is asynchronous, you need to do your changes within a callback method in order for them to be properly applied. See the JQuery docs for more information https://api.jquery.com/load/
As for a solution, you should be doing this instead:
$(function(){
$("#page-banner-area").load("assets/static_html/page-banner-area.html", function() {
$("#title").text('Join a Community Group in your area.');
$("#keypoint-1").text('We are against mandatory vaccines & passports.');
$("#keypoint-2").text('We do not stand for corruption & censorship.');
$("#keypoint-3").text('We believe in freedom!');
});
});
I thinks this can solve your problem!
<div id="page-banner-area"></div>
<script>
$(() => {
$("#page-banner-area")
.load("assets/static_html/page-banner-area.html", () => {
$("#title").text('Join a Community Group in your area.');
$("#keypoint-1").text('We are against mandatory vaccines & passports.');
$("#keypoint-2").text('We do not stand for corruption & censorship.');
$("#keypoint-3").text('We believe in freedom!');
});
});
</script>

Injecting <br/> tag form a Json file is not working on an Angular page [duplicate]

This question already has answers here:
Angular HTML binding
(24 answers)
Closed 4 years ago.
I am trying to get the Line Break element working on my Angular page, injecting it form my Json file, with not luck.
I had a look to the following question: SO similar question but I think I have got a different scenario.
My scenario:
JSON FILE
{
"boxLeft": {
"boxLeftHeaderDesktop": "HOURS PER <br/> WEEK",
}
}
ANGULAR:
Angular version: 1.4.9
<div class="header">
{{boxLeft.boxLeftHeaderDesktop}}
</div>`
RESULT - rong
HOURS PER <br/> WEEK
WHAT I HAVE TRIED:
1: {{locale.earnings.boxLeftHeaderDesktop | raw}} - not working
2: <br \/> - not working
3: <div class="header">
<div [innerHTML]="boxLeft.boxLeftHeaderDesktop"></div>
</div> - not working
Please, is there any other solution which I could try to use?
HOW I HAVE SOLVED IT:
using: angular-sanitize.js
use the innerHTML to render the html tags
<div class="header">
<div [innerHTML]="boxLef.boxLeftHeaderDesktop"></div>
</div>

JavaScript span.appendChild() Returns Uncaught TypeError From Console [duplicate]

This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 5 years ago.
I'm sort of a novice with HTML and JavaScript, but I'm running into some trouble with this one.
I have the following code snippet:
<div data-contents="true">
<div class="" data-block="true" data-editor="369vc" data-offset-key="e371k-0-0">
<div data-offset-key="e371k-0-0" class="_1mf _1mj">
<span data-offset-key="e371k-0-0">
<span data-text="true">TEXT HERE</span>
</span>
</div>
</div>
</div>
I'm trying to insert text where the "TEXT HERE" resides using the following commands (as found on this Stack Overflow thread) from within the console:
span = document.getElementById("data-text");
txt = document.createTextNode("TEXT HERE");
span.appendChild(txt);
However, when I run that command, all I get in return is Uncaught TypeError: Cannot read property 'appendChild' of null at <anonymous>:3:6.
I've read it's caused by the element not being defined prior to the script running, so it's unable to assign the text to it. I'm not fully clear on why it wouldn't run even though the website has already loaded though. Any ideas? I'm hoping to eventually hook this to a button that's loaded on the webpage, instead of it automatically running upon load if that makes sense.
NOTE: I'm not creating a website from scratch. This is a script being used on Facebook by TamperMonkey, so I can't permanently load it into the webpage.
You call this:
span = document.getElementById("data-text");
But don't have any id called data-text.
Either change the code to this:
span = document.querySelector("[data-text]");
Or change the html to this:
<span id="data-text" data-text="true">TEXT HERE</span>
Notice the id="data-text" That is what getElementById is looking for.

Inject html after review widget loads for schema markup

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>
Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

Error when attempting to get all elements with specific Class [duplicate]

This question already has an answer here:
Parse a responseText to HTML in VBScript
(1 answer)
Closed 7 years ago.
I have an HTA in which I must update the innerHTML of a set of elements with the class driveLetter. Before I do this I must obviously grab an array of all elements with this class.
I've tried doing this with JS, however I'm told via an error that both of the methods below are not supported (Tested with IE9 and IE11). Using these functions within an HTML file works, but this is an HTA.
var driveLetterInstances = document.getElementsByClassName("driveLetter");
var driveLetterInstances = document.querySelectorAll(".driveLetter");
The errors generated by lines above -
Object doesn't support property or method 'getElementsByClassName'
Object doesn't support property or method 'querySelectorAll'
I don't specifically have to use JS and would be open to using VBS to carry out this function, but I have no clue on how to start with that (or even if it's possible).
To replace the innerHTML of set elements you could always just do something as simple as one line like this:
JQuery Solution 1:
// Find all the elements with the class name ".driveLetter" and replaces with "new content"
$(".driveLetter").html("new content");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- All elements with the same class name to be replaced with new content -->
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
JQuery Solution 2:
// Loop through the classname
$('.driveLetter').each(function(key, value) {
value.innerHTML = "New Content";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- All elements with the same class name to be replaced with new content -->
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
JQuery can be used by calling it from JQuery website or can be stored locally
Example from getting from online
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Example from getting from local file
<script src="js/jquery.min.js"></script>
Explanation of querySelectorAll()
I believe IE8 only supports querySelectorAll() in the standard mode. REF: Check this
The Selectors API is defined as part of the Selectors API
specification and is only available to Web pages displayed in IE8
standards mode.
Selectors API
The chances are that you're not setting the proper DOCTYPE declaration; you will need to add one.

Categories