As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done:
$http.get("retrieveData.php").then(function(response){
$scope.tasks = response.data.tasks;
})
In addition, there is a function that enables the insertion of new data into the database using a form:
$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);
}
The main issue lies in the usage of JavaScript's AJAX instead of Angular's. However, it appears challenging to make the conversion.
Moreover, updating the $scope.tasks after the insertion process remains a mystery.
Although attempts were made to explore Angular's POST method online, limited resources were found compared to GET functionality.
To clarify further, only pure JavaScript solutions are preferred over JQuery plugins.
After adjusting the code structure with assistance and planning to delve deeper into Angular forms, here is the updated version:
$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);
}
);
}
});
Despite these updates, an error persists where $scope.tasks fails to reflect newly added elements. An angular-related console error occurs when interacting with an empty database.
TypeError: Cannot read property 'push' of undefined
This peculiar behavior needs further investigation.
Upon inspection post-push operation, the quantity within $scope.tasks alerts one less than anticipated after the update (assuming at least one element exists in the database to avoid previous errors).
The provided HTML code may hold significance in understanding this anomaly:
<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>
Additional insights might be gleaned from inspecting the accompanying PHP script:
<?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());
?>
Troubleshooting efforts have led to utilizing the file_get_contents method due to issues faced with JSON decoding.