www.webdeveloper.com
Results 1 to 9 of 9

Thread: Get next 20 rows from db with span onclick?

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    OK. I'm learning. I have a side bar with pseudo links(no a tags)ul li elements that automate httprequests nicely. They call different db tables to a display div on the index page. Right now the tables are small and a javascript function deliniates the last row echoed as 'Last Item' in the HTML div that recieves the responseText. Now if the db table queried has more than 20 rows or the limit I would like the client to be able to click 'Last item' span tag to recieve the next rows in the db table and if there are no more rows in that table act as though the next 'li' or 'ul li' element was clicked. I presume that an array of the 'li' elements called 'products' should be created and that next sibling of that array can make the next httprequest when the 'Last item' span is clicked on. How to test for the limit of rows and ensure the correct response in that array is the problem.
    Any advice or direction greatly appreciated! This maybe an Ajax or Dhtml question?

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    It is both a javascript and server-side programming question. The reason being in order to know that there are no more rows after the previous query, the server response need to send back a flag (lastrow=true in your ajax response. Once you verify that lastrow!=false, then your algorithm can decide about how many more rows to call from the next table.

    It should not be challenging. All you need is devise an Javascript algorithm.

  3. #3
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    holyhttp, I've seen it on many sites where they ask you how many items you'd like to display on the page and then you have ' next or more or previous pages ' at the bottom and top of the page which I presume when clicked makes another httprequest. Other sites have a choice of selecting how many Items you want to show on the page. This is similar but I could use a simple query that sets the 'flag' on a limit of say 20 rows and then when the client clicks on 'Last Item' the next rows in the db table are returned. I'm guessing it is SQL or the query itself and that it would be reflected in the Ajax call as well as the php? Flag last row of query limit?

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    I am sorry your previous explanations led make those suggestions.
    Now I see what you meant.
    I have developed such web applications countless times.
    The bulk of your app is on the server-side.

    1) Define the maximum number rows that will retrieved.(e.g. $limit=20; )
    2) Determine how the total number results that query can return. ($maxrows)
    That will allow you to create pagination links.
    The number of "pages" $np=$maxrows/$limit.

    3) Each link in your pagination section will be related to a given value of a cursor;
    Your pagination links will therefore look like:
    <a href="/url?np=$np&cs=0">1</a> &nbsp; <a href="/url?np=$np&cs=1">2</a> ..

    4) For a given value of $cs in your URL your SQL query can be like:
    $skip=$cs*$limit;

    $sql="SELECT ..... ORDER BY .... LIMIT $skip, $limit";

    Of course the variable $np, $cs, $limit, $skip assume your server-side programming is PHP. It's up to you to write the script in your favorite server-side language.

  5. #5
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    hollyhttp, yeah I finaly learn't what 'pagination' realy means. However, using you'res and others PHP method is specifically for reloading the entire page from the server. My site only reloads a central div for displaying httpresponseText. However I will endeavour to use the PHP method to obtain a similar result. The problem is that my site has a (left vertical) #sidebar div with several ul tags who's li tags have a singular onclick javascript function that gets the li elements id and uses Get to make an httprequest to change the display div innerhtml. Another javascript function creates a span tag 'Last Item' with innerHTML 'Last Item' title='Click to see more' in the last/limit row echoed. If there are more row's to echo from the database table ie. the same li tag element id, then the next limit of rows should be requested. If there are no more rows in that specific table then the next li tag will make the next http request without it acctually being clicked by the client so the 'Last Item' span tag acts like it was the next #sidebar li tag onclick. Not sure that makes sence but it should be clear that the site is reling heavely on client side action. I'm trying to step past the current PHP pagination method as it isn't or doesn't appear to have a conection to the next or previous 'category/ul'.

  6. #6
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    If you take a look at most pagination links, you will see that along with page numbers you can see the "<Previous" (left) and "New >" (right).

    Of course when you are using AJAX you need to a distinction between regular requests and AJAX requests. In an AJAX request, only certain data items are needed to repopulate the target sections in your web page.

    Take a look at http://livetrainingsession.com and notice how AJAX request are made to navigate various pages.

    I can only give you some idea about how to achieve the functionality you are looking for. It's now up to you to take those tips and adapt them to your specific project.

    You are now a web developer. Take whatever information you read and take it to the next level.

  7. #7
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    holyhttp, Thanks, I'll check it out. First though, I'd like you to look at the getproduct.php that I use for all product li tags in #sidebar div that are childnodes of ul tags reprisenting different catagories of products. I'd like to echo back the number of rows in the table called but realized that echoing back a hidden input with this value would place a hidden input in every row echoed. I'd like to echo the hidden input back in the last row only of the limit specified and I'm guessing that would require a for loop function on the num_rows() function variable just to put the total number of rows in the table as a value in the hidden input. Javascript builds the last item span so if it can access the value of hidden input #norows then it could create a form of javascript pagination? Note: There is no limit set on the query, which I'm guessing will be needed once the database grows.
    PHP Code:
    <?php
    header
    ('Cache-Control: no-cache');
    $q=$_GET["q"];
    $link=mysql_connect("localhost","root","root")or die(mysql_error( ));
    mysql_select_db("bwi",$link) or die(mysql_error( ));
    $query=mysql_query("SELECT * FROM ".$q)or die(mysql_error());
    while(
    $row mysql_fetch_array($query))
    {
    /*start rowcontainer div*/
    echo "<div id='rowcontainer" $row['id'] . "' class='rowcontainer' title='Scroll to See more'>";
    /*start rowcell div*/
    echo "<div id='rowcell" $row['id'] . "' class='rowcell'>";
    echo 
    "<input type='hidden' id='itemid" $row['id'] . "' value='row" $row['id'] . "'/>";
    /*start imagecell div*/
    echo "<div id='imagecell" $row['id'] . "' class='imagecell' align='center'>";
    echo 
    "<input type='hidden' name='imgref" $row['id'] . "' id='imgref" $row['id'] . "' class='imgref' value='" $row['href'] . "'/>";
    echo 
    "<img src='" $row['src'] . "' class='image' onclick='pictureclick()' title='Click to get a better look'/>";
    echo 
    "</div>";
    /*end imagecell div*/
    /*start descriptioncell div*/
     
    echo "<div id='descriptioncell" $row['id'] . "' class='descriptioncell'>";
    echo 
    "<h1>" $row['item'] . "</h1>";
    echo 
    "<p id='itemdescription" $row['id'] . "' class='itemdescription'>";
    echo 
    $row['description'] ."-" $row['list'] . "</p>";
    echo 
    "</div>";
    /*end descriptioncell div*/
    /*start ordercell div*/
     
    echo "<div id='ordercell" $row['id'] . "' class='ordercell'>";
    echo 
    "<fieldset id='addtoinvoice" $row['id'] . "' class='addtoinvoice'><br/>";
    echo 
    "<input type='hidden' name='code" $row['id'] . "' id='code" $row['id'] . "' class='code' value='" $row['code'] . "'/>";
    echo 
    "<input type='hidden' name='item" $row['id'] . "' id='item" $row['id'] . "' class=item' value='" $row['item'] . "'/>";
    echo 
    "<label for='color'>Color:</label>";
    echo 
    $row['color'] . "<br/><br/>";
    echo 
    "<label for='size'>Size:</label>";
    echo 
    $row['size'] . "<br/>";
    echo 
    "<input type='hidden' name='price" $row['id'] . "' id='price" $row['id'] . "' class='price' value='" $row['price'] . "'/><br/>";
    echo 
    "<label for='quantity'>Quantity:</label>";
    echo 
    $row['quantity'] . "<br/><br/>";
    echo 
    "<input type='hidden' name='vendor" $row['id'] . "' id='vendor" $row['id'] . "' value='" $row['vendor'] . "'/>";
    echo 
    "<input type='hidden' name='ref" $row['id'] . "' id='ref" $row['id'] . "' value='" $row['href'] . "'/>";
    /*start buttoncontainer div*/
    echo "<div id='buttoncontainer" $row['id'] . "' class='buttoncontainer'>";
    echo 
    "<span id='value" $row['id'] . "' class='value'>" $row['price'] . "</span>";
    echo 
    "<button name='buynow" $row['id'] . "' id='buynow" $row['id'] . "' class='button' onclick='addtoinvoice()' type='button'/>Buy Now!</button>";
    echo 
    "</div>";
    /*end buttoncontainer div*/
    echo "</fieldset>";
    echo 
    "</div>";
    /*end ordercell div*/
    echo "</div>";
    /*end rowcell div*/
    echo "</div>";
    /*end rowcontainer div*/
    }
    echo 
    "<link id='dognuts' rel='stylesheet' type='text/css' href='styles/product.css'/>";
    mysql_close($link);
    ?>
    Thanks again for you're patience.
    Last edited by THEFOOL; 04-17-2012 at 02:03 PM. Reason: Note: There is no limit set on the query, which I'm guessing will be needed once the database grows.

  8. #8
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    hollyhttp, yes I'm learning but this is blowing my mind. I thought mysql_num_rows($result); would do the trick and I got the result value of $norows loaded to hidden input all be it in every row echoed so that I could use the onclick of last Item span to alert the parentNode childNodes outerHTML showing the value of the hidden input is $norows but that changes when I set a limit on the query and returns only the limit set and not the total number of rows in the table $q. Is this a limitation of PHP or is there a way to set a variable for all rows in $q and echo a limited amount of rows at the same time.

    Updated PHP
    PHP Code:
    <?php
    header
    ('Cache-Control: no-cache');
    $q=$_GET["q"];
    $link=mysql_connect("localhost","root","root")or die(mysql_error( ));
    mysql_select_db("bwi",$link) or die(mysql_error( ));
    $sql="SELECT * FROM ".$q." LIMIT 0, 2";
    $result=mysql_query($sql$link);
    $norows=mysql_num_rows($result);//with limit set, returns 2?
    //I want all the rows in the table .$q
    while($row mysql_fetch_array($result))
    {

  9. #9
    Join Date
    Nov 2009
    Posts
    268

    Question Get next 20 rows from db with span onclick?

    hollyhttp, hey I stumbled on this that works and gives me the result I wan't http://www.justincarmony.com/blog/20...less-of-limit/ the only thing I realize now is that calling the getproduct.php again doesen't alter the limit so the getproduct.php script itself would have to be altered to not deliver the same result every time the li element gets clicked.
    Updated getproduct.php
    PHP Code:
    <?php
    header
    ('Cache-Control: no-cache');
    $q=$_GET["q"];
    $link=mysql_connect("localhost","root","root")or die(mysql_error( ));
    mysql_select_db("bwi",$link) or die(mysql_error( ));
    $sql="SELECT SQL_CALC_FOUND_ROWS * FROM ".$q." LIMIT 0, 2";
    $result=mysql_query($sql);
    $sql="SELECT FOUND_ROWS() AS 'found_rows';";
    $rows=mysql_query($sql);
    $rows=mysql_fetch_assoc($rows);
    $norows=$rows["found_rows"];
    while(
    $row mysql_fetch_array($result))
    {
    I'm wondering if Mr. Carmony was addressing the issue with the
    There is also a trick that if you want to insert SQL_CALC_FOUND_ROWS into the statement by the following PHP code:
    Though I don't see how I could get it to change the getproduct.php with the second Ajax call for $q ie. a second simulated click on the original li tag?
    I guess I'd have to have 'Last Item' span written on the server like a regular pagination link 'next' but getting it to echo to the last row in the mysql_fetch_array is the problem. The Css for #lastitem is already there.
    Last edited by THEFOOL; 04-17-2012 at 09:22 PM. Reason: I guess I'd have to have 'Last Item' span written on the server

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles