ansaurus

Question

Answer 1

+1 A:

After reading the code and putting it into a file, I noticed that in the code above new_page_id should be new_page_index, from what I gather. Also, content is not defined. Could you perhaps post more code? It seems like it is referencing variables that either don't exist or are defined elsewhere in the code. I'll be happy to help once I can get this info.

UPDATE:

So the basic problem here is that you were trying use the http://d-scribe.de/webtools/jquery-pagination/lib/jquery%5Fpagination/README&t=text">README examples a little too closely. In the README, content is just an example variable, not an actual built in value to the callback function. To use it with your page, you'll need to write a bit of code. The basic problem is that you're trying to pass information from PHP to Javascript. In order to do that correctly, you'll need to update the PHP file to also handle the inline Javascript and have it spit out some statement like:

$("#News-Pagination").pagination(<?php echo $NUM_OF_ARTICLES ?>,( items_per_page:20, callback:handlePaginationClick ) );

Where NUM_OF_ARTICLES is the number of articles that you fetch from the database. You could get this number by incrementing a variable in your "while($row = $result->fetch_object()) { $id = $row->id; ..." loop.

Also, the default object containing the div you want to append the data to is given as an argument to the callback, i.e. $(pagination_container) is $("#News-Pagination"), so you don't need to get it with a DOM selector again.

Finally, and this is the hard part, you need to scan all the previously entered text from the DOM into a JavaScript array.

BUT

Here's one way you could do it all in JS, and it is NOT the best way, but the quickest for now:

// make them global to access them from the console and use them
// in handlePaginationClick
var maini_s;
var mi_s;
var num_of_arts;
var ipp;

function handlePaginationClick(new_page_index, pagination_container) {
    var pc = $(pagination_container);
    pc.children('div.maini').remove();
    pc.children('div.mi').remove();
    for(var i=new_page_index*ipp; i < (new_page_index+1)*ipp ;i++) {
     if (i < num_of_arts) {
      pc.append(maini_s[i]).append(mi_s[i]);
     }
    }
    return false;
}

$(document).ready(function() {
    maini_s = $('div.maini').remove();
    mi_s = $('div.mi').remove();
    num_of_arts = maini_s.length;
    ipp = 3;

    // First Parameter: number of items
    // Second Parameter: options object
    $("#News-Pagination").pagination(11, {
     items_per_page:ipp, 
     callback:handlePaginationClick
    });
});

daveslab 2009-07-20 19:49:04

I changed the new_page_id to new_page_index and that got rid of the error from firebug, but when I click the numbers they don't do anything, They just change click states as in active and not active.

Spyderfusion02 2009-07-20 20:43:54

Thanks for the detailed explanation, I really appreciate it. I am a little unsure as to what to add to my php file. Do I create a variable that will count the number of articles in the db and then include that in the js file?

Spyderfusion02 2009-07-20 23:05:05

You shouldn't have to change anything in your PHP. I did this on the static HTML you posted earlier and it worked. This is a purely JS solution. The original things I posted are only relevant if you want to do it in PHP. It depends what you're comfortable with. Is it working for you now or no?

daveslab 2009-07-21 00:30:02

It's working perfectly now. Thank you very much for the help.

Spyderfusion02 2009-07-21 02:04:25

You're quite welcome. Best of luck! If you're looking for some good jQuery references, head over to learningjquery.com and jqueryfordesigners.com.

daveslab 2009-07-21 13:01:55

Answer 2

A:

In addition to the code above The results are being created through a php file and then displays in a div on the main page called 'output-listings'

Here is the file(buy.functions.php):

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

if($result) 
{
        echo "<div id=\"MyContentArea\" class=\"site-listings\"> \n";
                                while($row = $result->fetch_object()) 
                                {
                                        $id = $row->id;
                                        $siteName = $row->site_name;
                                        $siteDescription = $row->site_description;
                                        $siteURL = $row->site_url;
                                        $sitePrice = $row->site_price;

                                        echo "<div id=\"main-info-" .$id. "\" class=\"maini\"> \n";
                                        echo " " . $siteName . " \n";
                                        echo " " . $siteURL . " \n";
                                        echo " <a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a> \n";      
                                        echo "</div> \n";

         echo "<div id=\"more-info-" .$id. "\" class=\"mi\"> \n";
           //echo "           <div id=\"details\" class=\"more-information\">";
           echo "    <span class=\"description\">" . $siteDescription . "</span> \n";
           //echo "   </div> \n";   
         echo " </div> \n";
                                }
echo "</div> \n";     

    }

}

?>

As you can see, I put the #MyContentArea div through this file. I'm not sure if this is the correct place for it.

Here is the full JS file(listing.js):

$(document).ready(function() {
function handlePaginationClick(new_page_index, pagination_container) {
    // This selects 20 elements from a content array
    for(var i=new_page_id;i<3;i++) {
    $('#MyContentArea').append(content[i]);
    }
    return false;
}

// First Parameter: number of items
// Second Parameter: options object
$("#News-Pagination").pagination(11, {
    items_per_page:3, 
    callback:handlePaginationClick
});
});

That's pretty much all the code involved. do you need the plugin files?

Also, here is the readme file: README

Spyderfusion02 2009-07-20 20:07:29

Answer 3

A:

Try putting function handlePaginationClick() outside of $(document).ready().

Functions really shouldn't be embedded inside of $(document).ready() unless there is some reason to have them there.. Keeping them in the global scope often eliminates problems for me.

EDIT: $("#News-Pagination").pagination(), however, if I am not mistaken, should be inside $(document).ready(), since it is calling a function.

Also, new_page_id is not defined anywhere. Where is it coming from?

Stephen J. Fuhry 2009-07-20 20:53:41

Tried to put that function outside the ready fn, but nothing seemed to happen.where did you see the edit_page_id? or are you talking about the new_page_id?

Spyderfusion02 2009-07-20 21:13:01

sorry, corrected. Yes, it looks like you are referencing an undefined variable. assuming this is all your code, I think that saying `for(var i=new_page_id;i<3;i++)` is the equivalent of saying `for(var i=undefined;i<3;i++)`

Stephen J. Fuhry 2009-07-21 12:50:15

ansaurus

tags:

views:

answers:

jquery pagination not working

related questions