dynamic content load in jquery ajax

Question

this is my first jquery code.Here i am trying to do a content loading mechanism using jquery ajax. It supposed to load content in a container div.But it is navigating me to a whole new page.I want that the 'a' tag does not navigate me to another page.What i am doing wrong here ?How i can achieve that?

<html>

<body>
<ul>
<li><a href='about.html'>about</a></li>
<li><a href='faq.html'>faq</a></li>
</ul>
<div id='content'></div>
<script src='c/xampp/htdocs/practice/jquery/jquery.js'></script>
<script>
$('a').click(function(){
       var page=$(this).attr('href');
       $('#content').load(page);
       return false;
});
</script>
</body>
</html>

c/xampp/htdocs/practice/jquery/jquery.js should be c:/xampp/htdocs/practice/jquery/jquery.js assuming you are on a windows machine — Burning Crystals
– Burning Crystals, Commented Dec 21, 2015 at 1:37
changing path name didn't work. :( may be a problem in my jquery.js file — AL-zami
– AL-zami, Commented Dec 21, 2015 at 1:45
If you're having trouble with getting your jQuery file to load, you could always use a CDN instead, such as code.jquery.com/jquery-2.1.4.min.js Just copy the full link into the <script> tag's src attribute. — justathoughtor2
– justathoughtor2, Commented Dec 21, 2015 at 1:50
adding type attribute inside script tag solved my problem. what a silly mistake :/ — AL-zami
– AL-zami, Commented Dec 21, 2015 at 1:55

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2015-12-21 02:02:06Z

3

You are clicking on a link which should take you to the page before you do anything. Use event.preventDefault() to prevent this.

$('a').click(function(event){
       event.preventDefault();
       var page=$(this).attr('href');
       $('#content').load(page);
       return false;
});

Also you should include jQuery using your localhost url : (I guess you are using proper link for the page?)

 <script src='http://localhost/practice/jquery/jquery.js'></script>

Remember, type="text/javascript" definition is not necessary in html5. But you didn't use the html5 doctype definition. Use this at the top of everything in the page.

<!DOCTYPE html>

edited Dec 21, 2015 at 2:02

answered Dec 21, 2015 at 1:41

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,2261 gold badge27 silver badges55 bronze badges

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

5 Comments

AL-zami Over a year ago

still doesn't work .i have used an alert inside the function.It haven't triggered . I assume there is a problem in my jquery download file. :(

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Over a year ago

Check the edited part of my answer. Looks like you haven't included the jQuery properly.

AL-zami Over a year ago

do i need to use http here ?

AL-zami Over a year ago

adding type='text/javascript' attribute in script tage made it work :/ :))

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Over a year ago

Hm. That is actually not necessary for html5. But I know now why it didn't work. You didn't include doctype definition in the beginning. I will just edit my answer to add that. Otherwise you may have miss more features of html5.

Collectives™ on Stack Overflow

dynamic content load in jquery ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related