I'm filling my WebApp (Django) template variables in html body data attributes. So that I can access them later through Javascript:
<body data-node_ip={{NODE_IP}}>
<body data-node_port={{NODE_PORT}}>
Later in the Javascript code, I'm accessing the variables through jQuery's data method:
var connection = $("body").data("node_ip") + $("body").data("node_port")
This works well with all modern browsers (IE10, Chrome, FF).
Problem:
However it doesn't work with IE9 or older. IE9 only stores one single value associated to the tag.
My question:
How do I store these template variables in my HTML document (without using Javascript / jQuery) so that they are also accessible down to IE9?
Thanks!
This doesn't seem to be valid. You can only have one body element. But you can and should put all the attributes on that single element:
<body data-node_ip={{NODE_IP}} data-node_port={{NODE_PORT}}>
Why don't you assign them different ids and access them like this:
var connection = $("#body1").data("node_ip") + $("#body2").data("node_port")
Related
I am using default cache setting which is 24hours.
However, when I refresh the page, I see updated html page every time. Why the file is not cached for 24hrs. I didn't set any invalidation mechanism.
Here's the URL: https://dhr5io29ip73w.cloudfront.net/
html file content:
<html>
<h1>Test</h1>
<p id='myTime'></p>
<script>
var d = new Date().toLocaleTimeString();
document.getElementById('myTime').innerHTML = d;
</script>
</html>
Your page includes JavaScript. The JavaScript code runs in the web browser. That means each time you load the page, your web browser executes those JavaScript statements in the <script> tag which includes updating the page with the current time.
CloudFront just caches the raw HTML of the page. It doesn't cache the rendered result.
I am trying to use a single smarty template in both PHP and JavaScript. This works great but I'm trying to figure out how I can use an {include file=""} tag in the template when the JavaScript side expects an element ID and the PHP side expects a file path?
Do the element IDs have to match the path I will use when on the PHP side?
OK I worked out how to do this, I overwrote the js prototype method for jsmart that requests a template by id:
jSmart.prototype.getTemplate = function () {}; // Add your method here
That way I can control what to do with the id including mapping it to a template element with a different ID from the passed path.
I know this question looks old, but would like to answer your question since I came across this question via Google and may happen with many others.
xyz.tpl - Template to be included.
Hello {$name}
pqr.tpl - parent template.
There you see the message
{include file='./xyz.tpl'}
Now in Javascript section of a web page define
jSmart.prototype.getTemplate = function (name) {
// Load template content here of template 'name' via ajax or DOM. Say here in the e.g. it would be './xyz.tpl'.
};
Now just call the parent template
<script>
var tplData = <content of pqr.tpl>; // You can load data in this via ajax or from DOM.
var tplObj = new jSmart(tplData);
var output = tplObj.fetch({'name': 'World'});
alert(output);
</script>
Source:-
https://github.com/umakantp/jsmart/wiki/Include-Templates
Here is the situation:
I have a webservice that returns a form.
This form is then used by many other sites in an iFrame element.
I need the form to "wear" the hosting site's background, color, or in other words CSS (but i will settle for background and logo if this is easier).
My webservice and the other sites are not on the same domain.
I have full control over my webservice and i can define general requirements for all sites.
What is the best way to handle this?
There are several ways to accomplish this:
1 - Pass in a stylesheet as a parameter into the iframe:
Pass in a CSS stylesheet as a query parameter in the src attribute of the iframe. This is perhaps the easiest method, and it gives the owner of that stylesheet more control over how the form looks on that person's site.
<body>
<!-- This is the client's website -->
<!-- This is your form -->
<iframe src="http://example.com/form/abc/?css=http://example.com/file/formStyle.css" />
2 - Pass in the color and logo into the iframe:
This is the same basic idea as in the first example, except you're not referencing an external stylesheet:
<iframe
src="http://example.com/form/abc/?color=#AAAAAA&logo=http://example.com/logo.png" />
3 - Use PostMessage:
Another option is to use the postMessage API. With postMessage, you can pass a message from one context to another, across domains. Thus, the client page could pass the background color to the iframe page, and this could be reused to pass other types of information and data as well.
Iframe code:
// register to listen for postMessage events
window.addEventListener("message", changeBackground, false);
// this is the callback handler to process the event
function changeBackground(event)
{
// make sure the code you put on the client's site is secure. You are responsible
// for making sure only YOU have cross domain access to his/her site.
// NOTE: example.org:8080 is the client's site
if (event.origin !== "http://example.org:8080")
return;
// event.data could contain "#AAAAAA" for instance
document.body.style.backgroundColor = event.data;
// do other stuff
}
}
Top Level Client Page:
// pass the string "#AAAAAA" to the iframe page, where the changeBackground
// function will change the color
// targetOrigin is the URL of the client's site
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin);
This solution only works in modern browsers, including IE8, FF3.6+, Chrome 13+, Safari 5+, etc. See the Mozilla Developer Center for more information on HTML5 postMessage.
How to pull the CSS parameter from the query string?
Use the gup function in the iframe page to get the value of the CSS parameter:
function gup(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
Afterwards, you can then use it to create a link CSS tag:
// get url parameter from iframe src:
var cssPath = gup("cssPath");
// create link and append to head
var linkElem = document.createElement("link");
linkElem.setAttribute("href", cssPath);
linkElem.setAttribute("rel","stylesheet");
document.getElementsByTagName("head")[0].appendChild(link);
OR
var color = gup("color");
document.body.setAttribute("style","background-color:" + color);
I am trying to use ember to show a dynamic list of found content. The problem is that when I try to put handlebars in html attributes, everything breaks.
RegApp.PatronsFound = Ember.CollectionView.create
tagName: 'table'
content: []
itemViewClass: Ember.View.extend
template: Ember.Handlebars.compile("<td><button onclick='alert({{content.id}})'>{{content.name}}</button>")
RegApp.PatronsFound.appendTo('body')
When it is fed a piece of content with the ID of 3 and the name FOO, I want this html to be generated:
<button onclick="alert(3)">FOO</button>
Instead, I get this:
<button onclick="alert(<script id=" metamorph-4-start'="" type="text/x-placeholder">3<script id="metamorph-4-end" type="text/x-placeholder"></script>)'>FOO</button>
You can use
{{unbound content.id}}
to arbitrarily insert values into your templates. Normally, such values are wrapped in metamorph tags which allow the displayed value to be bound to the backing value, and updated whenever the backing value changes. This only works if the output is regular HTML, not, in this case, spanning event handlers and embedded JS. {{unbound}} inserts the value at that property path once, without metamorph tags, and without being updated if that value changes in the future.
I'm running the developer's Django server while writing a simple view and it seems whenever I request a page, the console shows that there are 2 GETs for the same URL. What would cause this happen? I'm not using any redirects, so I don't see how a 2nd request would be made?
EDIT: It appears to be caused by the template. Changing to a blank html file for a template resolved the issue. The question is why? I have multiple {% if %} {% endif %} sections, with no elses. Could that be an issue?
It also could be Firefox following a WC3 directive under which it's supposed to dual load if certain tags come empty or broken, for example, a without a src="" etc. That being said, I saved off the rendered HTML on receipt and moved it into a static file, where I added the same headers as the real checkout and a small DB log of all accesses.
I just stumble upon this problem and fixed it removing my img wit src=""
Please confirm, if Django is redirecting after appending slash to your url. Its the property APPEND_SLASH in your settings.py controls that.
The second request is probably caused by a mis-configured asset link - a script, style or img tag which is empty or omits the initial / and is therefore re-requesting the page.
It could be your shortcut/favicon
Do you have link rel="shortcut icon" in your page template? Comment it out to see if it removes the second request
In my case : I have the same javascript code in 2 files : one in the base template and the same one in another template. As I use ajax to not reload all the page I got the call 2x, then 4x, and 8x, ...
The solution is the use the javascript code only in mybase.html
Hereafter my js code :
<script type="text/javascript">
// Code jQuery Ici
$(document).ready(function(){
// GET
$(".ajax_onglet_get").click(function(e){
var lien = $(this).attr('href');
$('#zone_travail').fadeOut('fast', function(){
$('#zone_travail').load(lien, function() {
$('#zone_travail').fadeIn('fast');
});
});
e.preventDefault()
});
});