CODEWITHSUNDEEP
jqueryjsfiddle
John Smith
John Smith

Reputation: 27

jQuery works in jsFiddle but not on my computer

I'm new to jQuery and have been scratching my head all day trying to determine why this script runs in jsFiddle but not on my computer. I do not have a server setup, I am merely launching the html in my browser from the desktop.

The code works fine here: http://jsfiddle.net/9Dubr/164/. However when I create the following html file:

<html>
<head>
<title>this better work</title>

<script src="jquery-latest.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
    $('#myfrom').fadeOut("slow", function(){
    var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>".hide();
    $(this).replaceWith(dot);
    $('#foo').fadeIn("slow");
    });
    });
    </script> 
<style type="text/css">

#container{
width:342px;
height:170px;
padding:10px;
background-color:grey;
}
#myform{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#foo{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#submit{
color:#6F6F6F;
padding: 10px 2px 0px 0px;
margin: 0px 0px 0px 0px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<div id="myform">
<p> blah blah blah blah blah </p>
 <input id="submit" value="send" type="submit"/>
</div>
</div>
</body>
</html>

I get no results when I click the submit button. Please help, I've spent 6 hours on this.

Thanks,

Upvotes: 1

Views: 2097

Answers (3)

zalun
zalun

Reputation: 4891

In all such doubts it is always to check the source of http://jsfiddle.net/draft/ this is the last fiddle rendered with hitting [Run]. Check the source and compare it with your file.

Upvotes: 0

shanabus
shanabus

Reputation: 13115

I see two problems with the code you posted that might help.

  • Start your document by declaring the doctype - <!DOCTYPE html>

or if using HTML 4 specs, at least specify the script type:

  • Declare the javascript type in your jquery reference - type="text/javascript"

UPDATE - based on recent comments

In your jsfiddle, it works because you are binding your submit click event but that button is not in a <form> tag. If locally you are using a form tag, you will get different functionality as the form submit may get priority over the button click event.

Hope this helps!

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

You have to execute the code on DOM ready. Wrap your code in $(function(){ }); Also, you're missing a ).

$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});

EDIT:

<!DOCTYPE html>
<html>
<head>
<title>This better work</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});
</script>
</head>
<body>
    <div id="container">
        <form id="myform">
            <p> blah blah blah blah blah </p>
            <input id="submit" value="send" type="submit"/>
        </form>
    </div>
</body>
</html>

Upvotes: 6

Related Questions