Hi I need some minor direction. I can pull the data in the viewCtrl but every time i go to add a new contact, the issue I get is $http(..)then(..)catch is not a function at oBJECT.$scope.addContact I have no idea what is causing this?
Its also not allowing me to "POST" but I am able to "GET". Can anyone see whats wrong with what i am doing?
var app = angular.module('app', []);
app.controller('viewCtrl', function($scope, $http) {
var url = "https://";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
$scope.contacts = data.d.results;
console.log($scope.contacts);
}).error(function(data, status, headers, config) {});
});
app.controller('addItemsController', function($scope, $http) {
var url = "https://";
$scope.addContact = function() {
return $http({
headers: {
"Accept": "application/json; odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
method: "POST",
url: url,
data: {
'Lastname': $scope.Lastname,
'Firstname': $scope.Firstname
}
})
.then(saveContact)
.catch(function(message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("Item Added Successfully");
return data.data.d;
}
}
//console.log("an item has been added!");
});
app.controller('editItemsController', function($scope) {
$scope.editItem = function() {
console.log("an item can now be edited!");
}
});
app.controller('deleteItemsController', function($scope) {
$scope.deleteItem = function() {
console.log("item has been deleted");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<body ng-app="myapp">
<div ng-controller="viewCtrl">
<div ng-repeat="contact in contacts">
{{contact.ID}}: {{contact.Lastname}}, {{contact.Firstname}}
<button>Edit</button>
<button>Delete</button>
<br />
</div>
</div>
<h3>Add Contacts</h3>
<div ng-controller="addItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="Firstname" ng-model="Firstname" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="Lastname" ng-model="Lastname" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()" />
<input type="button" id="btnAddContact2" value="Add Contact" ng-click="addItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Edit Contacts</h3>
<div ng-controller="editItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="firstName" ng-model="firstName" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="lastName" ng-model="lastName" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnEditContact" value="Edit Contact" ng-click="editItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Delete Contacts</h3>
<div ng-controller="deleteItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnDelContact" value="Delete Contact" ng-click="deleteItem()" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I see some mismatch between function on
onviewCtrl
$http(...).success(...).error(...)
while on addItemsController
$http(...).then(...).catch(...)
use which code you are available on
Related
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.submitForm = function(cl) {
console.log(cl);
$http({
method: 'POST',
url: "updated-profile",
data: {
cl: cl
},
}).then(function successCallback(response) {
console.log("updated successfully");
$scope.success = "Updated successfully";
}, function errorCallback(response) {
console.log("not updated");
$scope.error = "Unable to update";
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="cl in clientList">
<div id="error-messages" ng-show="error">{{error}}</div>
<div id="success" ng-show="success">{{success}}</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8 ">
<input type="text" class="form-control" placeholder="First Name" ng-model="cl.fname" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="text " class="form-control" ng-model="cl.lname" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only">Update</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
</div>
</div>
</div>
I am using above code to send data to server.
My server code is
public class Update extends ActionSupport {
private Client cl = new Client();
private String fname;
public String update() {
System.out.println("testing this");
System.out.println("client detail " + cl.getFname() + " " +
cl.getLname());
System.out.println("fname"+getFname());
}
}
I am getting
client detail null null
fnamenull
If I am using data: {fname: cl.fname}, then also fnamenull.
I am unable to pass any value using angular post to action.
What is wrong here?
What changes to made here to work it properly?
Your button
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
has to be inside the ng-repeat loop, otherwise it will not have access to the cl object as that is local to the ng-repeat scope.
Alternatively, if you want the button to be "global", you can submit the entire clientList in the ng-submit and then loop through the array inside your controller. It depends on your flow and what kind of UX/UI you need for the project.
$http({
method: 'POST',
url: "www.mylocalhost.com/api/updated-profile",
data: {
cl: cl
},
});
When you are calling a $http service "url" parameter shoul contain a proper api path. just use a valid api url . I hope it will work.
Or
change "cl":$scope.clientList
I am using materializecss and my project uses angularjs as well.I have a form which looks like this.Both html and js are attached.The problem is that when i press submit no data is passed from the form.The relevant add function is called.In console it shows that the variable test is {} after stringify.I am not understanding why.Please help.Any help would be appreciated .(i have defined ng-app in the main file.Havent attached that here)
app.controller("MyAddController", function($scope, $http) {
$scope.test = {};
$scope.add = function() {
console.log("------------>"+JSON.stringify($scope.test));
$http({
url: "rest/leave/create",
method: "POST",
data: JSON.stringify($scope.test),
headers: {'Content-Type': 'application/json'}
}).success(function(data, status, headers, config) {
if (data) {
$scope.data = data;
alert("success");
}
}).error(function(data, status, headers, config) {
alert("error");
})
}
});
<!-- Modal Structure -->
<div id="modal1" class="modal" ng-controller="MyAddController">
<div class="modal-content">
<h4>Apply Leave</h4>
<div class="row">
<form class="col s12">
<div class="row modal-form-row">
<div class="input-field col s6">
<input id=num" type="text" class="validate" ng-bind="test.num">
<label for="num">num</label>
</div>
<div class="input-field col s6">
<input id="ename" type="text" class="validate" ng-bind="test.Title">
<label for="ename">Employee Name</label>
</div>
</div>
<div class="row modal-form-row">
<div class="input-field col s5">
<input id="startDate" type="text" class="validate" value="{{selectionDate.startdate}}" ng-bind="test.StartAt">
</div>
<div class="input-field col s5">
<input id="endDate" type="text" class="validate" value="{{selectionDate.enddate}}" ng-bind="test.EndAt">
</div>
<div class="input-field col s2">
<p>
<input type="checkbox" id="test6" value="yes" ng-bind="isFull"/>
<label for="test6">Half Day</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="description" type="text" class="validate" ng-bind="test.Description">
<label for="description">Description</label>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
Change ng-bind to ng-model for two way data binding --- view to controller
and you are also missing quotes in
<input id=num" type="text" class="validate" ng-bind="test.num">
Plunker
Here I am trying to pass user entered data in to angular function so that i can send it to server. but data is not receing in function.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.submitForm = function (data) {
console.log(data + " " + data.fname + " " + data.lname);
$http({
method: 'POST',
url: "update",
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (result) {
console.log(result);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="update">
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for=fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="fname" name="fname" placeholder="First Name"
ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="lname" name="lname" placeholder="Last Name"
ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only" >submit</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="submit" class="form-control btn btn-success" id="update"
ng-click="submitForm(user)"
name="submit" placeholder="Submit"/>
</div>
</div>
</form>
</div>
Instead of ng-bind use ng-model
ng-bind="user.fname" ---> ng-model="user.fname",
use this for all form elements.
I want to use the value of a radio button and implement that into an api link but its not linking for some reason.
heres my code
JS
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
HTML
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
This works well fiddle:
myApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$scope.formData = {};
$scope.doIt = function() {
$scope.targetURL = ('https://api.api/' + $scope.formData + '/us/profile');
$http.get($scope.targetURL)
.success(function(results) {
$scope.data = results.data;
});
};
}
]);
And your HTML:
<div ng-app="myApp">
<div ng-controller="HomeController">
<div class="container-fluid">
<div class="background">
<div class="transbox">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-3">
<label><input type="radio" name='radio' value="pc" ng-model="formData"><img src="../img/battlenet.png"></label>
<label><input type="radio" name='radio' value="psn" ng-model="formData"><img src="../img/playstation.png"></label>
</div>
<div class="col-lg-5">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" placeholder="Enter Gamertag">
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" ng-click="doIt()"> Submit </button>
</div>
</div>
</div>
</div>
</div>
</div>
I think you are not calling the controller, at least in your example it is not. If you check the network tab in the chrome console for the requests, you will see the correct data is sent:
https://api.api/pc/us/profile
https://api.api/psn/us/profile
I have a modal page that works if I request it with its own URL but If request it as modal, modal page popup works but angular is not working. I see {{post.name}} in name input.
I am calling my modal page with:
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" data-toggle="modal"><tags:label text="edit"/></a>
Here is my modal page:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span6" data-popup="modal">
<div class="row-fluid sortable">
<div class="box span12" ng-app="myApp">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/update' data-toggle="validate" method="post" ng-controller="PostsCtrl">
<input type="hidden" name="brandid" value="{{post.brandid}}"/>
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{post.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="post.isactive" name="isactive" value="1"/>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var brandId = getParameterByName('brandid');
var app = angular.module('myApp', [])
.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJsonBrandAndEdit?brandid=' + brandId).
success(function(data, status, headers, config) {
$scope.post = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
How can I make it work ? What is the problem ?