I'm currently trying to use the DELETE function when updating my REST services through Angularjs but I seem to be getting something wrong.
The button isn't working so it won't delete the data i've selected
The REST services are connected already so they're not the problem, think it's just the code and I can't see the issue. I've tried different methods but none seem to work.
ng-app and controllers are all linked together so no issues there.
The api services are tabled as;
Id
RouteStartPoint
RouteEndPoint
Snippet of html for button to delete item;
<td><button ng-click="removeRoute(route.Id)">Remove Route</button></td>
Snippet of js controller file;
$scope.removeRoute = function (route) {
$http.delete("http://webteach_net.hallam.shu.ac.uk/acesjas/api/route/" + route)
.success(function (response) {
$scope.init();
})
.error(function (error) {
});
};
Related
Currently in the ending stages of trying to get my app online. However using the custom domain, which is on a standard goDaddy Account, I cant view any of my tables
$http.get("https://HEROKU DOMAIN/chat").then(function (response){
$scope.chats = response.data;
});
$scope.postchat = function(chatMsg){
var data = {
chatMsg: chatMsg
};
$http.post("https://HEROKU DOMAIN/chat", JSON.stringify(data))
location.reload();
};
});
This is the AngularJs code . I've tried getting and posting from the Heroku domain, the custom domain and the dns target with no avail. Everything works on my Heroku domain, but on the custom domain no data shows up, and I cant post any data. Here is the front end html code if anyone is interested
<div class="div1">
<table class="table table2">
<tr><th>Messages</th></tr>
<tr ng-repeat="chat in chats">
<td>{{chat.chatMsg}}</td>
</tr>
</table>
Chat <input ng-model="chatMsg"/>
<button class="button button2" ng-click="postchat(chatMsg)">Send</button>
</div>
I'm not sure where to go from here, there might be some security that my custom domain has in regards to who can post and who can get from it. However, as I understand it my custom domain is merely pointing to my heroku app.
Turns out if you use http instead of https while using the custom domain everything works.
$http.get("http://CUSTOM DOMAIN/chat").then(function (response){
$scope.chats = response.data;
});
$scope.postchat = function(chatMsg){
var data = {
chatMsg: chatMsg
};
$http.post("http://CUSTOM DOMAIN/chat", JSON.stringify(data))
location.reload();
};
});
I am building a small AngularJS project and I have encountered a problem that I want to ask you guys about.
I am using angular-local-storage module to store some data coming from my API into the browser's local storage.
In one of my controllers I assign this data to a variable in the $scope object and try to render it in the view as follows:
controller:
angular.module('Dashboard')
.controller('DashboardController',
['$scope', '$rootScope', 'localStorageService',
function ($scope, $rootScope, localStorageService) {
$scope.userData = localStorageService.get('userData');
}]);
And the view:
<div class="row">
<h4>Welcome to your dashboard <strong>{{userData.personalUserInfo.name}}</strong>!</h4>
When I log into the app (which is when the data is fetched from API and stored in local store by key 'userData'), the view is incomplete, I get only "Welcome to your dashboard !" without the name there. When I go to the dev console and look at the localStorage of my browser, the entry "userData" is there, it is just not rendered.
Then when I hit F5 and refresh the page, the name appears.
Do you have any ideas why that is and what can be done to fix that?
Cheers!
You have to use $scope.$watch for this, like following:
$scope.$watch(function() {
return localStorageService.get('userData');
}, function(newVal, oldVal) {
if (newVal !== oldVal)
$scope.userData = newVal;
})
$scope.$watch, will execute second function each time return value of first function is changed.
I am using the following to save the html of a certain website in a string
function loadajax(dname) {
$.ajaxSetup({async: false});
$.get('https://www.example/?param=param1', function(response) {
var logfile = response;
//alert(logfile);
});
}
The problem is that in the html code there are some codes like {{sample}} which seems that there a not loaded yet when the Ajax call is getting the code. When I perform the operations manually I can clearly see HTML code instead of the " {{ }}'s ".
I have already tried {async: false}...
I"m trying to pull images into a React List module using a JSON and can't figure out what I'm doing wrong.
This FIDDLE is supposed to grab two images from my server.
Code:
var Playlist = React.createClass({
render() {
var playlistImages = [];
$.getJSON('http://k1r.com/json/playlist_tn.json', function(data){
playlistImages = data;
});
return (
<List list={playlistImages.images} />
)
}
});
UPDATED FIDDLE
I'm not sure you can use modules directly in JSFiddle, but apart from that the main issue is that you are fetching some asynchronous data directly in your render method and React isn't going to wait on that to finish before rendering your List.
The suggested approach (via the docs: https://facebook.github.io/react/tips/initial-ajax.html) is to make your data request inside of the componentDidMount or componentWillMount lifecycle methods then use setState() to trigger a re-render when the data has been received, which should then correctly render your List.
I want to create a form on an index page that can store data via session storage. I also want to make sure that whatever data(let's say name) ... is remembered and used throughout the site with angular. I have researched pieces of this process but I do not understand how to write it or really even what it's called.
Any help in the right direction would be useful as I am in the infant stages of all of this angular business. Let me know.
The service you want is angular-local-storage.
Just configure it in your app.js file:
localStorageServiceProvider
.setStorageType('sessionStorage');
And then use it in the controller that contains whatever data you want to remember. Here is an example of a controller that loads the session storage data on initialization, and saves it when a user fires $scope.doSearch through the UI. This should give you a good place to start.
(function () {
angular.module("pstat")
.controller("homeCtrl", homeCtrl);
homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
function homeCtrl ($log, dataService, localStorageService, $http) { {
if (localStorageService.get("query")) { //Returns null for missing 'query' cookie
//Or store the results directly if they aren't too large
//Do something with your saved query on page load, probably get data
//Example:
dataService.getData(query)
.success( function (data) {})
.error( function (err) {})
}
$scope.doSearch = function (query) {
vm.token = localStorageService.set("query", query);
//Then actually do your search
}
})
}()