how to use loader and html content via ajax using jquery

Question

here's my code

   $('#loader').hide()
   .ajaxStart(function(){
     $(this).show();
   })
   .ajaxStop(function(){
     $(this).hide();
   });


   $('form#jobsearch').submit(function(){
      $("div.job-search-content").hide();
      $("div#pagination").hide();

       $.ajax({
          type: "POST",
          url: "classes/ajax.simplesearch.php",
          data: $('form#jobsearch').serialize(),
          success: function(data){
          // I DONT" REALLY KNOW WHAT TO DO IN THIS PART 
            $(data).insertAfter('#job-search-headings').html();
              //$("div.job-search-content").show();
          }
       });
        return false;
   });
});

if I hide the job-search-content div, it will show the loader but the problem is, how will I add the retrieved database content under the '#job-search-headings' div ? ....I checked in firebug..I was able to retrieve the correct data..but I wasn't able to display it at front-end :(

Answer 1

if you want to display the ajax results on the div "job-search-content"

$("div.job-search-content").html(data).show();

Answer 2

data is the responce from the page you're posting to so if the page returns something like <div>some content</div> change

$(data).insertAfter('#job-search-headings').html();

to

$('#job-search-headings').after(data);

Answer 3

Try something like this:

$('#job-search-headings').after(data);