CODEWITHSUNDEEP
javascriptjqueryhtmlajax
tortilla
tortilla

Reputation: 151

ajax html in div

In my html code i have this 

<li class="register"><a href="">Registreer</a></li>

and

<div id="content">

</div>

I try to load a html file into the div using the following code in the head 

<script type="text/javascript" src="includes/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/js/navbar.js"></script>

navbar.js :

$(document).ready(function() {
$(function(){
  $(".register").click(function(){
    $("#content").load("/signup.html");
    document.write("test");
  });
});
});

I have copied signup.html all over my webpage folders. But it does not work. However it does display test for 1/4th of a second. I also tried putting my js code directly in the html file but that doesn't work either.

Upvotes: 0

Views: 141

Answers (3)

Eric Rini
Eric Rini

Reputation: 1890

$(document).ready(function () {
    $(".register").click(function(){
        $("#content").load("/signup.html");
        return false;
     });
});

By returning false from the click event the hyperlink element will know not to perform its default action (which is why the page is refreshing).

Upvotes: 1

scott.korin
scott.korin

Reputation: 2597

When using a relative URL, the URL is relative to the page on which the JavaScript is run. In your case, since you are using the string '/signup.html', It will look for the singup.html file up one directory from the directory of the page currently being viewed.

Use the F12 Development Console in IE or Chrome, FireBug, of Fiddler to view your AJAX requests and results to see whether your 'singup.html' is being loading from the appropriate directory. You can also view source after the load completes to see if there is HTML beiing loaded into your DIV.

Upvotes: 0

Naftali
Naftali

Reputation: 146302

You are repeating yourself:

$(document).ready(function() {
   $(function(){ //same as $(document).ready(function() {
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });
   });
});

Try just doing this:

   $(function(){ 
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });
   });

Also you might want to try stopping the default event of your link:

   $(function(){ 
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });         
     $(".register").on('click', 'a', function(e){
        e.preventDefault(); //prevents action of the link
     });
   });

Upvotes: 1

Related Questions