|
- Using Firefox v43.
- Trying example at Simple and Practical Introduction to Asynchronous JavaScript and XML (AJAX)[^]
- I'm a newbie here and with Javascript. If this isn't the right site for newbies just let me know. Some sites are somewhat hostile to newbies.
- I do have Ublock Origin in FF, I don't know if that or FF is blocking popups or not. If so, how do I get FF to not block popups from local HTM files?
I made the XML file and html file (which I called ajax1.htm) and opened it in Firefox. I clicked the button "ReadXML" and it did nothing, nothing changed in my browser.
I'm trying to figure out if FF does not support XMLHttpRequest or if something else is going on. Do you have any ideas?
EDIT: The bottom of ajax1.htm has been changed to this to test the Error() function via clicking a new button. I got no result from clicking the "Test error" button either. (The code formatting does not seem to be working.)
</script>
<script type="text/javascript">
function testButton() {
Error("This is an error");
}
</script>
<body>
<span id="xmlSpan"></span>
<input type="button" onclick="ReadXmlFile();" value="ReadXml" />
<input type="button" onclick="testButton();" value="Test Error" />
modified 25-May-16 15:14pm.
|
|
|
|
|
1. The link you posted is to an article. Usually if you have a question about the article you post it at the bottom of the article. In this case I think it's still valid that you asked here.
2. Notice the date on that article, 2009. Quite old in tech years. I suggest using jQuery and calling .ajax() instead. There are tons of examples online and jQuery is a library that keeps up with the various browsers so the same code should work in all browsers.
3. See jQuery.ajax() | jQuery API Documentation[^] for documentation.
4. Also, if you choose to stick with your original question, edit it and post the relevant code.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
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.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
