I'm completely new with AngularJS and attempting to capture, parse, and display data from a SOAP web service. So far I can call successfully call a public weather service, capture and display the returned XML data, convert the XML to a JSON string, but I'm not having any success binding/displaying the JSON data. Below are my HTML and JS files. Thanks in advance for any advice/suggestions!
MyHelloView.html
<!doctype html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="angular.min.js"> </script>
<script language="JavaScript" type="text/JavaScript" src="xml2json.js"></script>
<script language="JavaScript" type="text/JavaScript" src="MyHelloController.js"> </script>
</head>
<body ng-app>
<title>My Simple Angular App</title>
<div ng-controller='MyHttpController'>
{{soapResponse}}
<br/><br/>
{{jsonData}}
<br/><br/>
WeatherReturn: <br/>
Success: <input type="text" ng-model="jsonData.Success" /> <br/>
ResponseText: <input type="text" ng-model="jsonData.ResponseText" /> <br/>
State: <input type="text" ng-model="jsonData.State" /> <br/>
City: <input type="text" ng-model="jsonData.City" /> <br/>
WeatherStationCity: <input type="text" ng-model="jsonString.WeatherStationCity" /> <br/>
WeatherID: <input type="text" ng-model="jsonData.WeatherID" /> <br/>
Description: <input type="text" ng-model="jsonData.Description" /> <br/>
Temperature: <input type="text" ng-model="jsonData.Temperature" /> <br/>
RelativeHumidity: <input type="text" ng-model="jsonData.RelativeHumidity" /> <br/>
<div ng-repeat="field in jsonData.fields">
{{field.name}}: <input type="text" ng-model="field.value">
</div>
<br/><br/>
</div>
</body>
</html>
MyHelloController.js
function MyHttpController($scope, $http) {
$scope.loaded = false;
$scope.soapResponse = 'no response yet';
$http.get('http://wsf.cdyne.com//WeatherWS/Weather.asmx/GetCityWeatherByZIP?ZIP=60301').then(function(result){
$scope.soapResponse = result.data;
var x2js = new X2JS(); // convert XML data to JSON
$scope.jsonData = x2js.xml_str2json(result.data);
$scope.loaded = true;
});
}
Your xml is being delivered like below, which means you just need to pull the data off the top of the json object. Just an aside, you probably will want to look into putting your controller onto a module and moving the weather stuff into a service... but you didn't ask about that.
$scope.jsonData = x2js.xml_str2json(result.data).WeatherReturn;
<WeatherReturn xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://ws.cdyne.com/WeatherWS/">
<Success>true</Success>
<ResponseText>City Found</ResponseText>
<State>IL</State>
<City>Oak Park</City>
<WeatherStationCity>Maywood</WeatherStationCity>
<WeatherID>14</WeatherID>
<Description>Cloudy</Description>
<Temperature>27</Temperature>
<RelativeHumidity>63</RelativeHumidity>
<Wind>S9</Wind>
<Pressure>29.95F</Pressure>
<Visibility/>
<WindChill/>
<Remarks/>
</WeatherReturn>
Related
This is my first page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Customer Form</h1>
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
This is my second page.
<!DOCTYPE html>
<html>
<head>
<title>Student List</title>
</head>
<body>
<p id="1"></p>
<!-- JavaScript -->
</body>
</html>
MY JAVASCRIPT
function myFunction() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
name = document.getElementById('name').value;
address = document.getElementById('address').value;
document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
document.getElementById("2").innerHTML=address;
}
xhttp.open("GET", name);
xhttp.send();
}
I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".
Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.
To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.
If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:
First page:
<form>
<div>
<label>Customer Name:</label>
<input type="text" autofocus id="name">
</div>
<br>
<div>
<label>Address:</label>
<input type="text" id="address">
</div>
<button type="button" onclick="">Submit</button>
</form>
<script>
const name=document.getElementById('name')
name.addEventListener("keyup", (e) => {
sessionStorage.setItem('uname', name.value);
});
</script>
Second page:
<body>
<p id="usersName"></p>
<script>
let userNameElm = document.getElementById('usersName');
userNameElm.innerText = sessionStorage.getItem('uname');
</script>
</body>
Just remember to be careful what you store, and that it's only stored on the frontend/client side.
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
I have a input form and want to save the data that I haved insert into a file. Should I use get and set for this? Anyone have any ideas on what I should do?
function myfunction() {
if (validation()) // Calling Validation Function
{
// Serializing Form Data And Displaying It In <p id="wrapper"></p>
document.getElementById("wrapper").innerHTML = serialize(document.forms[0]); // Serialize Form Data
document.getElementById("form").reset(); // Reset Form Fields
}
}
function validation() {
var name = document.getElementById("namn").value;
var number = document.getElementById("number").value;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Write</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://form-serialize.googlecode.com/svn/trunk/serialize-0.2.min.js" type="text/javascript"></script> <!-- For Serialization Function -->
<script src="hej.js"></script> <!-- Include JavaScript File Here-->
</head>
<body>
<div id="main">
<div id="login">
<hr/>
<form action="" method="post">
<label>Name:</label>
<input type="text" name="name" id="name" required="required" placeholder="fill in your name"/><br /><br />
<label>Number :</label>
<input type="text" name="number" id="number" required="required" placeholder="0876856"/><br/><br />
<input onclick="myfunction()" type="submit"id= "submit" value=" Submit " name="submit"/><br />
</form>
</div>
</div>
</body>
</html>
Thanks in advance!
If you use the normal $_POST you can access the data over $_POST and write it with fopen, fwrite to a file. Over ajax you have to send the Data to a PHP File and do the same there. You cant access the local filesystem over Javascript.
<?php
if(isset($_POST) && !empty($_POST){
// reformat your data here and format it
$yourDataToWriteInTheData = $_POST['firstname'] . '|' . $_POST['lastname'] . PHP_EOF;
// Open the file (or create it, read the fopen manual)
$fileHandler = fopen('file1.txt', 'a+');
fwrite($fileHandler, $yourDataToWriteInTheData);
fclose($fileHandler);
}
I have two HTML pages: firstpage.html and secondpage.html. In firstpage.html, there is a form-
firstpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Form Filling</title>
</head>
<body>
<form action="secondpage.html" method="GET">
Enter Serial Number: <input type="number" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The firstpage data is sent to secondpage.html. I want to display and use the form data serialNumber in secondpage.html-
secondpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>
<form name="selva" action="thirdpage.html">
<input type="hidden" name="kumar">
</form>
<script type="text/javascript">
var locate=window.location;
document.selva.kumar.value=locate;
var text=document.selva.kumar.value;
function pass(str)
{
point=str.lastIndexOf('=');
return(str.substring(point+1,str.length));
}
document.write("Serial Number" + pass(text));
</script>
</body>
</html>
So now I can pass the serialNumber variable from firstpage.html to secondpage.html so that the above code in secondpage.html will show the serial nuimber, and I want same serial number in at thirdpage-
thirdpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Repeating</title>
</head>
<body>
<form method="link">
Enter Serial Number2: <input type="number" name="burns" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
please tell how to print a data in all those pages?
The simplest method I could find for this is, write all the three pages in a single html file and display them based on conditions. This way you dont need to use localstorage.
Other method will be to use query parameters. You can simply learn how to use them. Here's the link to simple javascript-handled query params plugin:
http://jillix.github.io/url.js/
You can pass the serial no as a query parameter to another html. If you are confused on how to use this method, let me know and I'll tell you in detail.
This is my first attempt to write anything in javascript, although this does exactly as intended, I am sure it can be done simpler. Not that this script is all that useful, just an exercise in learning something new. I was also trying not to use the evil document write.
So what is the more elegant way of doing this?
<html>
<body>
<input name="abc" type="text" id="foo">
<button onclick="AddInputValue()">Submit</button>
<p id="displayURL"></p>
<script>
function AddInputValue(){
var domain = "http://site.com?abc="
var qstring = document.getElementById("foo").value;
document.getElementById("displayURL").innerHTML=domain + qstring;
}
</script>
</body>
</html>
If you use jQuery:
<html>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="form1">
<input name="abc" type="text" id="foo">
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://site.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body>
</html>
You can even add more form elements and the name of the element will match the query string. http://jsfiddle.net/3muu6/
Just posting the example in http://jsfiddle.net/3muu6/.
Increased the number of inputs. This is basically what Google Analytics URL Builder does, and was the inspiration for this exercise.
<html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="form1">
<input name="abc" type="text" id="foo" /><br />
<input name="def" type="text" id="bar" /><br />
<input name="ghi" type="text" id="tar" /><br />
<input name="jkl" type="text" id="boo" /><br />
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://example.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body></html>
Now how to omit a query-string pair when the user leaves an input value blank? Hmm.