tags:

views:

47

answers:

1
+2  Q: 

How to use jquery ui slider to create a pagination effect and load the content in a <DIV>?

I want to create a pagination script using jquery UI's slider widget. So far I have got the slider working but I dont know how to send request to the server to fetch new content.

So far this is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery.ui.slider.js"></script>      
    <style type="text/css">
        body { padding:5em; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#slider-range").slider({
            min: 1,
            max: 14,
            values: [1],
            slide: function(event, ui) {
                $(".values").html(ui.values[0];);
            }
        });
    });
    </script>
</head>
<body>
<div class="values" style="padding:2em;"></div>
<div id="slider-range"></div>

<div class="info" style="margin-top:2em; background:#CCC;padding:2em;">
Here is where the content will be displayed.
</div>

</body>

Thanks in Advance

A: 

Well, You can send a request at the slide event of your slider to send a request to the server at put the fetched data inside a div

  $("#slider-range").slider({
   min: 1,
   max: 14,
   values: [1],
   slide: function(event, ui) {
    var newPage = ui.values[0];
    $(".info").load("content.php", { page: newPage });
                                //load the content into a division
   }
  });

UPDATED a sample of content.php

<?
     $recordsperpage = 15;
     if(!isset($_POST['page'] or empty($_POST['page']) { $page =1 ; }
     else { $page = $_POST['page']; }

     $limit = $page * $recordsperpage.",".$recordsperpage;
     $query = "SELECT * FROM yourtable LIMIT ".$limit;
     $result = mysql_query($query) or die(mysql_error());
     while($row = mysql_fetch_array($result)) {
          //Display the records in your pattern
     }
?>
?>
Starx  2010-06-14 07:46:54
@Starx, thanks for a quick response but could you also upload an example of that `content.php` you mentioned
 2010-06-14 07:51:33
@jsust, see the update
Starx  2010-06-14 08:03:14

related questions

How do HttpOnly cookies work with AJAX requests?
ASP.NET JavaScript Callbacks Without Full PostBacks?
How to set encoding in .getJSON JQuery
Suggestions on Ajax development environment for PHP
Need to test an ajax timeout condition
XmlHttpRequest return values
Adobe AIR: Handling JSON objects from server
Best framework for implementing iGoogle or pageflakes (ASP.NET)
Is there some way to PUSH data from web server to browser?
Are there reasons not to use JSONP for AJA~X requests?
Minimize javascript HTTP calls from AjaxControlToolkit controls?
Only accepting certain ajax requests from authenticated users
ASP.net AJAX Drag/Drop?
Scrolling Overflowed DIVs with JavaScript
Speeding up an ASP.Net Web Site or Application
ICE Faces fileInput file path and file name properties
Ajax project suggestion.
Graphing JavaScript Library
Debugging: IE6 + SSL + AJAX + post form = 404 error
Best ajax library for Sharepoint
Can ASP.NET AJAX partial rendering work inside a SharePoint 2007 application page?
What is Progressive Enhancement?
Tracking state using ASP.NET AJAX / ICallbackEventHandler
Easy way to AJAX WebControls
Modify Address Bar URL in AJAX App to Match Current State