点击更改显示的问题

Question

I have a page that has a list of items. On the bottom of the page is a "view more" button. When someone clicks this button, the page needs to add more items. The var is $displayedquestions, and the page is coded right now to refresh when the "view more" button is clicked, but we'd like to have it do it live. How can this be done?

Here is code:

<?php
include "db_connect.php";
db_connect();

function tags($tags)
{
    $tagarray=explode(",",$tags);
    $i=0;
    $finished='false';
    while($finished=='false') {
        if (empty($tagarray[$i])=='true') {
            $finished='true';
        } else {
            $taglist = $taglist . '<a class="commonTagNames" href="">' . $tagarray[$i] . '</a> &nbsp;';
            $i++;
        }
    }
    return $taglist;
}


function formattime($timesince)
{
    $strsince=number_format($timesince,0,'','');
    $nodecimals=intval($strsince);
    if ($nodecimals<1){
        return "Less than a minute ago";
    } elseif ($nodecimals>=1&&$nodecimals<60) {
        return $nodecimals . " min ago";
    } elseif ($nodecimals>60&&$nodecimals<1440){
        $hourssince=$nodecimals/60;
        $hoursnodecimals=number_format($hourssince,0);
        return $hoursnodecimals . " hours ago";
    } elseif ($nodecimals>1440){
        $dayssince=$nodecimals/1440;
        $daysnodecimals=number_format($dayssince,0);
        return $daysnodecimals . " days ago";
    }
}

$submitbutton=$_REQUEST['viewmore'];
$numquestions=intval($_REQUEST['questions']);
if($numquestions!=0) {
    $displayedquestions=$numquestions;
} else {
    $displayedquestions=10;
}

$sql="SELECT * FROM `Questions` ORDER BY `Questions`.`ID`  DESC LIMIT 0, " . $displayedquestions;
$questions=mysql_query($sql);
while($row = mysql_fetch_array($questions))
{
$id = $row['ID'];
$user = $row['userAsking'];
$question = $row['question'];
$tags = $row['tags'];
$timestamp = $row['timestamp'];
$time=strtotime($timestamp);
$secondssince=(date(U)-$time)/60;
$timesince=formattime($secondssince);
$responses=mysql_query("SELECT * FROM `answersToQuestions` WHERE `idOfQuestion`= '$id'");
$comments=mysql_num_rows($responses);
$likes=mysql_query("SELECT * FROM `likesOfQuestions` WHERE `idOfQuestion`= '$id'");
$numlikes=mysql_num_rows($likes);
$userprofileq = mysql_query("SELECT `ID`,`avatar` FROM `Users` WHERE `username` = '$user'");
$userprofileresult = mysql_fetch_row($userprofileq);
$linktoprofile = $userprofileresult[0];
$avatar = $userprofileresult[1];
$taglist=tags($tags);

        echo "</li>";


                        echo '<li class="questionsList" onclick="showUser(' . $id  . ')">
                            <div id="questionPadding">
                            <img class="askerImage" width=50 height=50 src="../Images/userimages/' . $avatar . '.png"/>
                            <div class="questionFirstRow"><h1 class="questionTitle">' . $question . '</h1></div>
                            <span class="midRow">
                            <span class="askerSpan"><a class="askerName" href="">'. $user .'</a></span>
                            </span>
                            <span class="bottomRow">                                
                                <img src="../Images/comment.png"/>
                                <span class="comments">' . $comments . '</span>
                                <img src="../Images/likes.png"/>
                                <span class="likes">' . $numlikes . '</span>
                                ' . $timesince . ' 
                            </span>
                            </div>
                        </li>';


}


?>

<center><a href="index.php?questions=<?php  echo $displayedquestions+10; ?>"><img class="moreQuestions" src="../Images/viewMoreBar.png" alt="More" /></a></center>

Answer 1

Without doing a lot of work you can add ajax to this. Use this function:

First, (I am assuming you are including the code above into another file) create a container around it. Ex:

<div id='container'>...</div>

Second, add this javascript to the page that includes the code you have above:

<script type="text/javascript">
    $(function(){
        $("#container img.moreQuestions").parent().live('click', (function (e) { 
                e.preventDefault();
                $("#container").load($(this).attr("href"));
            });
        });
    });
</script>

This will load into #container the script you already have without refreshing the rest of the page.

Note the selector for the More link (slash button) in my example is $("#container img.moreQuestions").parent() because you don't have a class or id on it. You should give a class or id to the More link and use that for the selector.