jquery not working on specific html-file

Question

I'm new to jquery and having a weird problem with it. Somehow jquery is not working on my html-file which I've created as the website's frontpage. The same jquery-code is working if I use it on a blank html-file, so there shouldn't be anything wrong with that or the server that I'm trying it on(000webhost.com).

I've been trying to debug this for couple of days now, so any help would be SO appreciated.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>MG</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>
</head>
<body>
<div id="content">
    <div id="header">
        <div id="logo"><button>test</button></div>
        <div id="sitehistory"> History:<br />Samu added [PIC] (30min ago)</div>
    </div>

    <div id="container">
        <div id="wall">
            <div id="navi"><a id="showlatest" title="Latest">Latest</a> | <a id="showmostpopular" title="MostPopular">Most Popular</a> | <a id="showsearchbox" title="Search">Search</a> </div>
            <?php include("latest.php");?>
        </div>
        <div id="profilebar"><?php include("login-form.php"); ?></div>
        </div>
    <div id="footer">
        <a href="index.html" class="lefty">Home</a>|
        <a href="index.html" class="lefty">Profile</a>|
        <a href="index.html" class="lefty">FAQ</a>|
        <a href="index.html" class="lefty">Contact</a>
    </div>
</div>

</body>
</html>

user527892 · Accepted Answer · 2011-06-17 15:17:00Z

6

You need a

<script type="text/javascript">

before

jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

answered Jun 17, 2011 at 15:17

user527892

Sign up to request clarification or add additional context in comments.

3 Comments

scrappedcola Over a year ago

Also make certain you close out the script tag for the jquery: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4.2/…> and then start the other script block.

Ben Over a year ago

Consider using a web page validator, as they will pick up things like this. For example, running your code through validator.w3.org shows the issue right off the bat.

Baburo Over a year ago

Thanks for pointing it out, but it doesn't fix it. That was the way I had it before I started debugging it. Oh, and validator, which I ran, didn't point that out for me as a error.

Nicola Peluchetti · Accepted Answer · 2011-06-17 15:18:56Z

0

You are missing a script tag

<script>

before

jQuery.noConflict();

answered Jun 17, 2011 at 15:18

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

samy · Accepted Answer · 2011-06-17 15:32:12Z

0

You are mixing a link to the jquery script and your own. Try replacing

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

by (edited after comment)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
<script type="text/javascript" >
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

See sample here ( in this fiddle, jQuery is loaded by the tool )

edited Jun 17, 2011 at 15:32

answered Jun 17, 2011 at 15:23

samy

15k3 gold badges57 silver badges85 bronze badges

2 Comments

user527892 Over a year ago

It's XHTML so 1st script should be closed with a self-closing /> rather than a </script>

Baburo Over a year ago

As I replied to the first one, that didn't fix it. I've tried both of them, but if that is the correct syntax for xhtml, thanks for pointing it out to me. :)

Dhruva Sagar · Accepted Answer · 2011-06-18 00:21:39Z

0

This works fine - http://jsfiddle.net/dhruvasagar/HKR4X/1/

Baburo, actually the answer with the most votes (by @Scott Brown) does answer it. The thing is, that there needs to be a separate tag for loading jquery and a separate one for defining your javascript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){
        $('button').click(function(){ $('#logo').hide(); });
    });
</script>

edited Jun 18, 2011 at 0:21

answered Jun 17, 2011 at 15:20

Dhruva Sagar

7,3351 gold badge29 silver badges35 bronze badges

1 Comment

Baburo Over a year ago

That's what I was afraid of. You didn't change anything from my code, right? Seems that error is something beyond the code I wrote.

Collectives™ on Stack Overflow

jquery not working on specific html-file

4 Answers 4

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related