I'm using ajax to update a value without refreshing the page.
When I use this html code the website gives an 404 not found error. But when I leave the script tag out of the html, the site works fine and show the p tag. What am i doing wrong in the script tag?
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart_home</title>
</head>
<body>
<div id="verbruik">
<p></p>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
document.getElementById("verbruik").innerHTML =
this.responseText;
}
xhttp.open("GET", "/home/pi/smart_home/ajax_info.txt", true);
xhttp.send();
setTimeout(loadDoc, 2000);
}
loadDoc();
</script>
</body>
</html>
I'm trying to get the HTML DOM from the following website: https://www.inputbcn.com/en/tickets#/events
The 'default' DOM of this website its the following:
<!doctype html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="xceed-widget"></div>
<script src="https://s3-eu-west-1.amazonaws.com/xceed-widget/2019-version/dist/loader.js" type="text/javascript"></script>
</body>
</html>
As you can see, when the page loads, a JavaScript script is called which will fill the page DOM.
I want to get the full page DOM after the script is executed and I'm using PhantomJS for this purpose. I began with the following code:
var page = require('webpage').create();
page.open("https://www.inputbcn.com/en/tickets#/events", function(status) {
console.log("Status: " + status);
if (status === "success") {
console.log(page.content);
}
});
But after executing this piece of code, I can see the response status fails.
How can I get the full document of this specific website?
NOTE: this answers did not help my purpose.
I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>
While trying to add Expect library in Jsbin.com console, it return undefined.
var mylib = {
text: 'My Category',
scripts: [
{ text: 'My library', url: 'https://github.com/mjackson/expect/blob/master/modules/index.js' }
]
};
libraries.add(mylib);
why don't you add script tag in the head. Try this in jsbin.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/expect#%3C21/umd/expect.min.js"></script>
</head>
<body>
<script>
console.log("expect", expect.createSpy)
</script>
</body>
</html>
You may use this stand alone module:
<script src="https://wzrd.in/standalone/expect#22.4.3"></script>
put it in your head tag of the HTML file.
I have an HTML page that is right-to-left. When I don't use any doctype, my numbers are in Arabic/Persian, but when I use strict mode they turn to English.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
Before adding doctype:
After adding doctype:
also I added these meta tags to my page:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fa" />
So how can I view Arabic numbers in a page with strict doctype (in IE because Firefox doesn't show Arabic numbers anyway)?
here is a little javascript code that converts a 1234 string to ١٢٣٤ string
var map =
[
"&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;",
"&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"
];
function getArabicNumbers(str)
{
var newStr = "";
str = String(str);
for(i=0; i<str.length; i++)
{
newStr += map[parseInt(str.charAt(i))];
}
return newStr;
}
You can convert English digits to Persian digits using this JavaScript code in your template:
<script type="text/javascript">
var replaceDigits = function() {
var map = ["&\#1776;","&\#1777;","&\#1778;","&\#1779;","&\#1780;","&\#1781;","&\#1782;","&\#1783;","&\#1784;","&\#1785;"]
document.body.innerHTML = document.body.innerHTML.replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map[$0]});
}
window.onload = replaceDigits;
</script>
In case you need to replace some English to Arabic numerals and not the whole HTML, pass the number you need to this function.
function toArabicNumeral(en) {
return ("" + en).replace(/[0-9]/g, function(t) {
return "٠١٢٣٤٥٦٧٨٩".slice(+t, +t+1);
});
}
Assuming you want an XHTML 1.0 Strict document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa" lang="fa" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
Here's an equivalent HTML 4.01 Strict document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fa" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
Here's an equivalent HTML5 page, just for comparison purposes.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
It is very simple to view Arabic/Persian numbers in a HTML page.
I solved the same problem by changing the font name,
In my case I want to display the same character to all users
you can choose a font that contains Arabic-Hndi digits and import it using the css ( #font-face ) then simply use it,
This works fine for all major browsers (IE .. Firefox .. Chrome)
look at this result
here is the full code of the page:
<html>
<head>
</head>
<body>
<style type="text/css">
#font-face {
font-family: ArabicTwo_Bold;
src: url( ArabicTwo_Bold.eot);
}
#font-face {
font-family: ArabicTwo_Bold;
src: url( ArabicTwo_Bold.ttf);
}
div , input {
font-family: ArabicTwo_Bold;
}
</style>
<input type='text' value='هذا نص هندي 123456 ' />
<div> هذا نص هندي 123456 </div>
</body>
</html>
firefox default render number to latin
for change this setting go to addressbar of Firefox and type about:config
this page is advanced setting of firefox
find this line "bidi.numeral" and double click on it
if set value to "1" firefox for render text look at context. if text is persian render number to persian.
if set value to "4" alwase render digit number to persian
try this , hope helps you ;)
between and
<script language="JavaScript" type="text/javascript">
var replaceDigits = function() {
var map =
[
"&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;",
"&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"
]
document.body.innerHTML =
document.body.innerHTML.replace(
/\d(?=[^<>]*(<|$))/g,
function($0) { return map[$0] }
);
}
</script>
then in end of body tag insert this :
<script type="text/javascript">
window.onload = replaceDigits
</script>
This works for me, regardless of the text direction (in Chrome, Safari, Firefox and Opera):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body { direction: rtl; }
</style>
</head>
<body>
۴۲
</body>
</html>
(Omitted the content-language since that isn’t necessary here.)
If you use persian fonts like 'BNazanin' and write :
http-equiv="Content-Type" content="text/html; charset=UTF-8"
and http-equiv="Content-Language" content="fa" in meta tags.
You can then see the numbers in persian.
and if you use lang='En' in some tags in your html page the numbers in that tag will be displayed in english.
var map_format_arabic = ["&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;", "&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"];
$.each( $('.format_arabic'), function () {
var n=$(this).text().replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map_format_arabic[$0]});
$(this).html(n);
});
This code supports one or multiple digits of an English number which can be converted to Arabic number:
function toArabicNumber(enNum) {
if(isNaN(enNum) || enNum == null){ // Check if not a number or null
return enNum;
}
if(typeof enNum == 'string'){ // if it is a string(number) convert it to number
enNum = Number(enNum);
}
if(enNum < 10){
return "٠١٢٣٤٥٦٧٨٩".substring(enNum, enNum+1);
}
else {
let result = "";
enNum = enNum + ""; // convert number to string
for(let i = 0; i < enNum.length; i++){
let num = Number(enNum[i]); // convert digit by digit to number
result = result + "٠١٢٣٤٥٦٧٨٩".substring(num, num+1);
}
return Number(result);
}
}
just specify a persian font like 'B yekan' to them.
all troubleshoots will be solved.