Jump to content

Problem Getting Jquery To Work (In General)


Eiolon
 Share

Recommended Posts

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 by Eiolon
Link to comment
Share on other sites

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);
 )}
}

Link to comment
Share on other sites

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 by Kira
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Eiolon
Link to comment
Share on other sites

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;
   });
});

Link to comment
Share on other sites

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 by Eiolon
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.