Problem Getting Jquery To Work (In General)

Eiolon · October 25, 2012

I am having problems getting jQuery to work on my computer which is running WAMPserver.

Basically I used this code to see if it would alert me when the submit button was clicked.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://localhost/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$('input#submit').on('click', function() {
alert(1);
)}
</script>
</head>

<body>
<form>
<input type="text" id="field" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>

I get no alert when I click the button. I have tried it in IE9, Firefox 15 and Chrome.

Does my web server need to be configured in some manner to allow Ajax to be used?

EDIT: also tried moving the script to the end body tag.

Edited October 25, 2012 by Eiolon

DavidAM · October 25, 2012

At the time that that Javascript executes, the SUBMIT button does not exist (yet), so there is nothing to attach that function to. You need to wait until the document is finished loading. I usually use:

/* When the page has finished loading, initialize any Javascript */
$(window).load(pageInit);

function pageInit() {
 // Put your page initialization code here
 $('input#submit').on('click', function() {
   alert(1);
 )}
}

codefossa · October 25, 2012

You should wrap everything in $.ready() function so it doesn't trigger until the page is loaded. Then on your action function, it's just $.click() then you need to close your bracket, then the parenthesis as that's the order they open in (backwards of course).

Wrong

$('input#submit').on('click', function() { alert(1); )}

Correct

$(document).ready(function()
{
   $("#submit").click(function()
   {
       alert("A working example.");
   });
}):

Edited October 25, 2012 by Kira

codefossa · October 25, 2012

Oh, by the way. When you do that. If that's actually a submission button, you may want to use an event.preventDefault() and return false to the click function so it doesn't submit, depending on what you want to do. Then it would also make more sense to use $.submit() on the form rather than the submission button, as not everyone actually clicks the button to submit, like myself.

Eiolon · October 25, 2012

Thanks for your advice.

I have tried it both methods suggested and I am still not getting the alert. I have uploaded it to my live web server and am not getting the alert. Here is my updated code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
<form>
<input type="text" id="field" />
<input type="submit" id="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){	
$("#submit").click(function()
{
alert("A working example.");	
});
}):
</script>
</body>
</html>

Sorry, the forums seem to lose all my formatting in code tags now.

Edited October 25, 2012 by Eiolon

codefossa · October 25, 2012

Here's a working example that alerts the text value on form submission.

http://xaotique.no-ip.org/tmp/10/

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <title>Xaotique</title>
       <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
       <script type="text/javascript" src="script.js"></script>
   </head>

   <body>
       <form method="post" action="" id="myform">
           <input type="text" />
           <input type="submit" value="Submit" />
       </form>
   </body>
</html>

script.js

$(document).ready(function()
{
   $("#myform").submit(function(e)
   {
       e.preventDefault();

       alert($("#myform input:first").val());

       return false;
   });
});

Eiolon · October 25, 2012

Okay, so that script works for me when I go to the link.

If I create the script based on the source your provided and try it locally, it does not give the alert. If I upload that script to my live server, it DOES alert. So something is stopping it from working locally. Either WAMP or security settings of some sort. I have tried 3 major browsers and none of them work locally.

It may be worth noting I tried this tutorial and it works on the website, but not locally. It works if I upload it to my live server.

http://api.jquery.com/submit/

Edited October 25, 2012 by Eiolon

Eiolon · October 26, 2012

Alright, definitely looks like the computer has something going on. I just got home and just ran the script using WAMP and no problems. Now, spend time trying to figure this out or just wipe my work PC and start fresh ha ha.

Jessica · October 26, 2012

Have you used firebug to debug it yet?

Eiolon · October 26, 2012

Yeah, that's the strange part. The value is getting passed. The same result from my work PC and my home PC in Firebug.

codefossa · October 26, 2012

Javascript doesn't work locally like that as far as I know because of browser restrictions for security, so you can't do anything with local files.

Christian F. · October 26, 2012

You can get JS to work on local files, but I've only tried it from HTML pages run on the local host. Even then I had to cut way back on the security settings, and endure a couple of warnings, before the browser let me do that.

In short: It is extremely risky, and not recommended at all.

Eiolon · October 26, 2012

Javascript doesn't work locally like that as far as I know because of browser restrictions for security, so you can't do anything with local files.

That doesn't really make sense though. All the books I see tell you to install a webserver on your computer using WAMP or XAMP and work from there. All the Youtube tutorials I was trying to do clearly show the user using localhost for development. Those tutorials work fine on my personal PC but not my work computer. I just got to work and am going to nuke my PC.

Jessica · October 26, 2012

I don't even follow you... what local files are you talking about?

Are you saying you're just opening the file in the browser? Or are you running a webserver and going to localhost/file.ext? The first will not work, the second will.

When you run it and it doesn't work, what happens in Firebug?

Eiolon · October 26, 2012

Success!

I decided to remove my PC from our work domain to see if any group policies were stopping the scripts from working and all is well now. Now I just need to find out the policy that is preventing javascript from running before I can re-add it to the domain.

Sign In

Problem Getting Jquery To Work (In General)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information