Attenuation in jquery load call

Question

I have a really basic jquery question. However, I do not know how to do this, so I am looking for your help here. This is my code:

Edit: <a href="javascript:$('#target').load('page.html').fadeIn('1000');">Link</a>

As you can see, I want to load page.html into a div named #target. What I also want to do does not work to make page.html disappear on loading. What is the right way to do this?

Best wishes

Answer 1

First, you must put your Javascript code outside the element itself. This is pretty easy to do. This makes your HTML and Javascript much more understandable and, ultimately, allows much more organized code. First give your element a a id :

 <a href='#' id='loadPage'>Link</a> 

Then make your call with a script tag:

 <script type="text/javascript"> $(document).ready(function() { // when the whole DOM has loaded $('#loadPage').click(function(){ // bind a handler to clicks on #loadPage $('#target') .hide() // make sure #target starts hidden .load('page.html', function() { $(this).fadeIn(1000); // when page.html has loaded, fade #target in }); }); }); </script> 

---

Change To comment, yes, you can use the url in the a tag and then use this.href .

 <a href='page.html' id='loadPage'>Link</a> <script type="text/javascript"> $(document).ready(function() { $('#loadPage').click(function(e){ e.preventDefault(); $('#target') .hide() .load(this.href, function() { $(this).fadeIn(1000); }); }); }); </script> 

Answer 2

Try

 $('#target').load('page.html',{},function(){$('#target').fadeIn(1000)}); 

The load has a full handler ( see document )