Hi i have create that sending request to asp.net web api when page loads using angularjs 'data-ng-Init' this is working on localhost and local IIS server but it is not working on Server System IIS server. for explanation purpose
html code
<div ng-controller="myCtrl">
<div ng-if="status==true">
<input type="date" ng-model="date" ng-change="getyear("#Url.Content("~/api/getDate")")" />
<div data-ng-Init="GetData('#Url.Content("~/api/getDate")')></div>
</div>
<div ng-if="status==false">
<input type="date" ng-model="date" ng-change="getYear("#Url.Content("~/api/getYear")")" />
<div data-ng-Init="GetYear('#Url.Content("~/api/getYear")')></div>
</div>
</div>
AngularJS
$scope.getData=function(link){
$http({
method:'POST',
url:link,
data:{data:'somedata'}
}).then(function(result){
...result
},function(error){
...error
});
}]);
like this i have return.
i can send request without writing the code in function, but i have two div's tag which is written in if condition any one div tag will executes.
And the code was working when ng-change means when change the date its working fine but only not working when page loads 'data-ng-Init'.
I am Getting Error like this "192.124.213.12/projectname/api/getDate/ 500 Internal Server Error"
Related
We have multiple pages in sites using angular JS. I added this recaptcha in first page, first page works fine, come back with success response and goes to second page. In the second page, I haven't added this recaptcha at all, but it says validation fails in the second page. When I debug, the form validation is set to false and it mentions the page cannot be saved. The problem is that we can't get into the next page from second page. We use angular JS 1.2.28
I have done server side validation using apex class, it does validate in first page and goes to second page. However, second page gets blocked by missing fields in the form. Here is the code I added in angular JS for first page if that helps. I have a screenshot of the form where it says invalid. I will try to attach that too. I am stuck with this issue for many days now.
<div class="container">
<div class="row">
<div class="col-xs-12 form-group">
<div vc-recaptcha ng-required="true" name="recaptcha" ng-model="applicant.myRecaptchaResponse" key="'xxxxxxx'">
</div>
<div ng-if="form.showAllErrors">
<p class="help-block text-danger" ng-if="form.recaptcha.$invalid">Please check this option.</p>
</div>
</div>
</div>
</div>
I am trying to add swagger in my Angularjs project
OBJECTIVE
I want to test my API via swagger by sending a payload and in return I will get response code 200.
I am following tutorials:
https://www.phpflow.com/jquery-plugin-2/how-to-integrate-swagger-with-angular/
http://orange-opensource.github.io/angular-swagger-ui/ (WORKING DEMO of TUTORIAL)
What I have done so far:
Added these two libraries in my project
<script src="bower_components/angular-swagger-ui/dist/scripts/swagger-ui.js"></script>
<link rel="stylesheet" href="bower_components/angular-swagger-ui/dist/css/swagger-ui.min.css">
HTML
<div >
<h3 class="dispInline">Rest Json file:</h3>
<form name="urlForm" ng-submit="urlForm.$valid&&(swaggerUrl=url)" class="form-inline dispInline">
<input type="url" placeholder="swagger URL" class="form-control" id="url" method="post" name="url" ng-model="url" required style="width:400px">
<button type="submit" class="btn btn-primary">explore</button>
</form>
<div swagger-ui url="swaggerUrl" try-it="true" error-handler="myErrorHandler" transform-try-it="myTransform"></div>
</div>
CONTROLLER
$scope.url = 'https://server.event.com/alert/event/1.0/eventpublicationmanagement_01/events';
// error management
$scope.myErrorHandler = function(data, status){
alert('failed to load swagger: '+status);
console.log(data);
};
// transform try it request
$scope.myTransform = function(request){
request.headers['Authorization'] = 'Bearer 123123123-1231-123-134313313c';
};
But when I click on explore, I get 405 error that method is not allowed. My method is post but browser is somehow sending GET. My token is also not sending in request. How can I solve that?
Also, I am confused because with working of swagger, My API is published on WSO2 API Store which contains a default swagger and my API swagger looks something like this:
If I shall call my API by clicking on explore button, will it show/return an option like API Store is showing? -> /eventpublicationmanagement_01/events
How will I set my JSON as well?
I am very confused. Some guidance and help will be very much appreciated.
To use Swagger You need a swagger.json file. More info You can find in the link: How to generate swagger.json
I'm trying to create a system in which I can display, edit and delete information on players and teams using angular along with a RESTful API. I have the parts working in which I show all the data and post data to the database.
The part I am having trouble with is updating data as I can't manage to get the http put working with the correct data being sent.
HTML
<script type="text/ng-template" id="team-single.html">
<div class="team-box">
<div class="badge">
<img ng-src="images/{{x.club_name}}.png" width="100" height="100"></div>
<div ng-hide="editorEnabled">
<div class="team-name">{{x.club_name}}</div>
<p><b>Manager:</b> {{x.club_manager}}</p>
<p><b>Ground:</b> {{x.club_ground}}</p>
<p><b>Nickname:</b> {{x.club_nickname}}</p>
<div class="team-p">{{x.club_info}}</div>
Edit Team
</div>
<div ng-show="editorEnabled">
<p><input ng-model="x.club_name"></p>
<p><input ng-model="x.club_manager"></p>
<p><input ng-model="x.club_ground"></p>
<p> <input ng-model="x.club_nickname"></p>
<p><input ng-model="x.club_info"></p>
<input type="hidden" name="id" ng-value="" />
Save
</div>
</script>
<div class="row teams">
<div class="container">
<div class="col-md-4" ng-repeat="x in teams" ng-include="'team-single.html'"></div>
</div>
JS
var app = angular.module('footballApp', []);
app.controller("TeamCtrl", function ($scope, $http) {
$scope.updateTeam = function () {
$http({
method: 'PUT',
url: 'clubs.php/teams/' + id,
data: ??,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
};
});
I have enabled an editor on the front end to edit the fields. I don't know how to pass the one object being edited back into the updateTeam function while not passing the entire team array.
Also in the HTTP PUT, I have to use the id field of the relevant club in the URL but I'm not sure how to send this back.
Any help would be greatly appreciated.
To solve your problem you might need to rethink your UI. Why do you want to show edit option for all teams at once in the UI. Ideally you should show the team details along with an option to edit them.
When user click on edit call a function with team data and then show a form where those details can be edited and later can be send for submission.
Refer to this plnkr example https://plnkr.co/edit/muqnmIhO77atLyEHS9y7?p=preview
<div class="row">
<div class="col-xs-6 col-lg-4" ng-repeat="team in teams">
<h2>{{ team.club_name }}</h2>
<p>{{ team.club_info }}</p>
<p><a class="btn btn-default" ng-click="onEditDetails(team)" href="javascript:void(0);" role="button">Edit details ยป</a></p>
</div>
</div>
and then in controller
$scope.onEditDetails = function(team) {
$scope.team = team;
};
This will give you the reference of current selected team. You can use $scope.team then to show a form in UI which can be submitted along with its new edited data.
Note: In your example you are using a template to show HTML in UI but since they are in a ng-repeat each of your template will be using the last variable of loop. A template included using ng-include doesn't create a different scope for each of your team in teams.
If you want to create reusable HTML (though un-necessary as per your requirement) you can create a directive and include it in your ng-repeat as <my-team-directive data="x"></my-team-directive>
I am using Fusion chart with Angular js, data is arriving from json using get request but not loaded to chart. Message "no data to display" is displayed.here is my controller code.
var myApp=angular.module('angularApp',[]);
myApp.controller('countByOperator',function($scope,$http)
{
$http.get("angular/controllers/data/callcountbyoperator.json").success(function(response){
$scope.dataSource=response.data;
alert($scope.dataSource);
FusionCharts.ready(function(){
var countByOperator=new FusionCharts({
type:'bar2d',
renderAt:'countByOperator',
width:'450',
dataFormat:'json',
dataSource:$scope.dataSource
});
countByOperator.render();
});
});
});
This is my html code here:
<div style="border:1px solid #161616; margin:25px 0;" >
<div class="alBarHead">CALL COUNT BY OPERATORS</div>
<div id="countByOperator" ng-controller="countByOperator" ng-init="" ng- model="dataSource"></div>
</div>
Considering the fact that you are using fusioncharts angular-js plugin, there is no need to do this
FusionCharts.ready(function(){
var countByOperator=new FusionCharts({
type:'bar2d',
renderAt:'countByOperator',
width:'450',
dataFormat:'json',
dataSource:$scope.dataSource
});
countByOperator.render();
});
If you change the model by doing $scope.dataSource=response.data; simply, angularjs (and in turn fusioncharts) update the view automatically. Thats the whole point of using it.
And your html would be as simple as
<fusioncharts
width="60"
height="400"
type="column2d"
datasource="{{myDataSource}}"
></fusioncharts>
inside a controller.
If you are not using the plugin
Change the html to
<div ng-controller="countByOperator">
<div id="countByOperator"></div>
</div>
This should work.
I am developing an AngularJS Chrome app, and using the chrome.fileSystem.chooseEntry API, a user can choose a directory. I want to show the user the selected directory, also save the details into local storage to use it everytime the app load.
The former part - show the selected directory to the user does not seem to work.
Here's my template:
<div class="content" ng-controller="SelectCompanyController">
<form role="form">
<div class="form-group">
<strong>Add a New Company</strong>
</div>
<div class="form-group">
<label for="companyName">Enter Company Name</label>
<input id="companyName" type="text" class="form-control" ng-model="newCompany.companyName" style="width:80%"/>
</div>
<div class="form-group">
<label for="location" style="display: block">Select Company Folder Location</label>
<button id="location" ng-click="getUserSelectedFolder()">Choose Company Folder</button>
{{newCompany.location}}
</div>
</form>
</div>
My Controller:
app.controller('SelectCompanyController',['$scope','ReadLocalDBDataService',
function($scope, ReadLocalDBDataService){
$scope.newCompany={};
getUserSelectedFolder=function(){
ReadLocalDBDataService.getUserSelectedFolder().then(function(fileEntry){
chrome.fileSystem.getDisplayPath(fileEntry, function(displayPath){
console.log(displayPath);
$scope.newCompany.location=displayPath;
console.log($scope.newCompany);
});
});
};
$scope.getUserSelectedFolder=getUserSelectedFolder;
}]);
My service
app.factory('ReadLocalDBDataService',['$q', function($q){
var getUserSelectedFolder=function(){
var deferred=$q.defer();
chrome.fileSystem.chooseEntry({type: 'openDirectory'}, function(fileEntry){
if(!fileEntry) deferred.reject("Please select the folder where the Companys' files are present");
else{
var error = chrome.runtime.lastError;
if(error) deferred.reject("An error occurred while selecting the folder. Details: "+error);
else{
deferred.resolve(fileEntry);
}
}
})
return deferred.promise;
};
return {
getUserSelectedFolder: getUserSelectedFolder
};
}]);
In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?
Edit:
I just realised that, after I select the folder once, nothing happens, but if I select the folder again, then it shows up. Why is not showing up the first time?
Here's a response from a developer of the chrome.fileSystem APIs when I asked him to look at your question.
"This question might be written in such a way as to be to be easier to answer. (Its a lot easier when the user can reduce their problem down to a simple example.) I can't immediately find anything wrong with it, but it sounds like the Chrome API part is working fine, but the display isn't updating for some reason ("In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?"). I don't know Angular so I can't help with that."
It sounds like his suggestion is to
1.) Reduce the example down to something as simple as possible.
2.) Investigate why the display might not be updating the first time.