developing on the tizen device - javascript

This code is a part of my application, doesn't work on the tizen device while it work normally on the tizen simulator ... can anyone have a look and tell me why!! If it's a problem with the balise form or with the dom parser! Can anyone tell me how to solve it?
thx
<!DOCTYPE html>
<head>
</head>
<body>
<div id="result">
</div>
<div align="center">
<form name="myForm">
<button type="submit">go</button>
</form>
</div>
<script>
//var doc;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
//xhr.setRequestHeader('Origin', 'www.sntri.com.tn');
//xhr.setRequestHeader('Allow-Control-Allow-Origin', '*');
xhr.send();
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var myForm = document.forms.myForm;
//console.log(doc);
var selectDep = doc.getElementsByName('code_arret_dep')[0];
var selectArr = doc.getElementsByName('code_arret_arr')[0];
doc.getElementBy
//console.log(select);
myForm.appendChild(selectDep);
myForm.appendChild(selectArr);
//console.log(xhr.responseText);
myForm.onsubmit = function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('code_arret_dep='+selectDep.value+'&code_arret_arr='+selectArr.value);
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var result = document.getElementById('result');
var tablex = doc.getElementById('tablex');
//console.log(doc);
result.appendChild(tablex);
//console.log(xhr.responseText);
}
}
}
console.log(selectDep.value);
console.log(selectArr.value);
}
}
}
};
</script>
</body>

Do you add the internet privilege?
You can add the privilege in config.xml.
Open the config.xml on Tizen IDE.
Select the privileges tap.
Click the 'Add' button.
Select the http://tizen.org/privilege/internet
Run your application.

Related

GET DATA from XML and show on HTML - Input variable

I'm trying to get data from a xml file and show inside inputs, but I need to get a parameter from a input.
This code is working when just click on the button, but it return the xml file with the parameter 'sbbr'
this is my code:
<script>
var icaocode = 'sbbr'
var client;
if (window.XMLHttpRequest) {
client = new XMLHttpRequest();
} else {
client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);
function buscarFunction() {
var xmlDoc = client.responseXML;
var heliponto = xmlDoc.getElementsByTagName("aisweb");
for (i = 0; i < heliponto.length; i++) {
data = heliponto[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
city = heliponto[i].getElementsByTagName("city")[0].childNodes[0].nodeValue;
org = heliponto[i].getElementsByTagName("rmkText")[0].childNodes[0].nodeValue;
}
document.getElementById('nome').value = data;
document.getElementById('cidade').value = city;
document.getElementById('org').value = org;
}
client.send();
</script>
<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button><Br>
<input id="nome"><br>
<input id="cidade"><br>
<input id="org">
I need to get this paramenter from here:
<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button>
but is not populating the variable icaocode, I have tryed this:
var icaocode = document.getElementById('icao').value;
client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);
Try putting your <script> below the <body> tag after all elements have finished rendering. I think what's happening is that document.getElementById('icao') is returning null because there is no element with ID icao yet.
I fixed, found a solution.
just needed to add the function onload and put all the code inside the main function like this:
<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button><Br>
<input id="nome"><br>
<input id="cidade"><br>
<input id="org">
<script>
function buscarFunction() {
var icaocode = document.getElementById('icao').value;
var client;
if (window.XMLHttpRequest) {
client = new XMLHttpRequest();
} else {
client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);
client.send();
client.onload = function () {
var xmlDoc = client.responseXML;
var heliponto = xmlDoc.getElementsByTagName("aisweb");
for (i = 0; i < heliponto.length; i++) {
data = heliponto[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
city = heliponto[i].getElementsByTagName("city")[0].childNodes[0].nodeValue;
org = heliponto[i].getElementsByTagName("rmkText")[0].childNodes[0].nodeValue;
}
document.getElementById('nome').value = data;
document.getElementById('cidade').value = city;
document.getElementById('org').value = org;
};
}
</script>
and after that storage the variable from the input:
var icaocode = document.getElementById('icao').value;

Accessing Vars In All Script Tags In HTML Source Fetched Via xhr Request

How would you access variable values from scripts tags in HTML source of a page fetched via xhr request.
HTML of fetched page...
<html>
<body>
<div id="somecontent"></div>
<script>
var foo="30";
</script>
<script>
var bar="60";
</script>
</body>
</html>
And fetched via xhr request...
var xhr = new XMLHttpRequest();
xhr.open("GET","http://www.example.com/testpage.html");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var html = xhr.responseText;
// try to access var
var result =html.foo+html.bar;
console.log(result);
}
}
xhr.send();
Any ideas would be greatly appreciated!
You can try something like that:
var xhr = new XMLHttpRequest();
xhr.open("GET","http://www.example.com/testpage.html");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var html = xhr.responseText;
var parser = new DOMParser();
var dom = parser.parseFromString(html, 'text/html');
var scripts = dom.querySelectorAll('script');
for (let script of scripts) {
eval(script.innerText);
}
console.log('foo', foo);
console.log('bar', bar);
}
}
xhr.send();

JSON data to HTML using AJAX

I am trying to input the value of the currency using the Value="AUD" as a starter. I am very new to JSON and AJAX. I cannot work out why there is an 404 error linked to JSON.parse and XMLHttpRequest, any advise of where I am going wrong would be much appreciated. Thanks in advance.
`enter code here`
<html lang="en">
<head>
</head>
<body>
<div id ="forex-info">
<p id="currencyList" class="currencyList" value ="AUD">Australia</p>
<p id="rateList" class="event"></p>
</div
<script type="text/javascript">
var tableContainer = document.getElementById("forex-info");
var ourRequest = new XMLHttpRequest();
var myData = "http://api.fixer.io/latest".rates;
ourRequest.open('GET', myData, true);
ourRequest.onload = function loading() {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
function renderHTML(data) {
var output = "";
for (var key in data)
{
output += "<p>" + key + output + "</p>"
}
}
};
</script>
</body>
The main issue is how your calling the api "http://api.fixer.io/latest".rates
You call rest endpoints by there address params or with query params.
Please see example below calling your specified endpoint. That should get you started
var myData = 'https://api.fixer.io/latest'
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let res = JSON.parse(xhttp.responseText)
Object.keys(res.rates).forEach((e)=>{
console.log(`${e}: ${res.rates[e]}`)
//Add your stuff here
})
}
};
xhttp.open("GET", myData, true);
xhttp.send();

