|
When you have a question about code in an article, it's usually best to post it in the forum at the bottom of the article[^]. That way, the author will be notified of your question and have a chance to respond. The person who wrote the code is the person most likely to be able to answer your question. 
Are you loading the page from a web site, or just double-clicking on the HTML file in Windows Explorer? You might have problems making AJAX requests work in a local file.
Have you tried checking the Web Console[^] (F12) for error messages?
Firefox definitely supports the XMLHttpRequest:
XMLHttpRequest[^]
Can I use... XMLHttpRequest advanced features[^]
Error isn't a built-in function, and doesn't appear to be defined in the article's code. Try using alert instead:
function testButton() {
alert("This is an error");
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I'm opening a local HTML file. And I didn't know Error() wasn't a standard function. So I'll look into that. Thanks.
If I put the html file on a web server (I have an account on sdf.org) will Ajax work then? That sounds like a PITA if Ajax won't work in a local file.
|
|
|
|
|
I'm not certain that it won't work from a local file; I've just seen a few issues crop up with local files that are resolved by using a web server.
You don't need a live server to deploy it. You can use a local instance of IIS, or create a project in Visual Studio and use IIS Express.
If you haven't got a copy of Visual Studio, you can get Community Edition for free:
Free Dev Tools - Visual Studio Community 2015[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
|
Hi,
I am beginner for AngularJS and learning, I am trying to execute the following AngularJS script, it is not firing. Can you please help me where did I do mistake?
Here is my script
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="">
<head>
<title>Using AngularJS Directives and Data Binding</title>
</head>
<body data-ng-init="names=['Abdul Aleem', 'Farha Tabassum', 'Abdul Muqtadir', 'Abdul Malik']">
Name :
<br />
<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="personName in Names" > {{personName}} </li>
</ul>
<pre>
<div class="container" data-ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeart="cust in customers">
{{cust.Name}} - {{cust.City}}
</li>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ Name: 'AA', City: 'Sacramento' },
{ Name: 'AB', City: 'Plano' },
{Name: 'AC', City: 'Freemont'},
{ Name: 'AD', City: 'Nalgonda'},
{ Name: 'AE', City: 'Nalgonda' }
];
}
<script>
<script src="Scripts/WebForms/angular.min.js" >
</script>
</body>
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
the underline one are your mistakes
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myapp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
</head>
<body data-ng-init="names=['Abdul Aleem', 'Farha Tabassum', 'Abdul Muqtadir', 'Abdul Malik']">
Name :
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="personName in names"> {{personName}} </li>
</ul>
<div class="container" data-ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="cust in customers">
{{cust.Name}} - {{cust.City}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('SimpleController', SimpleController)
function SimpleController($scope) {
$scope.customers = [
{ Name: 'AA', City: 'Sacramento' },
{ Name: 'AB', City: 'Plano' },
{ Name: 'AC', City: 'Freemont' },
{ Name: 'AD', City: 'Nalgonda' },
{ Name: 'AE', City: 'Nalgonda' }
];
}
</script>
</body>
</html>
demo: JSFiddle[^]
|
|
|
|
|
add this line
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
angular js is missing..
|
|
|
|
|
Yeah thanks Karthik I did it that's why removed it but before removing you posted the answer it seems thank you very much for your help.
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
welcome Abdul , You shall use "Quick Answers" for this, you could have got the solution 1 day back only.
|
|
|
|
|
Sure I will use it, thanks for bringing this into my notice, I have been using this site for a long time, maybe young people like you learn faster .God bless you Karthik.
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
Hi,
I changed it in the below way but still the
{{cust.Name}} - {{cust.City}} are giving me null values, web page is not showing any values against them.
Can you please help me why is it not showing me any values for cust.Name and cust.City?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myapp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-init="names=['Abdul Aleem', 'Farha Tabassum', 'Abdul Muqtadir', 'Abdul Malik']">
Name :
<br />
<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="personName in Names" > {{personName}} </li>
</ul>
<pre>
<div class="container" data-ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeart="cust in customers">
{{cust.Name}} - {{cust.City}}
</li>
</ul>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('SimpleController',
function SimpleController($scope) {
$scope.customers = [
{ Name: 'AA', City: 'Sacramento' },
{ Name: 'AB', City: 'Plano' },
{ Name: 'AC', City: 'Freemont' },
{ Name: 'AD', City: 'Nalgonda' },
{ Name: 'AE', City: 'Nalgonda' }
];
});
</script>
</body>
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myapp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-init="names=['Abdul Aleem', 'Farha Tabassum', 'Abdul Muqtadir', 'Abdul Malik']">
Name :
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="personName in names"> {{personName}} </li>
</ul>
<div class="container" data-ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="cust in customers">
{{cust.Name}} - {{cust.City}}
</li>
</ul>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('SimpleController', function SimpleController($scope) {
$scope.customers = [
{ Name: 'AA', City: 'Sacramento' },
{ Name: 'AB', City: 'Plano' },
{ Name: 'AC', City: 'Freemont' },
{ Name: 'AD', City: 'Nalgonda' },
{ Name: 'AE', City: 'Nalgonda' }
];
});
</script>
</body>
</html>
|
|
|
|
|
Yes I found them, they are spelling mistakes Thank you Karthik
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
|
I have this function that writes HTML5 in a MVC View, then it populates the 5 select elements.
But I want to make sure the elements are populated first before I set the data record in it.
I have a problem with the last select element not having it's value selected, so I suspect the options haven't completed yet.
So I tried this, but it won't magically work without me modifying each function with a promise or something.
The first promise was easy to figure out, but adding a promise to my $Ajax function seems more complicated.
I have no clue how to add the promise to the 3nd code sample.
load_cardData_update_record(_paymentID) // Final Ajax call is the final $Ajax call that grabs the record.
Maybe I'm going about this wrong. Perhaps I should grab the record first before writing all this HTML to the DOM.
$uContainer.empty().html(uElements).show().promise().done(function (arg1) {
select_cardBrands('CreditDebitRecord_Update_Card_Brand');
select_expMonths('CreditDebitRecord_Update_Card_ExpMonth');
select_expYears('CreditDebitRecord_Update_Card_ExpYear');
load_updateCard_countryCodes();
load_updateCard_stateCodes("US");
$.when( select_cardBrands(), select_expMonths(), select_expYears(), load_updateCard_countryCodes(), load_updateCard_stateCodes() ).then(load_cardData_update_record(_paymentID));
$("#CreditDebitRecord_Update_BillingAddress_CountryCode").change(function () {
var _countryCode = $("#CreditDebitRecord_Update_BillingAddress_CountryCode option:selected").val();
load_updateCard_stateCodes(_countryCode);
});
$("#CreditDebitRecord_Update_Card_Name").focus();
});
And a sample function that uses $Ajax and needs a promise.
function select_cardBrands(_parent) {
var $select = $('#' + _parent),
option = '';
$.ajax({
type: "POST",
cache: false,
dataType: "json",
url: '/Ajax/json_select_load_cardBrands',
data: { },
error: function (response) {
debugger;
alert("http code: " + response.status + " Error: json_select_load_cardBrands - data: " + response);
$e_UpdateCreditDebit.toggleClass('active');
},
success: function (data) {
for (var x = 0; x < data.length; x++) {
option += '<option value="' + data[x].value + '">' + data[x].text + '</option>';
}
$select.html(option);
}
});
}
|
|
|
|
|
OK, that was difficult to understand. But is needed so teh form doesn't fail on the user.
Any comments, would you do it different?
$uContainer.empty().html(uElements).show().promise().done(function (arg1) {
var promise_cardBrands = select_cardBrands('CreditDebitRecord_Update_Card_Brand');
promise_cardBrands.done(function () {
select_expMonths('CreditDebitRecord_Update_Card_ExpMonth');
select_expYears('CreditDebitRecord_Update_Card_ExpYear');
var promise_Countries = load_updateCard_countryCodes();
promise_Countries.done(function () {
var promise_States = load_updateCard_stateCodes("US");
promise_States.done(function () {
var promise_Record = load_cardData_update_record(_paymentID);
});
});
});
$("#CreditDebitRecord_Update_BillingAddress_CountryCode").change(function () {
var _countryCode = $("#CreditDebitRecord_Update_BillingAddress_CountryCode option:selected").val();
load_updateCard_stateCodes(_countryCode);
});
$("#CreditDebitRecord_Update_Card_Name").focus();
});
function load_updateCard_stateCodes(_countryCode) {
var $e_StateCode = $("#CreditDebitRecord_Update_BillingAddress_StateCode"),
procemessage = "<option value='0'> Please wait...</option>",
deferred = new $.Deferred();
if (_countryCode !== '--') {
$e_StateCode.html(procemessage).show();
$.ajax({
type: "POST",
cache: true,
dataType: "json",
url: '/Ajax/load_StateCodes',
data: { CountryCode: _countryCode },
error: function (response) {
debugger;
alert("http " + response.status + " Error: load_stateCodes - data: " + response);
},
success: function (data) {
var markup = "<option value='--'>Select State / Province</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].value + ">" + data[x].text + "</option>";
}
$e_StateCode.html(markup).show();
deferred.resolve("finished");
}
});
}
return deferred.promise();
}
|
|
|
|
|
I don't think that I would chain the promises quite like that, since it'll be hard to do anything with it down the road and it forces asynchronous operations into a synchronous format.
I'd personally use a tracking object as a pre-load sentinel for your primary business object, pass an update/check callback to the resolution of each async call, and send them all off at once. This also gives the capability of seeing which particular calls might fail, rather than have the whole bundle collapse in on itself if there's an issue.
An example might look like:
var loadTracker = {
track1: false;
track2: false;
track3: false;
track4: false;
}
function doSomething(promiseItemName)
{
loadTracker[promiseItemName] = true;
if(loadTracker.track1 && loadTracker.track2 && loadTracker.track3 && loadTracker.track4){
doThePromiseDependentThing();
}
}
track1Promise.done(function(){
doSomething('track1');
});
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
I'll take your advice on that!. But will wait for 1 more vote on that.
And my idea didn't work on my iphone 6s+
|
|
|
|
|
All good. That's a pretty quick and dirty construct which can be greatly (and easily) improved.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
Alright, I fixed my iPhone issue so I will make an attempt now to implement your concept.
Thanks!, I'll up vote it when I'm done.
|
|
|
|
|
I am looking for an API that is similar to YouTube Help popup window.
The popup window can be seen on clicking the Help link on the footer of YouTube homepage. The screenshot of it is attached here
Basically I need the API for documentation that looks and works similar to this, having a search box on the top and a Markdown for writing/managing the content
Thanks
|
|
|
|
|
is there any way to know that web page has thrown any error.
i.e. i am using some api and it throws some error in background i.e. on console.
so i want to do like this. if on page myPage.html is there any error thrown by server or js or api or any other thing i want to show alert box.
i tried to add on error event on body of html element but it does not work.
|
|
|
|
|
rorschach217 wrote: but it does not work.
Please do not expect people to understand what that is supposed to mean. If you have a problem then edit your question and add some proper details.
|
|
|
|
|
From your title , my understanding is that you want to handler browser error in javascript but when I read your description , you are contradicting yourself.
You need to understand that Javascript can only handle client scripting errors not server errors unless you pass something in a client script to talk to your javascript code.
There are lot of techniques you can find if you google it.
|
|
|
|
|
Hi Everyone.
I am trying to save multiple rows from angular UI grid to a database using for loop. I am calling controller action method using http.post. Could anyone help me out in guiding how to save multiple rows using http request.
Thanks
Syed
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
