Hi i am trying to display to contents of this test.html file by ajax and the jquery get function as an alert in index.html. The alert out side the .get works.
test.html
<p>herro my name is dog</p>
index.html
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<script>
alert("data");
$.get("test.html", function(data){
alert(data);
});
</script>
</body>
</html>
Open Developer tools by hitting F12. This should work in IE8+, FF, and Chrome.
View the Console and it should show you the error and point to an offending line of code. This should give you the information you need to fix or do further research.
It works for me in IE11.
Use a debugger to first confirm that jQuery is loading correctly. You can also do this with code:
alert("jQuery loaded OK? " + $ && typeof($) === 'function' && $ === jQuery);
Apologies for my previous answer, I was alluding to something and should have just been a comment. Also this answer is based on a hunch I have about your situation. If you try:
$.get("test.html", function(data){
alert(data);
}).fail(function() {
alert('ERROR');
});
You should at least have something returned to you even if it's not what you expected. If you then get your ERROR message you can then check your browser's console. You may see something like the following.
I am suspecting that you are not running this within a web server on your local computer so "test.html" cannot be accepted. You may want to check out a project such as WAMP if you are on Windows or MAMP if you are using a Mac.
If the message isn't like the one shown then update us on what you are getting.
Related
I am not sure what I am doing wrong but in my application when I try to do something like
$('#root').text();
I get
VM269:1 Uncaught TypeError: Cannot read property 'val' of null(…)
I have no clue why as I am referencing jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>Document</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--materialize does not understand jquery if I use it as import-->
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
I am using reactjs but I don't think that should be a problem and the fact that I have no problems with firebug in firefox when I do the same command.
Edit
My bad $('#test') is something rendered into "root" div but same issue. So I just updated my query to do $('#root').text()
but doing $('#root') works it finds the element and like I said in firebug everything works.
You are trying to get the value from a tag with id='test' and you don't have one in your HTMl.
If you have used $('#root').val() it'd work.
Helpful selector link
I believe you want the value of id="test". However, I do not see id="test" on your html file that you have included. Furthermore, you can also try $('#test').text() that will grab html text.
I have some JavaScript which needs access to some data available on the server. In the past, I just used PHP to include some JavaScript in the original page download which would create an object, and used that. I would like to try doing so differently, and instead download some JSON and use that.
How is this accomplished. I made up the following and don't know if it is the "right" way.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script type="text/javascript">
//Disable all events using JavaScript. How is this done?
</script>
</head>
<body>
<script type="text/javascript">
//Allow events which were previously disabled
//$(function(){}); not needed since end of the page
$.getJSON( 'getMyJSONstuff.php', function(myJSONstuff) {
$('#elem1').plugin1({x:myJSONstuff.x});
$('#elem2').plugin2({y:myJSONstuff.y});
});
$('#elem3').plugin2({y:123});
$('#elem4').plugin3({z:321});
</script>
</body>
</html>
I've been doing an Angular.js course, and now that I finished it, I wanted to give it a try and do some tests.
I used the basic html file for beginning:
<html ng-app="app.js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="plugins/angular-min-1.4.3.js"></script>
</head>
<body>
</body>
</html>
... which points to the simple angular app.js main module declaration:
var app = angular.module('app', []);
Nothing strange here, no? I tried making a few directives and so, but nothing worked. Then, I found this error, which appears as soon as I only have the above code. I guess it's not adding well the plugin or I'm not declaring well the app variable.
12:32:44.547 Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=app.js&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3Dapp.js%0AJ%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A6%3A416%0Ade%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A24%3A66%0Aa%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A23%3A109%0Ade%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A23%3A1%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A37%3A381%0Am%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A7%3A320%0Ag%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A37%3A229%0Aeb%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A40%3A1%0AAc%2Fd%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A19%3A339%0AAc%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A20%3A151%0AZd%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A18%3A464%0A%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A289%3A428%0Aa%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A176%3A73%0AGf%2Fc%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A35%3A212%0A1
angular-min-1.4.3.js:6:415
Why does this happen?
You have an error in html.
Your app is app, not app.js.
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="plugins/angular-min-1.4.3.js"></script>
</head>
<body></body>
</html>
Ok, I was being really silly not adding the app.js file. Now that I added it, ng-app="app" finds it properly.
On ng-app, you must say the name of the app, in this case it's "app" and not the file. I recommend you also not using ng-app on the HTML tag.
Going slightly insane here, I'm wondering why a simple
console.log("test")
isn't appearing in my console. My code is below. I also tried
$(function() {
console.log("test")
});
but that didn't do it either. Isn't the purpose of the above and my function below to wait until the page loads and then do the function? No matter where I put the code - header, body...it's not working.
<!DOCTYPE html>
<html>
<head>
<title>jQM Autocomplete</title>
<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2.js"></script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
</div>
</div>
<script>
$(document).on("pageshow", "mainPage", function() {
console.log("test")
});
</script>
</body>
</html>
The console is ready way before the page so you won't get anything by using document.ready callback. Chances are something has overridden your console. To find out if that's true, inspect your console object by simply typing console into your console. In Chrome, it should return something like this:
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
If that proves true, you need to find where in your code is the console redefined. Also, you might want to test your code in another browser - perhaps you have an extension or something that's blocking the console for some reason.
But before everything, please double-check your code for syntax errors.
Also, make sure you've set your console to show logs (the filter button, it's next to the clear console button).
The problem was to do with my console settings. In console there's some grey buttons along the bottom - All, Errors, Warnings, Logs, Debug. Well, Errors was selected, for some reason. So I was getting nothing in Console but errors. Click 'All' and it works properly.
Having said that, my code was also missing that # before mainpage, as highlighted by null.
I try to do an AJAX call with jQuery and $.post in Internet Explorer, but all I get is an error saying "Permission denied". The problem is kinda weird since it occurs only when I access a page after I was on any other page.
For instance I type the URL in the adress line and let IE load the page. Then I click on a button so the script should start loading JSON data. (The script providing the data lies on the same server and I access it with a relative URL, so using a different domain is not the problem here. Even tried to use a absolute URL with the same host part.)
But when I refresh the page then and try it again it works! Same thing when I come to that page from another page. At first nothing works, but when I click "refresh" everything is fine.
IE gives me the error message "Permission denied" while in every other browser I don't notice this behaviour. Since I have tried many things and still cannot imagine where the problem lies I'd like to ask you what you think the problem might be?
edit:
A small example:
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<script type="text/javascript" src="/ietest/jquery.js"></script>
<script type="text/javascript" src="/ietest/test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Test
</body>
</html>
ajax.html
It works!
test.js
$(document).ready(function(){
$( 'a' ).click(function(){
$.post( '/ietest/ajax.html', function( data ) {
alert( data );
});
});
});
Try it here: http://t1318.greatnet.de/ietest/test.html
From the post on jquerys forum here, you have to have the content type meta as the first item in your head tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/ietest/jquery.js"></script>
<script type="text/javascript" src="/ietest/test.js"></script>
</head>
<body>
Test
</body>
</html>
If its local (localhost), then for security reasons you have to have the full path.
In my case, changing the jquery version worked. Instead of using version 1.9.1, now I'm using 1.12.4 and it works.