How to get csv from url and transform it in array - javascript

I'd like to get a csv file from a url and transform it into an array.
So here is my code :
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Temperatures</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.csv-0.71.js"></script>
<script type="text/javascript" src="jquery.csv-0.71.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['annotatedtimeline']});
var csv_as_array = [];
function drawVisualization() {
$.ajax({
url: "data.txt",
aync: false,
success: function (csvd) {
csv_as_array = $.csv2Array(csvd);
},
dataType: "text",
complete: function () {
// use the array of arrays (variable csv_as_array)
// for further processing
}
});
[Google chart code]
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 1000px; height: 600px;"></div>
</body>
</html>
my data.txt is in the same folder as my .html file.
I know the block success: function (csvd) { } is not executed, because when I write alert("toto");, nothing happens.
Also, in the block complete: function () { }, I have written alert(csv_as_array.length); and it always shows 0.
The error is maybe just an import of a library missing ?

If success callback function was not called, it means error happened and error callback function would be called, if there would be one. You can try:
Adding error function, for example, a line like this error: function(jqXHR, textStatus, httpError) { alert('Error: '+textStatus); alert(httpError); }, to check for error.
Using absolute address in url
And you have a typo in the line aync: false - async, not aync.

Related

JavaScript XML-RPC call not executing

I am trying to call a python method using javascript from my html file. Below is my html file:
<html>
<head>
<title>Gadget</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="xmlrpc.js"></script>
</head>
<body>
<button onclick="call()">Select</button>
<script>
function call() {
$.xmlrpc({
url: 'my_odoo_server',
methodName: 'web_login',
params: ['admin', 'i-011d151e9af5b5588'],
success: function(response, status, jqXHR) {
console.log(response)
},
error: function(jqXHR, status, error) {}
});
}
</script>
</body>
</html>
But the xml-rpc call is not executed completely. Please help to solve this problem.
Here is console image.
enter image description here
first of all, you should extend the view in your base.xml file for example :
<t t-extend="ListView.buttons">
t t-jquery=".oe_list_buttons" t-operation="append">
<button type="button" oe_button oe-c1>My button</button>
</t>
then you call your function from js:
var $c_1_button = this.$buttons.find(".oe-c1");
$c_1_button .click(function() {
var mod=new instance.web.Model("your.model");
mod.call("your_python_function",[params],{}).done(function(res) { });

Grabbing Values from a JSON API Responce, putting them into webpage

Today I have a question that may seem kinda simple the the rest of you. I'm just now learning how to use APIs/JSONs and I'm a little confused. I'm trying to simply grab the temperature from this openweathermap.org API response and displaying it in an html tag.
The javascript from what I know is grabbing the temperature and setting it as a var. I'm confused why I cannot use id="" to set text inside a tag. The code below is what I have so far. I thank you for your time.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var weather;
var temp;
$(document).ready(function() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98&units=metric",
dataType: 'jsonp',
success: function(weather){
var temp = weather.main.temp;
}
});
</script>
</head>
<body>
<p id="temp"></p>
</body>
</html>
#ArunPJohny have already identified the errors: 1) missing }) and 2) use $('#temp') to get the HTML element. Also you don't need to declare weather because it is declared as an argument.
$(document).ready(function() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98&units=metric",
dataType: 'jsonp',
success: function(weather) {
$('#temp').text(weather.main.temp);
}
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<p id="temp"></p>

Html + Javascript Undefined Function

JSFIDDLE for testing http://jsfiddle.net/8dw09y59/
Hey guys, I've tried everything.. Could someone please explain why i continue to get the "uncaught referenceerror: summonerLookUp is undefined"
I've tried switching the function to windows.summonerLookUp = function() { , but thats hasn't changed anything either. I've tried loading them within , within I've tried loading it at the end of the document, but i get the error "In XHTML 1.0 Transitional the tag cannot contain a tag ." is anyone able to explain whats going on here?
This is my index.js
function SummonerLookUp() {
var SumName
SumName = $("#SumInput").val();
if(SumName !== "") {
$.ajax({
url: 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + SumName + '?api_key=',
type: 'GET',
dataType: 'json',
data: {
},
success: function (json) {
var SUMMONER_NAME_NOSPACES = SumName.replace(" ", "");
SUMMONER_NAME_NOSPACES = SUMMONER_NAME_NOSPACES.toLowerCase().trim();
summonerLevel = json[SUMMONER_NAME_NOSPACES].summonerLevel;
summonerID = json[SUMMONER_NAME_NOSPACES].id;
document.getElementById("sLevel").innerHTML = summonerLevel;
document.getElementById("sID").innerHTML = summonerID;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error getting Summoner data!");
}
});
} else {}
}
and my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LoLStats.GG</title>
<script language="javascript" type="text/javascript" src="../Javascript/index.js"></script>
</head>
<body>
Summoner Name
<br />
<input id="SumInput" />
<button onclick="summonerLookUp()">Click me</button>
<br />
<br />Summoner Level: <span id="sLevel"></span>
<br />Summoner ID: <span id="sID"></span>
</body>
</html>
The function SummonerLookUp is being called as summonerLookUp, javascript is case sensitive
Change
function SummonerLookUp() {
To
function summonerLookUp() {
JavaScript is case-sensitive. You named the function SummonerLookUp, but then you're trying to call summonerLookUp. Make them match.

Calling a jQuery function from a PHP file

I am having problems trying to activate a jQuery function from a PHP.
The following is my own test version.
index.php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to temp index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min[2].js"></script>
<script type="text/javascript">
$(document).ready(function() {
//posts info into the userinfo.php file
$.post('userinfo.php', { activate:"colourchange"}, function(data){
$('report').html(data);
});
//the function which is meant to be activated from the php file
function colourchange(){
document.body.style.backgroundColor = 'green';
};
});
</script>
</head>
<body>
<h1>hello</h1>
<div id="report">
</div>
</body>
</html>
PHP file I am attempting to call my jQuery function from
<?php
if( $_REQUEST["activate"])
{
$activate = $_REQUEST['activate'];
};
if($activate == 'colourchange')
{
// This is the code that I believe not to be working as this isn't
// activating the jQuery function to work. (The page background isn't changing colour)
echo "<script>colourchange(); </script>";
};
?>
Thank you to anyone who has an idea of what to do it is much appreciated.
I have now tried ...
<?php
require 'userinfo.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to temp index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min[2].js"></script>
<script type="text/javascript">
function colourchange(){
document.body.style.backgroundColor = 'green';
};
$(document).ready(function() {
$.post('userinfo.php', { activate:"colourchange"}, function(data){
$('report').html(data);
});
});
</script>
</head>
<body>
<h1>hello</h1>
<div id="report">
</div>
</body>
</html>
and the PHP index file is ...
<?php
if( $_REQUEST["activate"])
{
$activate = $_REQUEST['activate'];
};
if($activate=='colourchange')
{
echo "colourchange();";
};
?>
I don't exactly understand why you are using PHP to execute a jQuery function at all - perhaps this is just an oversimplified example. Assuming your primary goal is to have the PHP response trigger a specific Javascript function (and perhaps allow for the PHP response to trigger several different responses) you'd do something like this:
First change the callback from
function(data){
$('report').html(data);
}
to something like:
function(data) {
if (data.indexOf("colourchange") >= 0) { // php page returned "colorchange" or a string containing "colourchange"
colourchange();
} else if (data.indexOf("moodchange") >= 0) {
moodchange(); /// etc... you can add more trigger functions here
}
}
And second... just have your PHP page return "colourchange" instead of an HTML snippet:
if($activate == 'colourchange')
{
echo "colourchange";
};
Does that help?
you could try this-- example call the jquery function on success
$.ajax({
url: //the url,
data: //the data,
type: "POST",
success: function(data){
if(data == "ok"){
colorChange();
}
}
});
here the data will be the success result returned by the php code..
you can call a function depending on the data returned

Execute code if page doesn't load

I want to create a code that reloads a part of the page every 10 seconds and if it fails to reload (because of connection issue), then it plays a sound.
Is such thing possible using ajax and how? I have seen this type of feature in web chats before but never came across a code for it.
Try using setInterval function:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" language="JavaScript"></script>
<style type="text/css">
<!--
.square {
background-color: #AAAAAA;
width: 250px;
height: 100px;
}
//-->
</style>
<script type="text/javascript" language="JavaScript">
$(document).on('ready',function(){
setInterval(updateDiv,10000);
});
function updateDiv(){
$.ajax({
url: 'getContent.php',
success: function(data){
$('.square').html(data);
},
error: function(){
//Code to play a sound
$('.square').html('<span style="color:red">Connection problems</span>');
}
});
}
</script>
</head>
<body>
<h1>The next div will be updated every 10 seconds</h1>
<div class="square">
Hello
</div>
</body>
</html>
And the php script:
<?php
echo "Updated value --> " . rand();
?>
To test, try renaming the php script (simulating connection problems) and rename to original name (getContent.php) to test correct situation again. Hope this helps.
Using JQuery, you can add handlers to run on fail...
$.ajax({
dataType: "json",
url: "myurl.com"
}).done(function( data ) {
//do what you want when it's all good
}).fail(function() {
//do what you want when the call fails
});
Or you can do it this way...
$.ajax({
type: "post",
url: "/SomeController/SomeAction",
success: function (data, text) {
//do what you want when it's all good
},
error: function (request, status, error) {
//do what you want when the call fails
}
});
And per request, here is a jsfiddle, it calls a service every 2 seconds, either with a URL that will return the date, or with a bad URL that will fail, mimicking a failed server.
UPDATE: I modified the jsfiddle to play a sound, as long as that sound remains on the server it's on :)

Categories