CODEWITHSUNDEEP
javascriptjqueryajaxwordpress
M.Monoo
M.Monoo

Reputation: 59

Ajax pagination in wordpress working only one time

As always i did lot of searching around google and here but did not find what i want.

This is wordpress and ajax loading (pagination)

My page with jobs cat. It does have several div with other sub cats and each having its own wp loop for getting posts with that specific sub category like this

<div id="container">
    <div id="alljobs">
       <div id="posts">
            //wp loop #1
            //all jobs will be here from all cats; post title etc.
       </div><!--Posts -->
       <div id="alljobspagi">
       //the pagination for all jobs
       </div><!--alljobspagi -->
    </div><!--alljobs -->
    <div id="alljobspg">
       <div id="posts">
          //wp loop #2
          //all jobs will be here from pg cats; post title etc.
       </div><!--Posts -->
       <div id="alljobspgpagi">
          //the pagination for all jobs
       </div><!--alljobspgpagi -->
    </div><!--alljobspg -->
</div><!-- The container -->

Now all I want is when user clicks "a" of pagination (labeled numbered 1,2,3 and so on) it goes through preventdefault() and loads that divs posts with the next pages posts.

I have succeeded in making one but that is somehow working and somehow not. The js code i am using is ( in header.php btwn )

$('div#alljobspgpagi a[href]').click(function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
  jQuery('div#alljobspgpagi').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
  jQuery('#alljobspg').load(link+' #alljobspg');
});

Well the above code is working partially. For example if i have two pages for pagination like for now i am on first page "1" which is in active class (non clickable) and when i click on number "2" (clickable having a) to go to the second page the ajax works and everything works with no error. Now i am on second page of the result and i want to go back to first page 1 or page 3 (next). But when i click it ajax failed to work and the whole page refreshed (or loaded with first page or next page).

Can someone give me any idea for this. My code is working but only for one time. I don't know what is wrong with it but the preventDefault() is not making any sense when going back to page page or next page. The js code is working only one time after page loading whether it is going back to page 1 (previous) or going forward to page 3 (next). Sorry i am new to this jQuery thing but not to wp.

Thank you and sorry if i have bad english.

Upvotes: 1

Views: 709

Answers (1)

M.Monoo
M.Monoo

Reputation: 59

Got it fixed. I was updating content of and by doing so event got cleared. So what i have done is by adding one extra div for all events.

<div id="container">
    <div id="alljobs">
       <div id="posts">
            //wp loop #1
            //all jobs will be here from all cats; post title etc.
       </div><!--Posts -->
         <div id="alljobevents">
            <div id="alljobspagi">
              //the pagination for all jobs
            </div><!--alljobspagi -->
        </div><!-- Update : This is Extra-->
    </div><!--alljobs -->
    <div id="alljobspg">
      <div id="pglist">
       <div id="posts">
          //wp loop #2
          //all jobs will be here from pg cats; post title etc.
       </div><!--Posts -->
          <div id="alljobspgevent">
             <div id="alljobspgpagi">
               //the pagination for all jobs
             </div><!--alljobspgpagi -->
          </div>
      </div><!--pglist -->
    </div><!--alljobspg -->
</div><!-- The container -->

And updated Js becomes

$('#alljobspgevent').click(function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
  jQuery('#pglist').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
  jQuery('#pglist').load(link+' #pglist');
   // Same can be done for updating pagination
});

Upvotes: 1

Related Questions