displaying images using file reader and blob

I want display a set of thumbnail images using fileReader api of javascript.I will send requests to my server and it will respond with a stream of bytes.I am sending requests through native xhr methods.But its not displaying any images.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
<script>
var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];
(function(){
for(var i=0;i<thumbURL.length;i++){
var oReq = new XMLHttpRequest();
oReq.open("GET", thumbURL[i]);
oReq.responseType = "blob";
oReq.onload = function(oEvent) {
if (this.status == 200) {
var fileReader = new window.FileReader();
fileReader.readAsDataURL(this.response);
var response=fileReader.result;
$("#thumbnails").append("<img src="+response+"></div>");
}
};
oReq.send();
}
})();
</script>
</head>
<body>
<div id="thumbnails"></div>
</body>
</html>
Any help will be greatly appreciated.Thanks in advance.
UPDATE:correct solution
<html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
<script>
var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];
(function(){
for(var i=0;i<thumbURL.length;i++){
var oReq = new XMLHttpRequest();
oReq.open("GET", thumbURL[i]);
oReq.responseType = "blob";
oReq.onload = function(oEvent) {
if (this.status == 200) {
var filereader=new window.FileReader();
filereader.readAsDataURL(this.response);
filereader.addEventListener("load",function() {
var response=filereader.result;
$("#thumbnails").append("<img src="+response+"></div>");
},false);
}
};
oReq.onerror=function(e){
alert("error");
};
oReq.send();
}
})();
</script>
</head>
<body>
<div id="thumbnails"></div>
</body>
</html>
The FileReader API is asynchronous so you have to add a load handler and when triggered, then add the result:
var fileReader = new window.FileReader();
fileReader.onload = function() { // need load handler
var response=this.result;
$("#thumbnails").append("<img src="+response+"></div>");
};
fileReader.readAsDataURL(this.response);
I would in any case recommend to skip the conversion part. Using the blob directly not only saves memory, but is much faster. You just have to create the image element manually, for example:
oReq.onload = function(oEvent) {
if (this.status === 200) {
var img = new Image;
img.src = (URL || webkitURL).createObjectURL(this.response);
$("#thumbnails").append(img); // todo: append the </div> separately
}
};

letting user open an xml file on client and parse it using javascript

I'm trying to let a users on my site to save and XML file one the local machine and then later to load them using the HTML file element.
Saving the file what done with iFrame.
When trying to let the user load the file i am getting exceptions all the time.
I've tried every thing i could find over the web and can't seem to find the way to do it.
I am getting all kind of exception, like cross domain or XMLHttpRequest cannot load file:///C:/fakepath/Regions.xml. Cross origin requests are only supported for HTTP.
Depending on the code i tried.
I read that HTML5 standard replace the url with "fakepath", and can't find solution for this. Is there no way to let the user load a file from his own computer to be edited? loading a specific file from server is not a problem but i want to give this freedom to the user and not decide for them what file to load, and also to let them save and load the xml on their computer and not the server
Is there a solution for this problem?
Found this codes but neither helped (and I've tried few other veriations of this):
1)
var error = "";
strFile = document.frmLoadFile.selectedFile.value;
intPos = strFile.lastIndexOf("\\");
strDirectory = strFile.substring(0, intPos);
//alert(strDirectory);
document.frmLoadFile.selectedFile.value = strDirectory;
var file = 'file:\\\\\\' + document.frmLoadFile.selectedFile.value;
try //Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(file);
}
catch (e) {
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(file);
}
catch (e) {
try //Google Chrome
{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
}
catch (e) {
error = e.message;
}
}
}
2)
var xmlDoc;
var xmlloaded = false;
function xml_initLibrary(file) {
importXML(file);
}
function importXML(xmlfile) {
try {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlfile, false);
}
catch (Exception) {
var ie = (typeof window.ActiveXObject != 'undefined');
if (ie) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
while (xmlDoc.readyState != 4) { };
xmlDoc.load(xmlfile);
xmlloaded = true;
readXML();
}
else {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = readXML;
xmlDoc.load(xmlfile);
xmlloaded = true;
}
}
if (!xmlloaded) {
xmlhttp.setRequestHeader('Content-Type', 'text/xml')
xmlhttp.send("");
xmlDoc = xmlhttp.responseXML;
xmlloaded = true;
readXML();
}
}
function readXML() {
//console.log(xmlDoc);
}
does any one knows if there is a way to fix this? of do you need to save the files on the server?
Thank you all very much
Erez
I think you're looking for FileReader, new in HTML5. For IE < 10 you'll need to use the ActiveX FileSystemObject.
This code works for me on Chrome.
<script type="text/javascript">
function doit(e) {
var files = e.target.files;
var reader = new FileReader();
reader.onload = function() {
var parsed = new DOMParser().parseFromString(this.result, "text/xml");
console.log(parsed);
};
reader.readAsText(files[0]);
}
document.getElementById("selectfile").addEventListener("change", doit, false);​
</script>
<input type="file" id="selectfile" />
http://jsfiddle.net/xKuPV/

Categories

Resources