Sahib Uz Zaman Sahib Uz Zaman - 26 days ago 10
jQuery Question

Displaying first 5 results from query in one div and rest in another

I am developing a quiz application on CodeIgniter.

Randomly 25 questions are picked from the database and displayed to the user.

The following is my code:

<?php
$i = 1;
echo form_open('Menu/submit_ans', array('name' => 'quiz'));
foreach ($quiz_array as $q){?>
<center class="Qcounter">
<div class="col-lg-12">

<h3>Question No. <?php echo $i?> </h3>
<br>
<table>
<tr>
<td colspan="2"><?php echo $q->ques;?></td>
<input hidden name="qid[]" type="text" value="<?php echo $q->qid;?>">
<input hidden name="uid[]" type="text" value="<?php echo $user['id'];?>">
</tr>
<tr>
<td><input type="radio" name="ans[<?php print $i; ?>]" value="1"></td>
<td><?php echo $q->ans_1;?></td>
</tr>
<tr>
<td><input type="radio" name="ans[<?php print $i; ?>]" value="2"></td>
<td><?php echo $q->ans_2;?></td>
</tr>
<tr>
<td><input type="radio" name="ans[<?php print $i; ?>]" value="3"></td>
<td><?php echo $q->ans_3;?></td>
</tr>
<tr>
<td><input type="radio" name="ans[<?php print $i; ?>]" value="4"></td>
<td><?php echo $q->ans_4;?></td>
</tr>
</table>

</div>
</center>
<?php
$i++;

}

?>

<button class="btn btn-success" type="submit">Submit!</button></a>
<?php echo form_close();?>
<button id="btn_next">Next</button>


I want to display the first 10 results on one div.

And when the user clicks the next button, it shows the next 10 results.

(hiding the current div and showing the next one)

I just want to know how I can break the results and limit to 10 questions per div.

Answer

Based on your HTML (created from a PHP loop).

First: This HTML isn't perfectly valid.... Even if it may work.
Modern browsers "patch" this.
Or maybe you were a little fast on cut'n paste for the example...

Anyway, I added a missing <tr>/</tr> wrapper on your 1st row of each question's <table>.
I also added a missing </div> and </center> in that PHP loop.

<?php 
    $i = 1;

    foreach ($quiz_array as $q){ ?>
        <center class="Qcounter">
            <div class="col-lg-12">
                <h3>Question No. <?php echo $i?> </h3>
                <br>
                <table>
                    <tr><!-- added -->
                        <td colspan="2"><?php echo $q->ques;?></td>
                        <input hidden type="text" value="<?php echo $q->qid;?>">
                    </tr><!-- added -->
                    <tr>
                        <td><input type="radio" name="ans[<?php print $i; ?>]" value="1"></td>
                        <td><?php echo $q->ans_1;?></td>
                    </tr>
                    <tr>
                        <td><input type="radio" name="ans[<?php print $i; ?>]" value="2"></td>
                        <td><?php echo $q->ans_2;?></td>
                    </tr>
                    <tr>
                        <td><input type="radio" name="ans[<?php print $i; ?>]" value="3"></td>
                        <td><?php echo $q->ans_3;?></td>
                    </tr>
                    <tr>
                        <td><input type="radio" name="ans[<?php print $i; ?>]" value="4"></td>
                        <td><?php echo $q->ans_4;?></td>
                    </tr>
                </table>
            </div><!-- added -->
        </center><!-- added -->

        <?php 
        $i++;
    }
?>

So now that this is consistent...
Why not use the <center> tag as a wrapper to count questions on jQuery-side?

I added a class to it : class="Qcounter" which will only be used as a jQuery selector.

The function sets display onload for a given number of elements.
Then sets a click handler for a someNextBtn button id.

// Define the amount of question to show.
var showNquestion = 5;

// onload...
$(".Qcounter").each(function(){

    // Question indexes 0 to showNquestion will show.
    if( $(this).index() < showNquestion ){
        $(this).css({"display":"block"});
    }else{
        $(this).css({"display":"none"});
    }
});

// On "Next" button click.
$("#someNextBtn").click(function(){

    var lastShown=0;

    // Find the last question index shown.
    $(".Qcounter").each(function(){
        if( $(this).css("display") == "block" ){
            lastShown = $(this).index();
        }
    });

    $(".Qcounter").each(function(){

        //Question indexes "last+1" to "last+showNquestion" will show.
        if( ($(this).index() > lastShown) && ($(this).index() < lastShown+showNquestion) ){
            $(this).css({"display":"block"});
        }else{
            $(this).css({"display":"none"});
        }
    });

    if( lastShown == $(".Qcounter").length ){
        alert("You answered all questions.");
    }
});

NOTICE that <center> elements are checked for their .index().
So it is indicated to wrap your whole set of questions within a <div> without any other elements, before or after, to prevent messing up that count.

Comments