jQuery does not work on XHTML page

Question

This is the code to my XHTML page. jQuery is in the /js/ folder in my application. All other pages' validation is done with jQuery using the same file, but I cannot run a simple jQuery code on this test page that I've created. This is the code of the page:

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>

    </h:head>
    <h:body>
        <script type="text/javascript" src="js/jquery.js"></script>

        <script>

            $(document).ready(function () {
                $("p").text("The DOM is now loaded and can be manipulated.");
            });

        </script>
        <br/><br/><br/>
        <p>Not loaded yet.</p>
        <input id="pedram" type="text" onclick="alert('hi');"/>
    </h:body>
</html>

I have also tried to use CDATA tag. I have also moved the script to the head of the document.

The only thing that works correctly is the alert() that I've put inside the onclick event. Nothing else works.

Please tell me what am I doing wrong.

wirey00 · Accepted Answer · 2012-10-05 14:28:40Z

8

change

<script src="js/jquery.js">
        $(document).ready(function () {
            $("p").text("The DOM is now loaded and can be manipulated.");
        });
</script>

To

<script>
        $(document).ready(function () {
            $("p").text("The DOM is now loaded and can be manipulated.");
        });
</script>

You don't need to specify jQuery source twice.. nor do you need to when you are using js inside the tags

answered Oct 5, 2012 at 14:28

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

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

6 Comments

wirey00 Over a year ago

check your console.. is your jQuery getting loaded? Is it saying $ is not a function?

disasterkid Over a year ago

so if the alert works, i can assume jquery library is loaded right? but why other stuff does not work?

wirey00 Over a year ago

nope.. alert will work regardless if jQuery loaded or not.. alert() is a javascript method

wirey00 Over a year ago

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <-- remove yours and use that to see if it works

wirey00 Over a year ago

let us continue this discussion in chat

|

disasterkid · Accepted Answer · 2012-10-05 15:46:40Z

0

I had to use the context path of my application (java) and add to my jquery library address.

 <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.js"></script>

answered Oct 5, 2012 at 15:46

disasterkid

7,32827 gold badges106 silver badges205 bronze badges

Comments

Hawken · Accepted Answer · 2013-11-01 20:31:30Z

0

The problem seems to be your use of <h:body> in conjunction with jQuery 1.x.

Using either jQuery 2.x or <body> will solve your problem.

jQuery 1.x is likely using document.body somewhere, which fails because document.body is null when using <h:body>.

If you don't mind my asking, why are you using the h namespace (http://java.sun.com/jsf/html)?

answered Nov 1, 2013 at 20:31

Hawken

2,11922 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery does not work on XHTML page

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related