Very simple ajax request not working - javascript

I'm making a web app. I run this function with jquery 1.11.2 in index.html:
$.ajax("http://localhost/index.html")
.done(function () {
console.log("success");
})
.fail(function () {
console.log("fail");
});
It works fine. I try it with another file:
$.ajax("http://localhost/online.html")
.done(function () {
console.log("success");
})
.fail(function () {
console.log("fail");
});
I have this error message:
GET http://localhost/online.html net::ERR_FAILED
online.html is in the same folder, it contains:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Picture Viewer</title>
</head>
<body>
</body>
</html>
Why it doesn't work ?
Thanks.

I'm using a manifest.mf to build a web app which work even if device hasn't access to internet.
If I add online.html in manifest.mf it works, I don't understand why. Now idk how to check if the browser is online or offline, the request will always success with this method.
So I found answer to my original question, thanks for help.
Edit: Still work if I put online.html in NETWORK list in manifest.mf, but it looks like the browser still store it in cache.
Edit 2: Finally working fine if I request a .php page instead of requesting .html contents.

Related

Unable to locate element inside Gmail

I've created a project using Nightwatch.js. The process performs checks in our dev enviroment (which works just fine) and will end up sending a test email to a Gmail account. The process will then go to Gmail, login and click the correct email.
I am attempting to get the URL that was sent to the application (a forgot password link) and sending the browser to the correct URL.
The issue is when I use the following code:
browser
.useXpath()
.getText("string(//*[text()[contains(text(),'RetrievePassword')]])",function(result)
{
console.log(result.log)
})
I get this error:
ERROR: Unable to locate element "" using: xpath
But when I tell Nightwatch to click the link, it will do so with no issue. Any idea?
The URL looks like this:
https://test.website.com/Secure/RetrievePassword.aspx?code=123456789
I think your XPath selector is wrong. If you use //*[contains(text(),'RetrievePassword')] instead, it should work. Here is a basic example:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
https://test.website.com/Secure/RetrievePassword.aspx?code=123456789
</body>
</html>
JavaScript (gmail.js)
module.exports = {
'Gmail': function (browser) {
browser
.url('http://localhost:8000/index.html') // Change this if needed
.waitForElementPresent('body', 1000)
.useXpath()
.getText("//*[contains(text(),'RetrievePassword')]", function (res) {
console.log(res.value);
})
.end();
}
};
Command
nightwatch -t tests/gmail.js

jQuery load() function doesn't work

I am new to the world of JavaScript and I'm trying to use the function load() to insert another html file. It' a little bit hard to explain, here is the code:
<script>
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('today.html');
}
); //end click
}); //end ready
</script>
Can you help me? I'm not using a web server.
Thanks
Why it Doesn't Work
Browser security restrictions can block you from using AJAX functions with content that is accessed through the file:// protocol (i.e. from a local file on your computer, without a web server).
Solution
I run a web server on my pc so that I can avoid all of these problems - back when I was working on a Windows PC, I used WAMP. These days, I use Linux (with Apache, PHP and MySQL) on my computer so I can work in an environment that is closer to the server.
I do not believe the code you have presented has any faults in any way. I believe it is to do with your loading of the JQuery library, as with the following code I achieved these results:
index.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('news.html');
}
); //end click
}); //end ready
</script>
</head>
<body>
<p id="main">HELLO</p>
<p id="news">NEWS</p>
</body>
</html>
news.html
<html>
<head></head>
<body><h1>HELLO STACK OVERFLOW!!!</h1></body>
</html>
Before click:
After click:
However, when I was building this example I first tried using the Google APIs version of JQuery and found that I could not currently connect to the API. Therefore I believe the solution to your problem is to go to this website: http://code.jquery.com/jquery-1.11.1.js and copy and paste everything into a text file called 'jquery.js'. Then add the following to the head tag of your main HTML file:
<script src="jquery.js"></script>
Make sure that 'jquery.js' is in the same directory as the main HTML file of your project otherwise this will not work. Hope this helps :)
You can find error message in load(url,fnResponse) response is success or fail
also check this jquery-load-method
$(document).ready(function() {
$('#main').click(
function(){
$('#news').load('today.html', function( response, status, xhr ) {
if ( status == "error" ) {
alert( "Sorry but there was an error: " + xhr.status + " " + xhr.statusText );
}
});
}
); //end click
}); //end ready

Loading a text file through AJAX gives restricted URI error

I mentioned i read the suggested link ...and Could not able to understand the
suggestion .."Use Greasemonkey to modify Pages and start writing some
javascript to modify a web page
I am loading a text file with $.ajax. When running the code on Firefox, I get the following error:
Error: ["Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "<unknown>"]
Here's my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$.ajax({ url: "demo_test.txt",
success: function (result) {
$("#div1").html(result);
},
error: function (abc) {
alert(abc.statusText);
},
cache:false
});
return false;
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
I've already read the following questions:
firefox reading web page from local JS file -- access to restricted URI denied, code: 1012, nsresult: NS_ERROR_DOM_BAD_URI
Error: [Exception... "Access to restricted URI denied" .... while calling $.ajax method
It was suggested that file system should not be used, so changed the URL to http://demo_test.txt, but that did not solve the issue.
I also heard that it might be because of a cross domain issue. If so, what exactly is meant by that, and how should I solve the problem?
Browser security prevents the code from running. You are better off running a local server such as IIS or Apache.
You can change your browser to run local content by changing a browser config
Firefox
Go to about:config
Find security.fileuri.strict_origin_policy parameter
Set it to false
I finally seems to Get it working . Here is working Script
$("button").click(function(){
$.ajax({url:"http://localhost/demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
Workaround : put the html file and text file on local server (IIS) New Site .

jQuery client for REST webservice with jersey

I am new in jQuery and I'm trying to develop a client for my web service. I've tried something simple, just for testing, but still it doesn't work, although it seems ok to me.
I have the jQuery library in my tomee/webapp folder, along with my html and javascript files. If I write some non-jQuery code in my javascript file, it works.
I have the following code:
index.html
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="client.js"></script>
</head>
<body>
<input type="button" id="getAllButton" value="Get all books" onclick="return getAllBooks()"/>
<div id="messageBox"></div>
</body>
</html>
client.js
function getAllBooks() {
$.ajax({
dataType: 'application/xml',
type: 'GET',
url: rootURL + '/books',
success: function (data) {
alert(1);
},
error: function (data) {
alert(2);
}
});
}
The problem is that no alert will appear. If a write pure javascript (I mean without jQuery), alerts will do appear.
Why do alerts not appear? Any advice?
Thank you!
Sorin
Lets try to find out what works and what not; try changing your client.js to:
alert(1);
function getAllBooks() {
alert(2);
window.open(rootURL + '/books');
$.ajax({
dataType: 'application/xml',
type: 'GET',
url: rootURL + '/books',
success: function (data) {
alert(3);
},
error: function (data) {
alert(4);
}
});
}
If you see the alert #1 (when your html page loads) then your client.js path is OK. If you see alert #2 (when you click the button) then at least the function is being called.
Verify if window.open() shows what your web service is supposed to show you (even a error message will guide you throw the right path). And of course, if you see alert #3 or #4 then your problem was mysteriously solved by it self.... it sometimes happens :-)
NOTE: If you know how to use the javascript console of your browser use console.log() instead of alert() for debugging;
Thanks charlietfl for your tips! They helped me solve the problem.
The problem was that it didn't know who rootURL is. I found rootURL in an example and I thought that is something defined in jQuery. It seems it isn't.

Jquery $.get is unaccesible

I have this mark up and a json.txt file which lies on the same directory as this .im unable to fetch it contents..also im not getting any errors in my firebug
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$.get('/json.txt',
function(data) {
$('div.result').html(data);
});
});
</script>
</head>
<body>
<div class="result"></div>
</body>
</html>
"on the same page" ? Do you mean "in the same directory" ? If so use
$.get('json.txt'
If this doesn't work, I suggest using the long form to see what happens :
$.ajax({
url: 'json.txt',
success: function(data){console.log(data)},
error: function(jqXHR, textStatus, errorThrown) {console.log(jqXHR, textStatus, errorThrown)};
});
So you can see in your console (ctrl+maj+i) the error (or the data).
Another note : this can't work if you're opening the html file in file:// as the json would be considered coming from another domain. You must have an http server and open it in http://.
If you type full path, everything works?
$.get('http://localhost/json.txt', function(data) {
});
I am trying help to detect problem
If file is local (file:///), then look jQuery: read text file from file system

Categories

Resources