So I'm using angularjs/SQL technique to retrieve data from a database like so:
$http.get("retrieveData.php").then(function(response){
$scope.tasks = response.data.tasks;
})
$scope.submitTask = function(){
var description = document.getElementById("typeDescription").value;
var todayDate = document.getElementById("todayDate").value;
try{
reminder = document.getElementById("reminder").value;
}
catch(err){
reminder = "NONE";
}
var status = document.getElementsByName("selectStatus");
var statusValue;
for(i=0;i<status.length;i++){
if(status[i].checked){
statusValue = status[i].value;
}
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("msg").innerHTML = this.responseText;
}
};
xhttp.open("POST", "enterTask.php");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("desc="+description+"&status="+statusValue+"&reminder="+reminder+"&todayDate="+todayDate);
}
$scope.tasks
$http.get("retrieveData.php").then(function(response){
$scope.tasks = response.data.tasks;
})
$scope.submitTask = function(){
var description = document.getElementById("typeDescription").value;
var todayDate = document.getElementById("todayDate").value;
try{
reminder = document.getElementById("reminder").value;
}
catch(err){
reminder = "NONE";
}
var status = document.getElementsByName("selectStatus");
var statusValue;
for(i=0;i<status.length;i++){
if(status[i].checked){
statusValue = status[i].value;
}
}
var task = {
desc:description,
status:statusValue,
reminder:reminder,
todayDate: todayDate
}
$http.post('enterTask.php', task).then(
function(response){
$scope.tasks.push(task);
}
);
}
});
$scope.tasks
TypeError: Cannot read property 'push' of undefined
$scope.tasks
<ul>
<li ng-repeat="x in tasks" ng-bind="x.Description"></li>
</ul>
<form>
<input type="text" value="{{today}}" id="todayDate">
<textarea rows="15" cols="100" name="typeDescription" id="typeDescription"></textarea>
<input type="checkbox" ng-model="setReminder" name="setReminder">Set Reminder
<input type="date" name="reminder" id="reminder" ng-if="setReminder"><br>
<input type="radio" name="selectStatus" value="CR">Client Response
<input type="radio" name="selectStatus" value="IR">Internal Response
<input type="radio" name="selectStatus" value="BD">BD Control
<input type="radio" name="selectStatus" value="OC">On Calendar<br>
<input type="submit" ng-click="submitTask();">
</form>
<?php
/*$description = json_decode($_POST['desc']);
$reminder = json_decode($_POST['reminder']);
$todayDate = json_decode($_POST['todayDate']);
$status = json_decode($POST['status']);*/
$data = json_decode(file_get_contents("php://input"));
$description = $data->desc;
$reminder = $data->reminder;
$todayDate = $data->todayDate;
$status = $data->status;
require 'databaseConnect.php';
$query="INSERT INTO TaskTracker (DATESTAMP,STATUS,DESCRIPTION,REMINDER) VALUES ('$todayDate','$status','$description','$reminder')";
mysql_query($query) or die(mysql_error());
?>
file_get_contents
You have to "tackle" some points to get the submitTask
function into an angular way of thinking.
Use ng-model
data binding from the input elements to the $scope
. There are several tutorials out there. By using this you can get rid of the whole getElementById
stuff.
Use $http.post
to send the data over the wire.
Update the $scope.tasks
array by simply adding/removing elements. The two way data bindung of angular will do the update for you in e.g. via ng-repeat
For the last to points I sketched the JavaScript code for you.
$scope.submitTask = function(){
var description = document.getElementById("typeDescription").value;
var todayDate = document.getElementById("todayDate").value;
try{
reminder = document.getElementById("reminder").value;
}
catch(err){
reminder = "NONE";
}
var status = document.getElementsByName("selectStatus");
var statusValue;
for(i=0;i<status.length;i++){
if(status[i].checked){
statusValue = status[i].value;
}
}
var task = {
desc: description,
status: statusValue,
reminder: reminder,
todayDate: todayDate
}
$http.post('enterTask.php', task).then(
function (response) {
$scope.tasks.push(task);
}
);
}