Hi,

I am trying to write an application where contents shoud be displayed in different <div>-containers according to checkboxes which are checked.

index.html

1. <form id="target" name="form" method="post" action="">
      <input type="checkbox" name="layer" id="gia">GIA<br>
      <input type="checkbox" name="layer" id="terms">Terms<br>
      <input type="checkbox" name="layer" id="contact">Contact<br>
      <input type="submit" value=" Absenden ">
   </form>
   
   <div id="content_gia"></div>
   <div id="content_terms"></div>
   <div id="content_contact"></div>
   
   
   
   
   
   
   
   
   

js.js

1. $(document).ready(function() {
   
      $('#target').submit(function() {
        var checkbox = document.getElementsByName("layer");
        var file = '';
        var toLoad = '';
   
        function loadContent() {
          $('#content_'+file).load(toLoad,'',showNewContent());
        }
        function showNewContent() {
          $('#content_'+file).fadeIn('normal',hideLoader());
        }
        function hideLoader() {
          $('#load').fadeOut('normal');
        }
   
        for(var i=0; i < checkbox.length; i++) {
          var file = checkbox[i].id;
   
          if(checkbox[i].checked == true) {
            var toLoad = file+'.php'+' #content';
   
            $('#content_'+file).fadeOut('fast');  
            $('#load').remove();
            $('#wrapper').append('<span id="load">LOADING...</span>');
            $('#load').fadeIn('normal');
   
            $('#content_'+file).load(toLoad,'',showNewContent());
          } else {
            $('#content_'+file).fadeOut('fast');
          }
        }
   
       return false; 
     });
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

The problem is:

When I ckeck a checkbox and submit, the content (a new php-page) is loaded and displayed in the appropriate <div>-container.

But when I submit once again, first the old content of the external php-page is fading in. After the external page if fully loaded the correct content shous up and get replaced.

Any idea what I'm doing wrong?

Thanks a lot,

Jozef