SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery ajax paginate not picking up elements

    I'm trying to implement a simple paginate but I'm falling at the last hurdle! I'm using http://botmonster.com/jquery-bootpag/#.Ua3glthYBI0

    My code is thus;

    Code:
    <div class="box-250">
        <h2><span>News</span></h2>
    
        <div id="content-p">
            <div class="news-item small" id="newsitem-antrim-youth-fair">
                <div>
                     <h3>The Antrim Youth Fair 1</h3>
    
                    <p><span>April 2013</span>
                    </p>
                    <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                    target="_blank">See flyer here</a>
                    </p>
                </div>
            </div>
            <div class="news-item small" id="newsitem-antrim-youth-fair">
                <div>
                     <h3>The Antrim Youth Fair 1</h3>
    
                    <p><span>April 2013</span>
                    </p>
                    <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                    target="_blank">See flyer here</a>
                    </p>
                </div>
            </div>
            <div class="news-item small" id="newsitem-antrim-youth-fair">
                <div>
                     <h3>The Antrim Youth Fair 1</h3>
    
                    <p><span>April 2013</span>
                    </p>
                    <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                    target="_blank">See flyer here</a>
                    </p>
                </div>
            </div>
            <div class="news-item small" id="newsitem-antrim-youth-fair">
                <div>
                     <h3>The Antrim Youth Fair 1</h3>
    
                    <p><span>April 2013</span>
                    </p>
                    <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                    target="_blank">See flyer here</a>
                    </p>
                </div>
            </div>
            <div class="news-item small last" id="newsitem-antrim-youth-fair">
                <div>
                     <h3>The Antrim Youth Fair 1</h3>
    
                    <p><span>April 2013</span>
                    </p>
                    <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                    target="_blank">See flyer here</a>
                    </p>
                </div>
            </div>
        </div>
        <div id="page-selection">Pagination goes here</div>
    </div>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.js"></script>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
                total: 3
            }).on("page", function (event, /* page number here */ num) {
                $("#content-p").html("Insert content"); // some ajax content loading...
            });
    </script>
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Hi stephen,

    You need to replace this line:
    Code JavaScript:
    $("#content-p").html("Insert content"); // some ajax content loading...
    with code that makes an ajax request to get the next page of results. You need to set up a URL on your server that will take the page number as a parameter, and return the correct results that you can insert into the page.

  3. #3
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could I add an ID or class to the content that needs paginated, they are all separated divs with the class "news-item small"?
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    You mean after you've got the content from the server, but before you insert it into the page?

  5. #5
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm over complicating it i think by using ajax - i'll only need to paginate a few divs - possibly this solution would be better - http://www.script-tutorials.com/how-...n-with-jquery/
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Just out of interest, is it a variable amount of content you want to paginate or a fixed amount?
    Are you pulling the content from a DB (or similar) or are you adding it directly to your page by hand?

  7. #7
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo - I'm only adding it to the page - I don't think a DB will be needed.
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Could you not then use something like this?

  9. #9
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tabs are great but not for this - its a news feed. But thanks for the advice
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh ok, no problem.
    But now I'm a bit lost about what you're trying to do.
    Could you elaborate slightly?

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh, and this might be worth taking a look at: http://beneverard.github.io/jqPagination/

  12. #12
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Is this the kind of thing you're after?

    I've used your example code from the beginning of the thread, but changed the title of each news item so that you can tell when the page has updated. This uses the code you linked earlier, from: http://www.script-tutorials.com/how-...n-with-jquery/

  13. #13
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect gentleman thanks for your time on this - I really like the UI of http://beneverard.github.io/jqPagination/ how could I implement it to paginate a load of divs akin to the example you provided fretbuner?

    I'll try and do this first and come back to you - need to learn this as well.... as always many thanks guys your doing a load of people benefit here!
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  14. #14
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so i need to change
    Code:
    	$('.pagination').jqPagination({
    		link_string	: '/?page={page_number}',
    		max_page	: 40,
    		paged		: function(page) {
    			$('.log').prepend('<li>Requested page ' + page + '</li>');
    		}
    	});
    To allow my div's all id' with news-item to be paginated. Fretburner in his example has this;

    Code:
    var pager = new Imtech.Pager();
    $(document).ready(function () {
        pager.paragraphsPerPage = 1; // set amount elements per page
        pager.pagingContainer = $('#content'); // set of main container
        pager.paragraphs = $('div.news-item', pager.pagingContainer); // set of required containers
        pager.showPage(1);
    });
    I now need to find a way of changing the
    Code:
    $('.log').prepend('<li>Requested page ' + page + '</li>');
    to pick up divs id' 'news-item' within the 'content' div block to be paginated.

    Please tell me I'm on the right lines!
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Here's an example of how to paginate three div elements using the plugin.

    Demo

    Code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery Paginate</title>
        <link rel="stylesheet" type="text/css" href="./css/jqpagination.css" />
        <style>
          .wrapper{ padding:15px; }
          .container > div{
            width:250px;
            padding:15px 0;
          }
        </style>
      </head>
      
      <body>
        <div class="wrapper">
          <div class="container">
            <div>My first div</div>
            <div>My second div</div>
            <div>My third div</div>
          </div>
          
          <div class="pagination">
            <a href="#" class="first" data-action="first">&laquo;</a>
            <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
            <input type="text" readonly="readonly" />
            <a href="#" class="next" data-action="next">&rsaquo;</a>
            <a href="#" class="last" data-action="last">&raquo;</a>
          </div>
        </div>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="./js/jquery.jqpagination.js"></script>
        
        <script>
          $(function(){
            $('.container div:not(:first)').hide();
            
            $('.pagination').jqPagination({
            max_page : $('.container div').length,
            paged : function(page) {
              // a new 'page' has been requested
              // hide all paragraphs
              $('.container div').hide();
              // but show the one we want
              $($('.container div')[page - 1]).show();
            }
            });
          });
        </script>
      </body>
    </html>
    Initial example found here: http://stackoverflow.com/questions/1...e-jqpagination

    Hope that helps.

  16. #16
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very kind for the help it is something that will work perfectly. As soon as the page is 'live' i'll send you & fretburner a link - you may not be interested but when you see why i'm doing this you'll be glad to have helped out!
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by stephen_ View Post
    Very kind for the help it is something that will work perfectly.
    No probs

    Quote Originally Posted by stephen_ View Post
    As soon as the page is 'live' i'll send you & fretburner a link - you may not be interested but when you see why i'm doing this you'll be glad to have helped out!
    That'd be great and I am interested.
    It's always nice to see what projects people are working on.
    I look forward to it.

  18. #18
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again- Pullo last thing if I wanted to show 2 divs on each page do I edit
    Code:
    max_page : $('.paginate-container div').length,
    Is this the idea?
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I don't quite understand.
    What do you mean by "show two divs"?
    Could you elaborate a little.

  20. #20
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of 1 paragraph (div) on each page 2 paragraphs would show on each paginated page.
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ah, ok.
    Something like this?

  22. #22
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Pullo Awesome - It makes more sense when I see the code

    .show is the variable that needs changed....
    Quote Originally Posted by Pullo View Post
    Ah, ok.
    Something like this?
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Just to be complete, here's the code I used (in case my example should disappear at a later date):

    Code JavaScript:
    $(function(){
      $('.container div:gt(1)').hide();
     
      $('.pagination').jqPagination({
        max_page : $('.container div').length/2,
        paged : function(page) {
          $('.container div').hide();
          $($('.container div')[page*2-1]).show();
          $($('.container div')[page*2-2]).show();
        }
      });
    });

  24. #24
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo -SORRY LAST REQUEST if I have an odd number of divs say 5 or 7 and want to show 2 at a time except for the last one can I change the
    Code:
          $($('.container div')[page*2-1]).show();
          $($('.container div')[page*2-2]).show();
    to allow this?
    Enjoy what you do, enjoy what you learn but above all ENJOY IT!
    stevanbarry.com

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    In this case, you'll want to round up the number of pages to allow for this possibility.

    This:

    Code JavaScript:
    max_page : $('.container div').length/2,

    should become:

    Code JavaScript:
    max_page : Math.ceil($('.container div').length/2),

    Demo.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •