Why is jQuery not working in the browser action popup of a google chrome extension? - javascript

I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?

That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.

Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.

If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.

Related

How to embed a file in html using jquery.load() in chrome

I am trying to load a txt file using jquery in Chrome. Why it does not work? I have copied this code snippet from w3schools, and all i have changed is their url.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://stackoverflow.com/questions/15114993/how-to-embed-a-file-in-html-using-jquery-load");
alert("clicked");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Chrome throws the following error when executing your code:
Origin null is not allowed by Access-Control-Allow-Origin.
You must:
Host your HTML code on your local web server, so that it is accessible at:
http://localhost/your_directory/index.html
Update your code to load your out.txt, placed in the same folder where your index.html file is, like this (using relative paths)...
$("#div1").load("out.txt");
...or like this (using absolute paths):
$("#div1").load("http://localhost/your_directory/out.txt");
And you are done! :-)
Ok the issue you are probably having here seems to happen allot with chrome and ajax requests. Chrome throws a security issue if running locally try putting your code on a web server, or try firefox.
Or if your on a mac you can open chrome using like this from the command line to prevent the security issue
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
There are loads of posts on google if your search for "allow file access from files chrome"
Good luck

Jquery not working with any browser

My code is like this. But it is not working on any browser. this code has been copy-pasted from w3scools. Same is the condition with my other codes.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
I don't know if this will work, but try adding http: to the beginning of your link reference. Additionally, as others have pointed out, close your <html> tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Another thing I would suggest, is using jQuery's CDN for jQuery hosting. The URL's a lot shorter, and it gets you the latest version without having to define the version:
<script src="http://code.jquery.com/jquery.min.js"></script>
However, I see you're using version 1.8.3, which could be for a specific reason, so just add the version you want after jquery in the url. jquery-1.8.3.min.js.
The link to your jQuery script is not working. Replace it with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Instead.
It wasn't working for me with the old link, but after replacing it with the other link it worked just fine.
(I'm assuming you noticed the missing </html>.)
Your code actually does work (even without the missing html closing tag :-P) but only if it is run from a server. It is all to do with the URI for the jQuery file.
If you run the file locally, the browser guesses that it should download the file using the file protocol, so:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
If you open up your browser's developer tools (by pressing the F12 key usually), it should show you an error saying the browser couldn't load the jQuery file from a file:// URL. If you put http (or https) as the protocol, it knows where to get jQuery from and everything works.
Interestingly if you run the file on a server (which I guess is what w3schools intended) then the browser guesses it should be the http or https protocols and it finds the jQuery file.
If you want to experiment running a webserver without putting in much effort, Python (because it is awesome) lets you run a web server with just one command:
python -m SimpleHTTPServer
It runs the server on:
http://0.0.0.0:8000
and serves the files from the directory where you run it. This url has a little more detail about it: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python
I wasn't aware of the server requirement (thanks for the question!) and I found this in my travels which I thought was interesting. It talks about how the missing protocol is valid html StackOverflow: Is it valid to replace http:// with // in a script tag?

refresh html js page

<script type="text/javascript" src="main.js"></script>
If This is in the my header page and which is included in all pages.My question is that when there are any changes in main.js the user has to refresh his browsers cache.So instead of this if we use
<script type="text/javascript" src="main.js?1"></script>
user would get latest changes without refreshing the cache.If again a change ismade in main.js change has to be made like
<script type="text/javascript" src="main.js?sumnumber"></script>
My question is that is there any generic way to do this
You can use Date.geTime() or some such which returns the ticks, it's a common way to cache bust.
However, generating the tags will be more of a pain.
You can of course turn of caching on the web server side so that your page shouldn't be cached.
You can let your Version Control System put in a version number whenever you check-in your source code.
e.g in CVS you can use the $Revision$ keyword:
<script type="text/javascript" src="myfile.js?$Revision$"></script>
if you are looking for every request from the same browser to force re-download, then you want the url to change every time, e.g.
<script type="text/javascript">
document.write('<script type="text/javascript" src="main.js?' +Math.random()+ '"></script>');
</script>

I want to open a program by JavaScript on the clients computer? (WScript.shell)

I tried to open a program using this code:
<head>
<title></title>
<script language="javascript" type="text/javascript">
function run() {
var shell = new ActiveXObject("WScript.shell");
if (shell) {
shell.run('"C:\\Program Files (x86)\\BitTorrent\\BitTorrent.exe"', 1);
}
else
{ alert("BitTorrent is not installed on your system."); }
}
</script>
</head>
<body onload="run()">
</body>
</html>
But it doesn't work.
Any help, please?
It is because browser block creation of ActiveX controls, for security reasons. Moreover, ActiveX is supported only in IE; IE has options to allow run ActiveX in browser, but I have doubts that many users have this feature enabled.
Why would you want to open BitTorrent anyways? I believe you can achieve the desired effect using magnet links
PD: Check their developers page
Update: I'm not sure if this is "legal" here, or considered "spam", if it easy please remove it, but here's a link to a site that implements magnet links to achieve what I think you might want to be doing: eztv.it. Check their
Check your browsers' configuration, it may block ActiveX.
Do you get any error message ?

jQuery: Can't run $.get (http get) on Chrome

I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.

Categories