SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  2. #2
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

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

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

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

    Could you not then use something like this?

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Oh, and this might be worth taking a look at: http://beneverard.github.io/jqPagination/

  12. #12
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    4 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

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

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

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

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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!
    http://scbdesign.site11.com

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •