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.
Related
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>
we have a chatbot who prints replies using the jQuery
$('<div class="message message-new"><figure class="avatar"><img src="images/icon" /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
Sometimes the reply variable can contain links, and some of them are very long so we have been trying to hyperlink them, we tried to add an href to the source of the replies
But the jQuery just doesn't print it, not even the hyperlink text, it just completely ignored
if the input from the back-end is
Hi <a href="www.google.com" click here /a>
It just prints "Hi"
Can somebody please guide us on how we can enable hyperlinks by making changes in the source text to the reply variable or any other way
$('<a>', {
href: 'mylink.com',
html: 'mytext'
})
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
reply = 'Hi! What can I help you with?<p>google</p> ';
$('<div class="message message-new"><figure class="avatar"><img src="avatars1.githubusercontent.com/u/6422482?v=3&s=400"; /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
});
});
</script>
</head>
<body>
<p>Top</p>
<div class="mCSB_container">
test
</div>
<button>Add New </button>
</body>
</html>
How can i share a post in facebook with the image using addThis. I have written this code to share in facebook,twitter and mail.
Now i can able to post or share the content without having the image and am getting like this(Refer Image)What i get.
Please help me to post with the image and caption.
I have added my code in fiddle or even you can see it in this https://jsfiddle.net/x34nnwcs/
(function () {
addthis.init();
function navigatePage(e) {
var pageId = $(this).attr("id"),
$pageContent, sharingMarkup, content,
config = $.extend(true, {}, window.addthis_config),
share = $.extend(true, {}, window.addthis_share);
if (pageId != "pageContent") {
config["some_property"] = "some value";
share.title = $(this).html();
share.url = "http://" + pageId + ".not-a-tld";
share.photo = "http://res-5.cloudinary.com/demo/image/upload/dpr_1.0,f_auto,w_365,h_133,c_fill,g_south,o_60/group.jpg";
$pageContent = $("#pageContent");
sharingMarkup = $("#sharing_markup").html();
content = $(".pageC").html();
console.log(content);
$pageContent.html(content + sharingMarkup);
addthis.toolbox(".page_sharing_toolbox", config, share);
addthis.toolbox(".page_sharing_facebook", config, share);
}
$("#page1").click(navigatePage);
}
navigatePage.call(document.getElementById("pageContent"));
}());
<div id="pageContent">
<button id="page1">Page 1</button>
<div class='pageC'>
<img src='http://res-5.cloudinary.com/demo/image/upload/dpr_1.0,f_auto,w_365,h_133,c_fill,g_south,o_60/group.jpg'/>
<p>this is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters so i guess this means that it cannot really be considered a paragraph but just a series of run on sentences this should help you get faster at typing as im trying not to use too many difficult words in it although i think that i might start making it hard by including some more difficult letters I'm typing pretty quickly so forgive me for any mistakes i think that i will not just tell you a story about the time i went to the zoo and found a monkey and a fox playing together they were so cute and i think that they were not supposed to be in the same cage but they somehow were and i loved watching them horse</p>
<p>
</div>
</div>
<script id="sharing_markup" type="text/html">
<div class="page_sharing_facebook addthis_toolbox facebook_like">
<a class="addthis_button_facebook_like" title="Facebook Like"></a>
</div>
<div class="page_sharing_toolbox addthis_toolbox addthis_default_style" style="width:290px;">
<div class="share-icons" id="share-icons">
<a class="addthis_button_email left" title="Email"></a>
<a class="addthis_button_facebook left" title="Facebook"></a>
<a class="addthis_button_twitter left last" title="Twitter"></a>
<a class="addthis_button_google left" title="Google"></a>
</div>
</div>
</script>
<script id="page1content" type="text/html">
</script>
<!-- the async parameter has been added, query parameter style, to the hash so that things won't render until you explicitly call addthis.init() -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#async=1&pubid=atblog"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
you need only to add this meta tag to your <Head> on HTML code
<meta content="your image source" property="og:image">
I'm experiencing stuff with CKEditor. I read the doc, but I can't find a way to do what I'm trying to do.(I'm in Java, in a jsp page)
I have a path
String path = request.getContextPath();
And I need to call this path
<%=path%>/docX/Controller
What I have is very basic:
<div id="editor">
<h1>Hello world!</h1>
</div>
<script>
initSample();
</script>
That works very well, but I want to add content when the page load.
I tried to manually add an iframe in the code with my path, such as
<iframe src="<%=path%>/docX/Controller"></iframe>
But it shows something like this : http://docs.cksource.com/images/9/93/CKEditor_iframe_example1.png
Which is normal if I understood well. If I click on "preview" I'll see what I'm suppose to see. But I want to see it at first and I want to be able to edit it.
The file it will return will be a .html file. So I must get the 'innerHTML' from that file and put it somehow in the editor. It doesn't have to be an iframe if there's an easier way to get the data.
Now I'm trying to get the html from the iframe and put it into a <p>. What I got so far looks like this :
<%
String path = request.getContextPath();
%>
<div class="main">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<iframe id="frame" src="<%=path%>/docX/Controller"></iframe>
</div>
</div>
</div>
</div>
<script>
initSample();
var iframe = document.getElementById("frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
alert(iframe_contents);
</script>
My alert() shows an empty string, but if I click on preview, I can see the text.
Any kind of help is always appreciated.
EDIT: My html file only have "test" inside it. Nothing like <html> <head> and stuff. I tried
$(document).ready(function () {
var test = $("#frame").contents().find("html").html();
alert(test);
})
But it returns <html></html><body></body>
EDIT 2:
I changed it for
$(document).ready(function () {
var mydocument = document.getElementById("frame").contentDocument;
var serializer = new XMLSerializer();
var content = serializer.serializeToString(mydocument);
alert(content);
})
My result is : <html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"></style></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;"></pre></body></html>
If I open my .html file, all I see is test
I'll answer my question so if someone has the same issue, he could try this solution.
So I removed the <iframe> from my CKEditor and I added an empty <p>. I simply took the returned data of my URL and put it in that <p>.
<%
String path = request.getContextPath();
%>
<div class="main">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<p id="content"></p>
</div>
</div>
</div>
</div>
<script>
initSample();
$(document).ready(function () {
$.get('<%=path%>/docX/Controller').then(function(responseData) {
$("#content").append(responseData);
});
})
</script>
In my case, responseData returns "test". It will also take properties, if your text is bold for exemple.
This will work in IE. But to make it work in chrome, in my case, it will return object XMLDocument. I had to do something like this:
$.ajax({
url: '<%=path%>/docX/Controller',
type: 'GET',
dataType: 'text',
success: function(data){
alert(data);
}
});
referring to this question here, context is not defined javascript
I am just throwing out another question in regards of the error where document.getElementById is returning a null even though the template is already compiled.
A brief background, I am using handlebar template, jquery and I want a googlemap to appear in 1 of the handlebar template.
my html:
<script id="employee-tpl" type="text/x-handlebars-template">
<div class='header'>Back<h1>Gloop</h1></div>
<div class='details'>
<img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' />
<h1>{{name}}</h1>
<h2>{{address}}</h2>
<h2>{{phone}}</h2>
<span class="location"></span>
<ul>
<li><div id="map-canvas"> </div></li>
</ul>
</div>
</script>
and my js
this.render = function(){
this.el.html(EmployeeView.template(employee));
console.log(document.getElementById("map-canvas"));
};
this.initialize = function(){
this.el=$('<div/>');
};
this.initialize();
}
EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
notice that the call to console will log a null value and this js is called at the bottom of my html file
<script src="lib/iscroll.js"></script>
<script src="lib/handlebars.js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/storage/cafe-memory-store.js"></script>
<script src="js/EmployeeView.js"></script>
<script src="js/main.js"></script>
</body>
</html>
my understanding it that the my compilation will render the div which then should be able to be seen but this is not the case. Anyone knows why?
Is that fiddle all the code you have? If I add this to the JS it works.. but it's hard to see what you're after.
var source = $("#employee-tpl").html();
var template = Handlebars.compile(source);
var data = { //your data here }
$('body').append(template(data));