1

I need header and footer not to change in some webpages so this is simple ajax code I have copied from stackoverflow.com. But it is not working. Please help me.

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#activities").click(function(){
                    $("#body").load("activities.html");
                });
            });
        </script>
    </head>
    <body>
        <div id="header">
            <a href="#" id="#activities">Activities</a>
            This is the header.
        </div>
        <div id="body">
            <p>
                This is the body. 
            <p>
        </div>
        <div id="footer">

            This is the footer.

        </div>
    </body>
</html>
Evgeny Samsonov
  • 2,730
  • 4
  • 19
  • 28
Parveen.gmp
  • 17
  • 6

2 Answers2

0

Try to change:

id="#activities"

to:

id="activities"
Felix
  • 37,892
  • 8
  • 43
  • 55
0

You need to change 

<a href="#" id="#activities">Activities</a>

to

<a href="#" id="activities">Activities</a>
<!.............^.......................-->

Note : character "#" is not allowed in the value of attribute "ID"

Then add e.preventDefault() to prevent the browser default action on click event

$(document).ready(function() {
    $("#activities").click(function(e) {
        e.preventDefault();
        $("#body").load("activities.html");
    });
});
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188