am try to develop an application using angular js in which i take take data from database and populate li using that data
for that i write a WebMethod as fallow
[WebMethod]
public static string getname()
{
SqlHelper sql = new SqlHelper();
DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,Cust_L_Name from customer");
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] arr = new object[dt.Rows.Count];
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
arr[i] = dt.Rows[i].ItemArray;
}
dict.Add(dt.TableName, arr);
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
}
which return data in json form
am use the fallowing js to bind
var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function () {
var factory = {};
var customer;
$.ajax({
type: "POST",
url: "Home.aspx/getname",
data: JSON.stringify({ name: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
customer = $.parseJSON(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
factory.getCustomer = function () {
return customer;
};
return factory;
});
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
$scope.Customer = SimpleFactory.getCustomer();
});
and my view is as fallow
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
<head runat="server">
<title></title>
</head>
<body data-ng-controller="SimpleController">
<form id="form1" runat="server">
<div>
Name<input type="text" data-ng-model="Name" />{{ Name }}
<ul>
<li data-ng-repeat="customer in Customer | filter:Name">{{ customer.cust_F_name }} -
{{ customer.cust_L_name }}</li>
</ul>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Script/Home.js" type="text/javascript"></script>
</body>
</html>
but it not working it will work fine if i hard code the data in factory but when i bring data using ajax call it will not work am unable to understand why it so.
Why it's not working?
you cannot just attach a variable to the scope when it's value is waiting for on asynchronous call.
when you use 3rd-party libraries that changes the scope you must call $scope.$apply() explicitly
prefer $http over $.ajax and use promises!
DemoApp.factory('SimpleFactory', function ($http) {
return {
getCustomer: function(){
return $http.post('Home.aspx/getname',{ name: "" });
})
}
}
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function(customer){
$scope.Customer = customer;
},function(error){
// error handling
});
});
If you still want to use $.ajax
you must explicitly call $scope.$apply() after the response
you must use promises or callbacks to bind to scope variables.
If you want to first fetch data from the server and than load the view
#Misko Hevery has a great answer: Delaying AngularJS route change until model loaded to prevent flicker
It's not related to your problem but load jquery before you load angular.js
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
Your problem is the js (the function "SimpleFactory.getCustomer()") is returning before AJAX call returning..
Also, you should use $http in Angular instead of jquery's ajax, because:
$http returns a "promise" similar to other areas in angular, which means .success, .done are consistent with angular.
$http set the content type to 'application/json' for you on POST requests.
$http success and error callbacks will execute inside of angular context so you don't need to manually trigger a digest cycle - if you use jQuery, then it might be necessary to call $apply..
Like this:
var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', ['$http', function ($http) {
var factory = {};
factory.getCustomer = function () {
var promise = $http.post('Home.aspx/getname', {name: ''});
promise.catch(function(error) {
alert(error);
});
return promise;
};
return factory;
}]);
DemoApp.controller('SimpleController', ['$scope', 'SimpleFactory', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function(customer) {
$scope.Customer = customer;
});
}]);
Factories in AngularJS are singletons. So the way you've written the code will execute the ajax call when the factory is injected into the controller. You don't see the customer data because the server response will be handled after you assign the json data to the scope variable.
A quick (and dirty) fix which will probably work is wrapping the customer object:
DemoApp.factory('SimpleFactory', function ($rootScope) {
// ...
var customer = {};
// ...
$.ajax({
// ...
success: function(data) {
$rootScope.$apply(function() {
customer.data = data;
});
}
// ...
});
});
// In view
<li data-ng-repeat="customer in Customer.data"> <!-- ... --> </li>
A better approach would be to use either to use the builtin $http or the $resource angular service. The last one requires you to make use of RESTful services (recommended). If for any reason you still want to make use of jQuery ajax calls you need some form of telling Angular that the ajax call has been completed: have a look at the $q promise service.
Related
I have a angular controller that has a function which adds the html retrieved in post to a container. I can then click on a div within that sets a var result to some data onclick.
<div onclick="var result = {"some":"data", "right":"here"}...
The issue Im having is retaining the callback functions functionality. This is what I am trying to convert.
jQuery.post(url, {
'callback': "callbackFunctions.setData(result);callbackFunctions.closeDialog();",
'return_type' : 'json'
},
function (json) {
if (json.success) {
jQuery('#template').html(json.message);
}
}, 'json');
That snippet is currently using a external set of functions from the angular controller.
var callbackFunctions = {
closeDialog: function () {
angular.element('#template').dialog('close');
},
SetData: function (result) {
var scope = angular.element('.variables img:visible').scope().$parent;
scope.$apply(function(){
jQuery.extend(true, scope.variables, {
url: result.url,
name: result.name,
thumbnail: result.thumbnail,
value: result.url
});
});
}
};
I just don't think this is the cleanest solution. It currently works I just cant seem to convert this to angular's $http request and get the callback functions to work. Ideally this would be $http.post and when calling the functions they would be within the controller so I already have access to the scope.
One gotcha I can not modify the http I am requesting its used in a ton of other areas of the site not yet updated.
Controller
$http.post(url, data).then(function(response){
$scope.message = response.message;
}, function(error){
console.log("Error detected : " + error);
})
HTML
<div id="template">
{{message}}
</div>
I don't really know what you want to do with the API's data but you can use ng-bind or {{variable}} inside your html to display them
Right now I am using a model property in the javascript as one of the values in a json object that i pass to the controller. The problem is that the javascript will be seperated in a .js file and will not be able to access #Model. So the question is; how do i access model from a seperated .js file?
You can load the external javascript as usual and the send the model value as a property to an init method like this in your view:
<script type="text/url" src="externalscript.js"/>
<script type="text/javascript">
$(function() {
var model = home.views();
model.init({
modelProperty: '#Model.Property',
});
</script>
And then your externalscript.js looks like:
(function (window) {
home = window.home || {};
home.views = function () {
pub.init = function (options) {
var property = options.modelProperty;
};
return pub;
})(window);
And you can use your property like you want to in the external script.
You could try RazorJs (unfortunatelly seems no more mantained)
Write Razor-Style C# or VB.NET inside your Javascript Files. Also
contains an http handler for serving, when needed, those files.
You could do something like this:
Views/Home
#{
ViewBag.Title = "Home Page";
}
#Html.RazorJSInclude("~/Scripts/App/TestRazorJS.js")
<button id="btnSearch" name="submit" type="button" onclick="LoadFromRazor()">Search</button>
Scripts / App / TestRazorJS.js
function LoadFromRazor() {
$.ajax({
url: '#Url.Action("Test", "Home")',
datatype: 'json',
type: 'GET',
cache: false,
success: function () { console.log('done'); },
error: function (xhr, status, error) {
console.log(status);
}
});
}
I have the following angularJs code. When my source data changes, my ng-repeat does not update my view. I looked at other posts and added $scope.$apply(); , $scope.$digest(); at the end of my ajax success callback, but it did not help. The idea is that the page will have an empty table in the begining and after the ajax call onReady() it will populate the rows with data. Could someone point me at what I am missing here or a better way to achieve the same
JS:
(function() {
var app = angular.module("jmeter-module", []);
app.controller('JmeterTableController', ['$scope', function($scope){
$scope.data = [];
$(document).ready(function(){
var url = "jmeterTableData.html";
fetchTableData(url, 10, 25);
});
function fetchTableData(url, minAge, maxAge){
$.ajax({
type: "GET",
url: url,
data: { minAge : minAge,
maxAge : maxAge },
datatype: "json",
success: function(data){
/*If I try to print data here, I see the values rightly getting returned*/
$scope.data = data;
},
error: function(e){
console.log(e);
}
});
}
}]);
})();
JSP:
<div id="buildGroupsParentDivId" ng-controller="JmeterTableController as row">
.
.
.
<tbody id="jmeter-table-content" >
<tr ng-repeat="val in row.data">
<td><img title="History" src="/images/history.png" width="20" height="20"></td>
<td><input type="checkbox" value="save"></td>
<td>{{val.firstName}}</td>
<td>{{val.lastResult}}</td>
</tr>
</tbody>
the problem is with the execution of $.ajax outside of the scope of Angular's digest cycle. You could get this working with $scope.$apply, but since you're already using Angular it's better to use the AngularJS xhr helper methods:
https://docs.angularjs.org/api/ng/service/$http
// Simple GET request example :
$http.get('/someUrl').
then(function(response) {
// this callback will be called asynchronously
// when the response is available
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
So I have the following service/factory setup that should query a JSON file:
myappServices.factory('Result', ['$resource',
function($resource){
return $resource('search.json', {}, {
query: { method:'GET', params: {}, isArray:true }
});
}]);
And then in my SearchCtrl I have:
myappControllers.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location) {
$scope.query = ($state.includes('search') ? $location.search()['q'] : '');
$scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');
$scope.queryChanged = function () {
if($scope.query){
$state.go('search', {'q': $scope.query} );
$scope.results = Result.query();
} else {
$location.search('q', null);
}
$scope.filterQuery = $scope.query;
}
if($scope.query){
$scope.results = Result.query();
} else {
$location.search('q', null);
}
});
The search results page looks like:
<ul class="ng-hide" ng-show="results.length > 0">
<li ng-repeat="result in results">
{{result.name}}
<p>{{result.snippet}}</p>
</li>
</ul>
<p class="ng-hide" ng-show="results.length == 0">Nothing here!</p>
If I do a query like:
/search?=hello
Then ALL the results in the JSON file are returned REGARDLESS of what I have searched for (should only be showing results that match).
However if I don't do a query then no results are shown (correct behaviour).
Why is the query not being used against the JSON file to filter the results?
I did originally have the repeater as:
<li ng-repeat="result in results = ( results | filter:filterQuery )">
But that would be incorrect in this case, as it's would be saying show me the results but filter them using the filterQuery. But in reality there would never be any results if no query, hence removing this part of the repeater. As I don't want to filter a list but return a list filtered.
So it would seem I am missing something in my service to handle this.
Edited: Simplify your resource so it doesn't define query:
myappServices.factory('Result', ['$resource',
function($resource){
return $resource('search.json');
}]);
Try changing your controller to clear the results and only set them when a query has been made:
myappControllers.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location) {
$scope.query = ($state.includes('search') ? $location.search()['q'] : '');
$scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');
$scope.results = [];
$scope.queryChanged = function () {
if($scope.query){
$state.go('search', {'q': $scope.query} );
} else {
$scope.results = Result.query({q:$scope.query});
}
$scope.filterQuery = $scope.query;
}
});
app.factory('querySvc', ['$q', '$resource', querySvc]);
function querySvc($q, $resource) {
var service = {
getSearch: getSearch
}
return service;
function getSearch(){
var deferred = $q.defer();
$resource('search.json').query( function(data){
deferred.resolve(data);
}, function(error){
// handle error
});
return deferred.promise;
}
Then you can call it that way:
querySvc.getSearch().then(function (data){
$scope.results = data;
}, function(error){
//handle error here
});
About your first note :
When you instantiate your controller, it executes everything inside it.
So, if you want to call this function when a user clicks somewhere, you can register a function into the scope :
$scope.querySearch = function(){
querySvc.getSearch().then(function (data){
$scope.results = data;
}, function(error){
//handle error here
});
}
And then, into your view, you will have to call it when an event is fired.
I don't remember the event you need, but I'll show you a way of doing it :
<span ng-click="querySearch()" />
This will trigger the function when you click on the span.
In the console, look in the Network tab to see if the request has an error and/or to see the contents of the response. If the response has a status code of 200 and the contents are correct, then check the response to see if the data is structured correctly for results.length (that it returns a list).
I have a REST service that I made which returns a json string which is simply a set of strings (I used Gson to generate this string (Gson.toJson(mySetOfStrings))
So I have added to my index.html:
<div ng-controller="ListOptionsCtrl">
<form novalidate>
<button ng-click="refreshList()">refresh</button>
<select name="option" ng-model="form.option" ng-options="o.n for o in optionsList></select>
</form>
</div>
and in my script:
var ListOptionsCtrl = function ListOptionsCtrl($scope, $http) {
$scope.refreshList = function() {
$http({
method: 'GET'
url: '*someurl*'
}).
success(function(data) {
$scope.optionsList = angular.fromJson(data);
});
};
}
Unfortunately all this produces in my select box is an empty list. When I see what the response to the GET request is it returns a json string with content in it so I do not see why nothing is being added to this element. What am I doing wrong here? thanks
It is because Angular does not know about your changes yet. Because Angular allow any value to be used as a binding target. Then at the end of any JavaScript code turn, check to see if the value has changed.
You need to use $apply
var ListOptionsCtrl = function ListOptionsCtrl($scope, $http) {
$scope.refreshList = function() {
$http({
method: 'GET'
url: '*someurl*'
}).
success(function(data) {
$scope.$apply(function () {
$scope.optionsList = angular.fromJson(data);
});
});
};
}
Try this.
More about how it works and why it is needed at Jim Hoskins's post
You should check for $digest error by doing if(!$scope.$$phase) { ... } before doing $apply.
success(function(data) {
if(!$scope.$$phase) {
$scope.$apply(function () {
$scope.optionsList = angular.fromJson(data);
});
}
});