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 :(

Shyju · Accepted Answer · 2011-12-12 14:15:21Z

2

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

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

answered Dec 12, 2011 at 14:15

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

Comments

Adam Merrifield · Accepted Answer · 2011-12-12 14:15:17Z

0

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);

answered Dec 12, 2011 at 14:15

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

Comments

Niels · Accepted Answer · 2011-12-12 14:16:10Z

0

Try something like this:

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

answered Dec 12, 2011 at 14:16

Niels

50.1k4 gold badges68 silver badges86 bronze badges

2 Comments

Niels Over a year ago

Should be working, you might have a DIV on .hide() or display: none which contains the data.

sasori Over a year ago

how to make the loader stay a bit longer?..i mean, it's too fast..like, i wanna show it to the end user that it is currently loading a data even if it's only trying to fetch only 1 data.. i just want the loader to be shown for about 5 seconds or less ?

Collectives™ on Stack Overflow

how to use loader and html content via ajax using jquery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related