Next and previous button using jquery

Question

I am using a PHP Simple HTML DOM Parser to save a website as a htm file. I then use jQuery to extract a div from the file and put it into a div. I want to create a Previous and Next button but the problem I have is that to do this I have to change the URL so the parser can get the page. I would really appreciate if you can help. Below is the code I am using.

<?php 
    include( 'site/simple_html_dom.php'); 
    $html=file_get_html( 'http://roosterteeth.com/home.php?page=1');
    $html->save('site/rtnews.htm')                      
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
    $('document').ready(function() {
        $('#wrap').click(function (event){
            event.preventDefault();
        });
        $("#wrap").load('site/rtnews.htm #postsArea');    
    });
</script>
</head>
<body>
    <div id="wrap">
    </div>
</body>

I am extracting posts from inside the 'htm' file. So I will use the Next & Previous button to change the page 'URL' used by the parser. So if I press next it will change the 'URl' to roosterteeth.com/home.php?page=2. — Aston
– Aston, Commented Dec 22, 2013 at 17:01

Jivings · Accepted Answer · 2013-12-22 17:18:27Z

1

You will have to create a new php file for this and make an AJAX request to that file. I assume you have already realised that you cannot make a cross-domain request due to CORS.

Here is your new php file, let's call it proxy.php. It will proxy the request, responding with the page that is passed to it via GET :

<?php
  include( 'site/simple_html_dom.php'); 
  $html=file_get_html( 'http://roosterteeth.com/home.php?page=' . $_GET["page"]);
  echo $html;
?>

Your new JavaScript;

$('document').ready(function() {
  var $wrap = $('#wrap'),
    page = 1;

  $('#next').on('click', function () {
    getPage(++page);
  });

  $('#prev').on('click', function () {
    getPage(--page);
  });

  var getPage = function (page) {
    $wrap.load('proxy.php?page=' + page + ' #postsArea');   
  };

  getPage(page);

});

edited Dec 22, 2013 at 17:18

answered Dec 22, 2013 at 17:13

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

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

2 Comments

Aston Over a year ago

Thank you very much for your help I really appreciate it but I am receiving the error Uncaught TypeError: Object [object Object] has no method 'on'. I'm not sure if there is something I am doing wrong.

Aston Over a year ago

Don't worry I managed to get it to work using an updated jquery. Thank you so much for your help I really appreciate it.

Collectives™ on Stack Overflow

Next and previous button using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related