context is not getting passed for handlebars - javascript

I am using handlebars template. I have stumbled across a strange problem. Following code is not passing context to compiled handlebars template when used on browser but strange thing is that same code works fine in jsfiddle !
https://jsfiddle.net/5pnfrjwa/
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
{{> navbar this }}
<div id="render_here">
first
</div>
<div id="render_here_again">
second
</div>
<script id="first-template" type="text/x-handlebars-template">
<div>
<div> Inside first template</div>
<h4 style="color:green">title1 :{{title1}}</h4>
<h4 style="color:blue">body1 :{{body1}}</h4>
<h4 style="color:blue">context : {{context}}</h4>
</div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
<script>
$(document).ready(function() {
var source = $("#first-template").html();
var template = Handlebars.compile(source);
var context
// = "test 1"
= {
title1: "hello",
body1: "body1"
}
var el_html = template(context);
console.log("*** This is source : " + source);
console.log("*** This is template : " + template);
console.log("*** This is template(context) : " + el_html)
console.log(" data is : " + context.title1)
// $(document.body).append(el_html);
// $("#render_here").html(el_html);
// $("#render_here_again").html(el_html);
// document.getElementById('render_here_again').innerHTML = template(context);
$("#render_here_again").html(el_html)
});
</script>
</body>
</html>
I displayed source to console and here is the output
*** This is source :
<div>
<div> Inside first template</div>
<h4 style="color:green">title1 :</h4>
<h4 style="color:blue">body1 :</h4>
<h4 style="color:blue">context : </h4>
</div>
If same is displayed on jsfiddle, its as below:
*** This is source :
<div>
<div> Inside first template</div>
<h4 style="color:green">title1 :{{title1}}</h4>
<h4 style="color:blue">body1 :{{body1}}</h4>
<h4 style="color:blue">context : {{context}}</h4>
</div>
It seems variable name is coming in the source in double curly brackets on jsfiddle but its not coming on my locale machine. Any idea why this behaves differently on browser and jsfiddle.
I tried it with chrome and Mozilla but facing same issue with both.
I am using nodejs and expressjs at server side.
Edit one
It seems I might have identified the issue but I am still searching for solution. This is happening when I am rendering this pages from express 4 server. If I open simple html file with above code, its working fine.

Try to escape from curly braces with a backslash, to avoid rendering on the server side.
<script id="first-template" type="text/x-handlebars-template">
<div>
<div> Inside first template</div>
<h4 style="color:green">title1 :\{{title1}}</h4>
<h4 style="color:blue">body1 :\{{body1}}</h4>
<h4 style="color:blue">context : \{{context}}</h4>
</div>
</script>

Related

Sending HTML(including attributes) from python to webpage using flask

I have a rather peculiar problem here and I have no idea why this problem should occur.
I have a form on a page which takes input and python processes that input and displays the output on the same page.
I had some problems in making this work but all of it works now. To make it look better I tried to make it so that the output comes in a terminal-like window using termynal.js. It's rather simple but I am not getting the desired output.
Snippets of code:
Variable I'm returning from app.py
# This is not multi-line, I just made it so for easy readability
final = "<span data-ty=\"input\">CMS Name</span>
<span data-ty=\"progress\"></span>
<span data-ty>" + cms2 + "</span>
<span data-ty=\"input\">IP Address</span>
<span data-ty=\"progress\"></span>
<span data-ty>"+ip+"</span>
<span data-ty=\"input\">Scanning for open ports...</span>
<span data-ty=\"progress\"></span>
<span data-ty=\"input\">Scanning Website...</span>
<span data-ty=\"progress\"></span>"
return jsonify(result = final)
index.html
<head>
<script type=text/javascript src="{{ url_for('static', filename='js/termynal.js')}}" data-termynal-container="#termynal"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#baseButton').bind('click', function() {
$.getJSON('/result', {
website: $('input[name="website"]').val(),
}, function(data) {
$("#termynal").html(data.result);
});
return false;
});
});
</script>
</head>
<body>
<div class="mainBox" id="termynal" data-termynal data-ty-typeDelay="40" data-ty-lineDelay="700">
</div>
</body>
EDIT 1
I added print final before returning it and this is what I got, which seems perfectly right to me
<span data-ty="input">CMS Name</span><span data-ty="progress"></span><span data-ty>Joomla</span><span data-ty="input">IP Address</span><span data-ty="progress"></span><span data-ty>104.26.4.173</span><span data-ty="input">Scanning for open ports...</span><span data-ty="progress"></span><span data-ty ></span><span data-ty="input">Scanning Website...</span><span data-ty="progress"></span>
So I'm stumped.
EDIT 2 : Adding Screenshots
So I pasted the above obtained value of final in codepen(link here: CodePen Test
and here's what it looks like on my screen:
Try enclosing the final text in triple quotes """ content """ as it is a multiline string.

JavaScript: Trying to use a variable from a page loaded inside a DIV in another DIV

I'm trying to use a variable from a page loaded inside a DIV in another DIV.
The text in the "bar" DIV on the "index.html" page should be replaced by the item id selected from the "page.html" loaded as an <object></object> inside the "content" DIV.
Or the item id should at least be stored in a global variable - which hasn't been working either - because when I run a function from the "index.html" page to retrieve it, it displays as "undefined".
All the code is below:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index_style.css">
<title>Access element of other DIV</title>
</head>
<body>
<div id="bar">This text should be replaced by the Item ID selected below</div>
<div id="content">
<object type="text/html" data="page.html" width="100%" height="100%"></object>
</div>
</body>
</html>
index_style.css
body{
margin: 0px;font-family:arial;font-size:30px;text-align:center;color:#fff;
}
#bar{
position:relative;height:100px;line-height:100px;background-color:#555c60;color:#74de90;
}
#content{
position:absolute;top:100px;bottom:0px;right:0;left:0;overflow-y:hidden;
}
page.html
<link rel="stylesheet" href="page_style.css">
<script type="text/javascript" src="main.js"></script>
<center>
This is <b>page.html</b> which has been loaded <u>inside</u> the "content" DIV<br><br>
</center>
<div class="items" onclick="use_item_id(this);" id="item1">Item 1</div>
<div class="items" onclick="use_item_id(this);" id="item2">Item 2</div>
<div class="items" onclick="use_item_id(this);" id="item3">Item 3</div>
page_style.css
body{font-family:arial;font-size:30px;color:#fff;background-color:#1b1e4b;text-align:center;}
.items{cursor:pointer;}
.items:hover{color:#ff0000;}
main.js
function use_item_id(selected)
{
current_item = selected.getAttribute("id");
document.getElementById('bar').innerHTML = current_item;
alert(current_item);
}
The line document.getElementById('bar').innerHTML = current_item; in "main.js" seems to be the problem and I can't get it to work. The alert(current_item); works fine when the line above it isn't there so it's definitely getting the item id's correctly from "page.html". It's just not setting them as the innerHTML on the "index.html" page, or even storing them in a global variable to be retrieved from a function run on the "index.html" page (as mentioned above). Any code examples would be greatly appreciated.
I think it might be because the use_item_id() function is being executed from another page, so I might need some alternatives or other functions to get it to work.
It'd be great if anyone knows what the issue is. I appreciate all replies. Thanks in advance :)
You are not on the same document ... then in main.js
replace
document.getElementById('bar').innerHTML = current_item;
with
parent.document.getElementById('bar').innerHTML = current_item;
this solves your problem.
If you're trying to access variables from HTML documents it's highly recommended to use the data attribute. This is an example for a comment section:
In my item I set the data key for loading
<div class='resp-col col-12 comment-user-data'>
<div class='resp-col col-9'>
<div class="post-profile-image" style='background-image:url("<?=$user->profile_image?>")'></div>
<?=Html::a("<p class='post-user'>".$username."</p>", Url::to(['/account/'.$user->id.'/'.$user->username]))?>
</div>
<div class='resp-col col-3'><button class='reply-to' data-assoc-id='<?=$model->id?>' data-assoc-name='<?=$username?>'><i class="material-icons">reply</i></button></div> <-- set the data-assoc-id
</div>
<div class='resp-col col-12 comment-content-data'>
<?=$model->content?>
</div>
jQuery to load data key
$('.reply-to').on('click',function(){
$('#submit-comment').data('assoc-id', $(this).data('assoc-id'));
$('#comment-content').val('#'+$(this).data('assoc-name')+' ');
$('.base-modal').animate({
scrollTop: $("#comment-content").offset().top
}, 2000);
if($('#comment-content').css('display') == 'none'){
toggleCommentVisibility();
}
});

Render HTML Tag attribute using mustache

In my mustache template I do have something like:
<div {{attr}}="{{attrVal}}"></div>
Rendering this using
Mustache.render(template, {attr : 'data-test', attrVal : 'test'})
does produce
<div ="test"></div>
I expect to get something like
<div data-test="test"></div>
Isn't it possible to render attribute name inside of a tag using Mustache?
UPDATE
I figured out the problem. I define my HTML Mustache Templates inside custom <template> tags in my document. For example:
<template id='myTemplate'>
<div {{dataAttr}}="{{dataAttrValue}}"></div>
</template>
When getting the template using document.querySelector("#myTemplate").innerHTML the browser does convert the {{dataAttr}} to {{dataattr}} because attributes are case insensitiv. So calling
Mustache.render(
document.querySelector("#myTemplate").innerHTML,
{ dataAttr : 'data-attr', dataAttrValue : 'test'}
);
Results in
<div ="test"></div>
Hope this code snippet will help you..
var template = document.querySelector("#template").innerHTML;
//Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {
attr: "data-test",
attrVal: "test"
});
document.querySelector("#target").innerHTML = rendered;
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>
<body>
<div id="target">Loading...</div>
<template id="template" >
<textarea style="width:300px">
<div {{attr}}="{{attrVal}}"></div>
</textarea>
</template>
</body>
I head the same problem Try the single [']:
<template id='myTemplate'>
<div {{dataAttr}}='{{dataAttrValue}}'></div>
</template>
.....
You can also try using to_html method for the expected output.
const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});
document.getElementById("myTemplate").innerHTML = HTML;
const template = `
<div {{attr}}="{{attrVal}}">
</div>
`
const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});
document.getElementById("myTemplate").innerHTML = HTML;
console.log(document.getElementById("myTemplate").innerHTML);
<html>
<head>
</head>
<body>
<template id='myTemplate'>
</template>
<div id="display-output"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js"></script>
</body>
</html>

ContentTools.js getting me nowhere

I recently came across ContentTools.js and i thought that might be nice addition to the site im working on. Going through getting started/tutorials gets me nowhere - script is not working however I look at it.
Copying exact same scripts from author page or running it back from master bin works but implementing to actual website fails.
The only thing that worked for me (on empty html page) was that script loaded editable fields erasing it's content either saved or canceled edit (if that makes and sense to you).
$(document).ready(function() {
window.onload = function() {
var editor;
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'data-name');
editor.bind('save', function(regions) {
var xhr, payload, name;
this.busy(true);
payload = new FormData();
for (name in regions) {
if (regions.hasOwnProperty(name)) {
payload.append(name, regions[name]);
}
}
function onStateChange(ev) {
if (ev.target.readyState == 4) {
editor.busy(false);
if (ev.target.status == '200') {
new ContentTools.FlashUI('ok');
} else {
new ContentTools.FlashUI('no');
}
}
}
xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/save-my-page');
xhr.send(payload);
});
}).call(this);
<link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
<script src="http://getcontenttools.com/scripts/content-tools.js"></script>
<!DOCTYPE html>
<html>
<body>
<p class="editable" data-name="c1">asd</p>
<p class="editable" data-name="c2">123</p>
<p class="editable" data-name="c3">asd123</p>
<div class="ct-app">
<div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
<div class="ct-ignition__button ct-ignition__button--edit"></div>
<div class="ct-ignition__button ct-ignition__button--confirm"></div>
<div class="ct-ignition__button ct-ignition__button--cancel"></div>
<div class="ct-ignition__button ct-ignition__button--busy"></div>
</div>
</div>
</body>
</html>
Ofc all libraries are loaded and there is no js errors. It just doesn't work.
First off, you have error in your code, some brackets are not aligned, also you should have one div element around your p elements and init editor around it, in this case it will init editor for each p, here is fiddle http://jsfiddle.net/zx4sw47L/
P.S. There is a problem with loading fonts, because of cross-domain issue, but example is working.
I'm also starting using getContentTools.
From what I understand you have some errors in your HTML markup and you're missing another js file to init getContentTools
<!DOCTYPE html>
<html>
<head>
<link href="http://getcontenttools.com/styles/content-tools.css" rel="stylesheet" />
<script src="http://getcontenttools.com/scripts/content-tools.js"></script>
<script src="/path/to/editor.js"></script>
</head>
<body>
<div data-editable data-name="c1">
<p class="editable">asd</p>
</div>
<div data-editable data-name="c2">
<p class="editable">123</p>
</div>
<div data-editable data-name="c3">
<p class="editable">asd123</p>
</div>
<!-- this should be deleted as it is generated by getContentTools -->
<!--
<div class="ct-app">
<div class="ct-widget ct-ignition ct-ignition--ready ct-widget--active">
<div class="ct-ignition__button ct-ignition__button--edit"></div>
<div class="ct-ignition__button ct-ignition__button--confirm"></div>
<div class="ct-ignition__button ct-ignition__button--cancel"></div>
<div class="ct-ignition__button ct-ignition__button--busy"></div>
</div>
-->
</body>
</html>
The editor.js file should look like this to start
window.addEventListener('load', function() {
var editor;
});
Hope this helps

Ng-repeat functionality doesnt work

Today is my first day with Angular.js , and I stuck at a basic controller :
my APP.js
(function()
{ var app = angular.module('store', [ ] );
app.controller('StoreController', function()
{
this.product = gem;
});
var gem = [
{name:'John', price:25, description:'boy',soldout: false,canpurchase:true},
{name:'Kohn', price:25, description:'boy',soldout: false,canpurchase:true}
]
//not mentioned:false
})();
Index.HTML
<!DOCTYPE html>
<html ng-app="store">
<script src="js/angular.min.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>Purple</title>
</head>
<body ng-controller = "StoreController as store">
<script src="js/app.js" type="text/javascript"></script>
<h1>{{"Create your CV"}}</h1>
<div ng-repeat="products in store.product">
<div ng-hide="store.product.soldout">
<h1> {{store.product.name}} </h1>
<h2><em class="pull-right">{{store.product.price | currency}}</em></h2>
<h3> {{store.product.description}} </h3>
<button ng-show = "store.product.canpurchase"> Add to cart </button>
</div>
</div></body></html>
My code is working fine , but NG - repeat is not working, if I don't choose ng-repeat and display each item as an array then I am getting a display but not with "ng-repeat" .. Any idea's what am I missing ?
Please dont mark this as negative, I have done a lot of research before asking this question
Code on fiddle : http://jsfiddle.net/68Dkz/2/
Here is working version using controller alias store as shown. Note that product was changed to products in controller since the array contains more than one product. I think you are gtting confused about which is array and which is the individual item within the ng-repeat due to this
<div ng-repeat="product in store.products">
<div ng-hide="product.soldout">
<h1> {{product.name}} </h1>
<h2><em class="pull-right">{{store.product.price | currency}}</em></h2>
<h3> {{product.description}} </h3>
<button ng-show="product.canpurchase">Add to cart</button>
</div>
</div>
DEMO
store is your module not your scope you don't need it in the iteration, do products in product instead
<div ng-repeat="products in product">
<div ng-hide="products.soldout">
<h1> {{products.name}} </h1>
<h2><em class="pull-right">{{products.price | currency}}</em></h2>
<h3> {{products.description}} </h3>
<button ng-show = "products.canpurchase"> Add to cart </button>
</div>
</div>
stop aliasing your controller, it is unnecessary and may cause issues with the html compiler
using products as your iterator is confusing, I would suggest making the collection products and the iterator product

Categories