mustache.js: ok to add entire page as mustache container? - javascript

I am trying to use mustache.js to deliver a multi-language version of my website. Therefore I am wondering if it is ok to add a <div id="mainContainer"> inside my <body> tag that contains all HTML elements of the page and then all mustache tags inside that big container via the usual:
var template = $('#mainContainer').html();
var html = Mustache.to_html(template, mustacheData);
$('#mainContainer').html(html);
It seems to work but I am wondering if there are pitfalls here (e.g. performance of reading, rendering and setting html of an entire page?). I have a dynamic bootstrap page with a couple of pages. The mustacheData would obtained the localized strings from a server in a specific language.

Related

How to inherit CSS of parent site and apply it on HTML rendered using Javascript?

I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.

Browser removes nested body tag

I have some basic pre-made html temapltes, some text elements within these templates are editable. The template is dynamically loaded into a wrapper div, edited and then saved. This works perfectly.
Basic example:
HTML
<div id="html-wrapper"></div>
Json response and load template into #html-wrapper
$('#html-wrapper').html(data.htmlTemplate);
Save via ajax after editing
data = {};
data.html = $('#html-wrapper').html();
// send via ajax
The above code saves everything fine. The only problem is - the templates html and body tags are stripped out by the browser. I assume the browser is trying to be clever by sripping out nested html and body tags. Is there a way around this?

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

Ruby on Rails / Javascript - How to tell if content was generated dynamically?

I have a Rails application that uses a CMS to render content in the view pages.
I'd like to be able to know if a certain HTML tag has content that was generated by the CMS.
For example, in my index.html.haml, I could have:
%p= #instance_variable.content
If I hover over the <p> tag in the front-end pages, I'd like to have a popup of some sort telling me it has content generated by a CMS.
Can this be done automatically?
I don't want to have to go through every view template and have to manually populate each tag with a data-cms="true". Is this possible? How do I go about doing this? Where do I begin?
Non-trivial if you don't want to be invasive and there's nothing in place already to identify that content.
My first thought is to decorate the content getter with something that embeds it in a <span> tag with a data- attribute, html_safe it, and renders it within the existing <p> tag.

AngularJs: bind server-side rendered html to iframe

my angular app is an html editor which sends the template to a server where it is rendered with dynamic data and returned to the client where it should be inserted into an iframe (for preview purpose). ng-bind-html seams not to work in combination with an iframe. is there a way to set the content of an iframe dynamically with angularjs?
edit:
the main problem of these templates is that they correspond to completly independent html documents (doctype, css, markup, etc.); hence it is necessary to encapsulate the rendered result within some kind of sandbox.
I don't know how to send content to iframe but you can use ng-include instead of iframe.
<div ng-include="frameUrl" ></div>

Categories