Hello, so I prettty much copied this code and it doesn't work for me, but does for other people (the entire html and php)
When I try the query in SQL Management it works, so I don't think it's the database
When I try to read from the database it's just blank, no errors in the console
Here is my select.php:
<?php
//select.php
$connect = mysqli_connect("den1.mssql5.gear.host", "testiranje", "nijebitno#", "testiranje");
$output = array();
$query = "SELECT * FROM dbo.tbl_user";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
}
?>
And here is my index.html:
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>Webslesson Tutorial | AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</h3>
<div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">
<label>First Name</label>
<input type="text" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>
<br /><br />
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.first_name}}</td>
<td>{{x.last_name}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.insertData = function(){
$http.post(
"insert.php",
{'firstname':$scope.firstname, 'lastname':$scope.lastname}
).success(function(data){
alert(data);
$scope.firstname = null;
$scope.lastname = null;
$scope.displayData();
});
}
$scope.displayData = function(){
$scope.names = new Array;
$http.get("select.php")
.success(function(data){
console.log("sranje");
$scope.names = data;
console.log(data);
});
}
});
</script>
You can try adding
header('Content-type: application/json');
before your echo in php function. In this way you "tell" that your php function return json data.
<?php
//select.php
$connect = mysqli_connect("den1.mssql5.gear.host", "testiranje", "nijebitno#", "testiranje");
$output = array();
$query = "SELECT * FROM dbo.tbl_user";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
header('Content-type: application/json');
echo json_encode($output);
}
?>
Related
I'll try to explain my issue with an example:
html code:
<body>
<input type="search" placeholder="filter by line" ng-model="filter.line">
<input type="search" placeholder="filter by area" ng-model="filter.area">
<input type="search" placeholder="filter by text" ng-model="filter.text">
<div>
<tbody ng-repeat="document in result.documents | filter:{line:filter.line} |filter:{area:filter.area}">
<tr>
<td>{{document.line}}</td>
<td>{{document.area}}</td>
<td>{{document.sentences}}</td>
</tr>
</tbody>
My Data example:
$scope.result = {
documents: {
{code:"1",
line:"line1",
area:"area1",
sentences:
{
{"aaaaa"},
{"bbbb"},
{"ccccc"}
}
},
{code:"2",
line:"line2",
area:"area2",
sentences:
{
{"dddd"},
{"eeee"},
{"ffff"}
}
}
}};
So what i'm trying to do is to add a filter using the input "filter.text" to filter only in the column "sentences".
something like
filter:{sentences:filter.text}
How i can do it?
var myApp = angular.module('myApp', [])
myApp.controller("userCtrl", function ($scope) {
$scope.filter_t={};
$scope.result = {
documents:
[{"code":0,"line":"line0","area":"aaa0","sentences":{"id":0}},{"code":1,"line":"line1","area":"aaa1","sentences":{"id":1}},{"code":2,"line":"line2","area":"aaa2","sentences":{"id":2}},{"code":3,"line":"line3","area":"aaa3","sentences":{"id":3}},{"code":4,"line":"line4","area":"aaa4","sentences":{"id":4}},{"code":5,"line":"line5","area":"aaa5","sentences":{"id":5}},{"code":6,"line":"line6","area":"aaa6","sentences":{"id":6}},{"code":7,"line":"line7","area":"aaa7","sentences":{"id":7}},{"code":8,"line":"line8","area":"aaa8","sentences":{"id":8}},{"code":9,"line":"line9","area":"aaa9","sentences":{"id":9}}]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="userCtrl">
<input type="search" placeholder="filter by line" ng-model="filter_t.line">
<input type="search" placeholder="filter by area" ng-model="filter_t.area">
<input type="search" placeholder="filter by sentences inside id based" ng-model="filter_t.sentences.id">
<div>
<table border='1'>
<tbody ng-repeat="document in result.documents | filter:filter_t">
<tr>
<td>{{document.line}}</td>
<td>{{document.area}}</td>
<td>{{document.sentences.id}}</td>
</tr>
</tbody>
</table>
</div>
try this Data,
$scope.result = {
documents: {
{code:"1",
line:"line1",
area:"area1",
sentences:
{
{"aaaaa"},
{"bbbb"},
{"ccccc"}
}
},
{code:"2",
line:"line2",
area:"area2",
sentences:
{
{"dddd"},
{"eeee"},
{"ffff"}
}
}
}
};
I'm new to bootstrap. I want to do CRUD operations on the employee data from asp.net WebAPI using Bootstrap-Modal. I'm able to display the data from webapi to angularJS using a table(ng-repeat). In every row, at the end, I've three buttons VIEW, DELETE and EDIT and another outside the table ADD.
I want, whenever a user clicks on the ADD, VIEW, DELETE and EDIT button, a bootstrap modal should pop up and we should be able to perform CRUD operations.
I've tried many instances but no luck on how to get the data on Modal. Please help.
The code is as follows:
WEBAPI:
public class EmployeeService
{
SampleDatabaseEntities sampleDBEntities = new SampleDatabaseEntities();
//ADD USER
public int saveEmployee(EmployeeTable employeeTable)
{
sampleDBEntities.EmployeeTables.Add(employeeTable);
sampleDBEntities.SaveChanges();
return employeeTable.E_ID;
}
public EmployeeTable getEmployeeById(int id)
{
return sampleDBEntities.EmployeeTables.Find(id);
}
public List<EmployeeTable> getEmployees()
{
return sampleDBEntities.EmployeeTables.ToList();
}
public void updateEmployee(int x, EmployeeTable employeeTable)
{
if (employeeTable.E_ID == x)
{
sampleDBEntities.Entry(employeeTable).State = EntityState.Modified;
sampleDBEntities.SaveChanges();
}
}
public void deleteEmployee(int id)
{
var employee = sampleDBEntities.EmployeeTables.Find(id);
if(employee !=null)
{
sampleDBEntities.Entry(employee).State = EntityState.Deleted;
sampleDBEntities.SaveChanges();
}
}
Angular Service:
angular.module('mainApp', []).
factory('employeeService', function ($http) {
var baseAddress = 'http://localhost:53254/api/employee/';
//var baseAddress = 'http://localhost:49595/MobileService/api/UserService/';
var url = "";
return {
getEmployeesList: function () {
url = baseAddress;
return $http.get(url);
},
getUser: function (employee) {
url = baseAddress + "Get/" + employee.E_id;
return $http.get(url);
},
addUser: function (employee) {
url = baseAddress + "post";
return $http.post(url, employee);
},
deleteUser: function (employee) {
url = baseAddress + "Delete/" + employee.E_Id;
return $http.delete(url);
},
updateUser: function (employee) {
url = baseAddress + "put/" + employee.E_Id;
return $http.put(url, employee);
}
};
});
Angular Controller:
angular.module('mainApp')
.controller('getEmployeeCrl', ['$scope', 'employeeService', function ($scope, employeeService) {
employeeService.getEmployeesList().then(function (response) {
$scope.employees = response.data;
}, function (err) {
$scope.errMessage = "Something wrong with server. Please try again.";
})
}]);
HTML:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<script src="../mainApp.js"></script>
<script src="../Utilities/ConstantsFactory.js"></script>
<script src="../Services/EmployeeService.js"></script>
<script src="../Controllers/EmployeeController.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="getEmployeeCrl">
<div>
<h2 style="text-align:center; color:darkblue">PROJECT 51</h2>
</div>
<div class="container">
<div style="background-color:dimgray;color:white;padding:20px;">
<input type="button" value="Go to Employees" class="btn btn-info" />
<input type="button" value="Go to Clients" class="btn btn-info" style="width:145px" />
<button class="glyphicon glyphicon-plus btn btn-primary" value="Add" data-toggle="tooltip" data-placement="top" title="Add Data" style="float:right; width:50px"></button>
</div>
<br />
<table class="table table-bordered table table-condensed" ng-hide="!employees">
<thead style="background-color:palevioletred">
<tr style="text-decoration:solid;color:darkblue;">
<th>Id</th>
<th>Name</th>
<th>Job</th>
<th>Hire Date</th>
<th>Manager</th>
<th>Salary</th>
<th>Commission</th>
<th colspan="2">Edit/Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees ">
<td>{{emp.E_ID}}</td>
<td>{{emp.E_NAME}}</td>
<td>{{emp.E_JOB}}</td>
<td>{{emp.HIRE_DATE}}</td>
<td>{{emp.MANAGER_ID}}</td>
<td>{{emp.SALARY}}</td>
<td>{{emp.COMMISSION}}</td>
<td colspan="2" style="width:170px">
<input type="button" ng-model="emp.E_Id" value="View" class="btn btn-primary" style="width:70px" />
<input type="button" value="Edit" class="btn btn-primary" style="width:70px" />
<input type="button" value="Delete" class="btn btn-primary" style="width:70px" />
</td>
</tr>
</tbody>
</table>
<p class="alert alert-danger" ng-show="!employees">{{errMessage}} <span class="glyphicon glyphicon-refresh" ng-show="!employees"></span></p>
</div>
</body>
</html>
How can I make use of Bootstrap Modal for CRUD operations
I am working on a sample app using angularJS.
I have a service which returns JSON object, I am trying to bind the response to a table.
Controller -
(function () {
var app = angular.module('searchApp', []);
app.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['http://localhost:11838/SearchProfiles/get']);
});
var controller = app.controller('searchController', ["$scope", "$http", function ($scope, $http) {
$scope.profileName = "";
$http.get("http://localhost:11838/SearchProfiles/GetAllRuleSets")
.then(function (response) {
$scope.ruleSets = response.data;
});
$scope.searchProfiles = function () {
$http.get("http://localhost:11838/SearchProfiles/GetProfiles?profileName=" + $scope.profileName
+ "&ruleSetName=" + $scope.selectedRuleSet)
.then(function (response) {
$scope.showProfiles = true;
$scope.profiles = response.data;
console.log($scope.profiles);
});
};
$scope.clearForm = function () {
$scope.profileName = "";
$scope.selectedRuleSet = "";
};
}]);
})();
cshtml -
#{
ViewBag.Title = "Search Profiles";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search Profiles</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
#Scripts.Render("~/Scripts/angular")
#Styles.Render("~/Content/css/scss")
</head>
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
</div>
<div ng-controller="searchController" id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</body>
I am getting back following response -
[{"ProfileName":"Profile3","CreationDate":"1/9/2017"},{"ProfileName":"Profile4","CreationDate":"12/30/2016"}]
but even after setting $scope.profiles I am not seeing table on UI.
I'm fairly new to angular, am I missing something obvious.
Any help is appreciated.
The problem is that you are fetching the data in one scope (the div content where you declare ng-controller="searchController") and then trying to
view the data in another scope (the div profilesDiv where you again declare the ng-controller="searchController").
To solve the problem you need to remove ng-controller="searchController" from the profilesDiv and move the profilesDiv inside the content div.
Like this:
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
<div id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</div>
</body
I have an angular app, and an index.html with an ng-view that renders to different views partials/persons.html and partials/newPerson.html.
when i add a new person to the $scope.persons in my controller via the newPerson.html the $scope.persons is updated, but it dosn´t updated the table in the partials/persons.html. if i copy/paste the table into partials/newPerson.html the table is updated automatically. I cant seem to wrap my head around why? they are using the same controller...?
thank´s in advance for your help :)
js/app.js
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/persons',{
templateUrl:'partials/persons.html',
controller:'PersonCtrl'
})
.when('/newperson',{
templateUrl:'partials/newPerson.html',
controller:'PersonCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('PersonCtrl',['$scope', function($scope){
var persons = [
{
id: 1
,name: "Jens",
age : 18}
,{
id: 2,
name: "Peter",
age : 23
}
,{
id: 3
,name: "Hanne"
,age : 23
}
];
$scope.persons = persons;
$scope.nextId = 4;
$scope.savePerson = function(){
if($scope.newPerson.id === undefined)
{
$scope.newPerson.id= $scope.nextId++;
$scope.persons.push($scope.newPerson);
}else{
for (var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].id === $scope.newPerson.id){
$scope.persons[i] = $scope.newPerson;
break;
}
}
}
$scope.newPerson = {};
};
index.html
<html ng-app="app" ng-controller="PersonCtrl">
<head>
<title>Routing</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<script src="angularSrc/app.js"></script>
</head>
<body>
<br>
<div class="container">
<header>
<h1>People Routing</h1>
<nav>
persons
new person
</nav>
</header>
<div ng-view="ng-view">
</div>
</div>
</body>
partials/persons.html
<h3>Persons</h3>
<table >
<thead>
<tr>
<td>Id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons">
<td>{{p.id}} </td>
<td>{{p.name}} </td>
<td>{{p.age}} </td>
</tr>
</tbody>
</table>
partials/newPerson.html
<div >
<h1>New person</h1>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<input type="text" ng-model="newPerson.name" model="newPerson.name" class="form-control" id="year" placeholder="name">
</div>
<div class="form-group">
<input type="number" ng-model="newPerson.age" model="newPerson.age" class="form-control" id="age" placeholder="age">
</div>
</fieldset>
</form>
<button type="submit" ng-click="savePerson()" >Save</button>
<h2>nextId: {{nextId}}</h2>
</div>
The problem is that you aren't realizing that each use of controller creates new instance.
The scope is destroyed when you leave a controller so if you add to the scope in one instance , that change will be lost when you load controller again on your other route.
You need to use a service to persist the data during the life of each page load.
Simple service example:
app.factory('PersonService', function () {
var persons = [{
id: 1,
name: "Jens",
age: 18
}, {
...
}, {
...
}];
return {
persons: persons
}
});
Then inject in controller and use the service data in controller
app.controller('PersonCtrl',['$scope','PersonService', function($scope,PersonService){
$scope.persons = PersonService.persons;
I have the following simple CRUD based code (most taken from the AwesomeTodo tutorial).
It's one html file, just a grid, and when create() is called, I expect the UI to update.
THIS APP WORKS! It just doesn't refresh the view when i create new records, I have to refresh the browser which obviously reloads the resource.
<div id="apps-table" compile="html">
<table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Label</th>
<th>Description</th>
<th>Status</th>
<th>Location</th>
<th><a ng-click="promptForNew()"><li class="icon-plus"></li> New App</a></th>
</tr>
</thead>
<tbody>
<tr style="display:none" id="add-app-row">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
</td>
</tr>
<tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
<a class="btn btn-small btn-danger" ng-click="delete()"><i class="icon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
var AdminApp = angular.module("AdminApp", ["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: AppCtrl, templateUrl: 'applications.html' }).
otherwise({ redirectTo: '/' });
});
AdminApp.factory('App', function($resource) {
return $resource('/rest/system/app/:id/?app_name=admin', {}, { update: { method: 'PUT'}});});
var AppCtrl = function ($scope, App) {
$scope.Apps = App.get();
$scope.formChanged = function(){
$('#save_' + this.app.fields.id).removeClass('disabled');
};
$scope.promptForNew = function(){
$('#add-app-row').show();
};
$scope.save = function () {
var records = {};
var record = {};
record.fields = this.app.fields;
delete record.fields.name;
records.record = record;
var id = this.app.fields.id;
App.update({id:id}, records, function () {
$('#save_' + id).addClass('disabled');
});
};
$scope.create = function() {
var currentScope = $scope;
var records = {};
var record = {};
record.fields = this.app.fields;
records.record = record;
App.save(records, function() {
$('#add-app-row').hide();
});
};
$scope.delete = function () {
var id = this.app.fields.id;
App.delete({ id: id }, function () {
$("#row_" + id).fadeOut();
});
};
};
Here is the index.html:
<!DOCTYPE html>
<html ng-app="AdminApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="/lib/web-core/js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/resource.js"></script>
<script src="/lib/web-core/js/jquery.js"></script>
<script src="/lib/web-core/js/bootstrap.min.js"></script>
</body>
</html>
All my actions are through ng-click, so I dont appear to be doing anything "outside Angular"
Question is, is this code working as it should? Or should it actually update?
Only way i can update scope is manually using :
$scope.Apps.record.push($scope.app);
thats hideous. Cant use apply or digest, nor should I have to.
Glancing through your code and the jsFiddle, I've come across the following issues so far:
The framework loading needs to be set to "no wrap (head)" instead of "onLoad" in the jsFiddle settings
The ngApp directive is not used anywhere to bootstrap the application
There is an ngController directive specifying the AppCtrl controller, but that controller isn't registered with the application module using module.controller (it's just a free-standing variable)
The controller functions invoked via ngClick use jQuery to manipulate the DOM--not only is this a big no-no in Angular (use directives, not controllers, for your DOM manipulation), but the jQuery library isn't even included in the jsFiddle.