I am a newbie to jQuery and was trying to load content dynamically using AJAX and jQuery using the following code but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".text").load("http://api.jquery.com/get/");
});
});
</script>
<title>AJAX with jQuery</title>
</head>
<body>
<div class="text">Sushil</div>
<button>Load Text</button>
</body>
</html>
You are violating the same origin policy. Just open your console and see the error message when you click the button. Things will become clearer to you. If not please get back
I ran your code and I got this error:
XMLHttpRequest cannot load http://api.jquery.com/get/. Origin null is not allowed by Access-Control-Allow-Origin.
I googled it and I got this: Origin null is not allowed by Access-Control-Allow-Origin
Related
I want to have a webextension with an iframe http://localhost:8080. So I can test my option page. I want to get access to extension API. So I don't care about security for developing.
So made a page
chrome-extension://abcdefghijklmnopqrstuvw/page/index.html
<html>
<body>
<iframe id="myFrame" src="http://localhost:8080" crossorigin="anonymous">
</iframe>
<script src="script.js"></script>
</body>
</html>
localhost:8080
<html>
<head>
</head>
<body>
<h1>I can't get this working :{</h1>
<script>
console.log(parent);
</script>
</body>
</html>
I also send a header: "Access-Control-Allow-Origin": "*"
Of course I got this error:
DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
I tried to disable web security
google-chrome-stable --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"
But the error is still there. I also tried web-ext to disable web security.
I made a simple setup to test if I could access the parent object from another origin. So I have http://localhost:1111 with an iframe http://localhost:2222. Now :2222 is calling parent.testAlert(), in a normal browser this will be blocked because of security enabled. But I am able to access parent.testAlert() when I have disabled the security.
<html>
<body>
One <br>
<script>
function testAlert() {
alert("Yes");
}
setTimeout(() => {
console.log("window ", window.name);
}, 1000)
</script>
<iframe src="http://localhost:2222"></iframe>
</body>
</html>
<html>
<body>
Two
<script>
console.log("two: ");
console.log("parent ", parent);
parent.testAlert()
</script>
</body>
</html>
This only works when I disable the security, like:
google-chrome-stable --disable-web-security --user-data-dir=~/tmp --disable-site-isolation-trails
Nice.
Now lets try it with the chrome-extension:// url...
<html>
<body>
page.html
<iframe src="http://localhost:2222"></iframe>
</body>
</html>
I still get the same Error:
(index):7 Uncaught DOMException: Blocked a frame with origin "http://localhost:2222" from accessing a cross-origin frame.
at console.log (<anonymous>)
at http://localhost:2222/:7:13
It seems that a chrome-extension CORS / SOP is not disabled.
I made a simple example https://github.com/zoutepopcorn/iframe-blocked
I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
I am a jquery beginner and i have set up a wamp server to practice with html and jquery but i cant seem to get jquery to work. I have written a simple jquery code to test it.
This is my html code:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id= "wrapper">
<div class="intro"><BUTTON type="button">Who am I?</BUTTON></div>
<div class="contact"><BUTTON type="button">What am I?</BUTTON></div>
<div class="exp"><BUTTON type="button">Experience</BUTTON></div>
<div/>
</body>
</html>
jquery.js code:
$(document).ready(function(){
$('.intro').onClick(function(){
$(this).fadeOut('slow', 300);
});
});
I am not sure if linking my jquery page correctly is the problem or the wamp server.
First WAMPServer has little to do with jQuery code other than serving it to the browser, so its not a WAMPServer issue.
A couple of thing are wrong with the jquery code.
First there is no onClick function, you should be using click so
$('.intro').onClick(function(){
should become
$('.intro').click(function(){
Secondly this duration can be either "slow" denoting 600 milliseconds or a number of milliseconds. You have used both and thats not valid. In fact parameter 2 should be a callback function that will be run when the fade is completed. So
$(this).fadeOut('slow', 300);
becomes
$(this).fadeOut('slow', function(){
// fade complete,
// you dont have to do anything in here if you dont want to
});
In fact you dont even have to use the second parameter if you are not going to do anything after the fade is complete. So it could be written as
$(this).fadeOut('slow');
So your script slightly recoded with all that in mind would be
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow', function(){
// done
});
});
});
Or probably a better solution if you dont want to do anything when the fade is complete is
$(document).ready(function(){
$('.intro').click(function(){
$(this).fadeOut('slow');
});
});
And that should work as you expected.
Basically you need to look closer at the JQuery manual here
I have a project in Apps Scripts where the code in my $(document).ready never gets executed. I also tried with this basic code at http://caja.appspot.com/, which also doesn't work.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>
The "Not Working" text shows up. Also tried with jQuery versions 2.x.x
Any ideas?
Thanks
This works if you use a slightly older jQuery version.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>
I'm not sure why, since the documentation says Caja works with all recent jQuery versions: https://developers.google.com/apps-script/guides/html/restrictions#jquery_and_jquery_ui
Is there a method that gives the same result as the meta redirect that can be used in the body of an html doc? Or a reference in the body to CSS? I've been searching but the only things I can find want to make use of other technologies.
N.B. this is for an iOS UIWebView so no php and I'd rather not load any extra js.
If you can use Javascript, something like this should help you:
<script type="text/javascript">
window.location = "http://www.google.com/";
</script>
Check this link to see how to place that inside a function that can be called with "onclick" or "on body load", etc...
http://www.tizag.com/javascriptT/javascriptredirect.php
EDITED:
Another good thing to read about this:
https://developer.mozilla.org/en/window.location
I would use both meta and js redirects, also you may be interested on SEO by using rel="canonical":
<html>
<head>
<link rel="canonical" href="http://stackoverflow.com/"/>
<script type="text/javascript">
window.location.replace("http://stackoverflow.com");
</script>
<title>Redirection</title>
</head>
<body>
<noscript>
<meta http-equiv="refresh" content="0;URL=https://stackoverflow.com/">
</noscript>
If you are not redirected automatically, follow the <a href='https://stackoverflow.com'>link </a>
</body>
rather than needing an onload event, this works without user interaction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
let url = "https://www.w3docs.com";
window.location.href = url;
</script>
</body>
</html>