page pagination issue

Using Django Forms & APIs
1

I have a pagination that is working fine, but if click on next page, the selected input will be unselected and only result on the second page will be recorded.

pagination code:

{% if page_obj.has_other_pages %}

{% if page_obj.has_previous %}

  <li class=" page-item"><a class="page-link badge bg-primary rounded-pill" href="?page={{ page_obj.previous_page_number }}">previous &laquo;</a></li>

{% else %}

  <li class="page-item disabled"><span>&laquo;</span></li>

{% endif %}

{% for i in page_obj.paginator.page_range %}

  {% if page_obj.number == i %}

    <li class="page-item active" aria-current="page"><span><a class="page-link" href="">{{ i }}</a></span></li>

  {% else %}

    <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>

  {% endif %}

{% endfor %}

{% if page_obj.has_next %}

  <li class="page-item"><a class="page-link badge bg-primary rounded-pill" href="?page={{ page_obj.next_page_number }}"> next &raquo;</a></li>

{% else %}

  <li class="page-item disabled"><span>last &raquo; </span></li>

{% endif %}

{% endif %}

input code:


{% csrf_token %}

<h1>{{course}} Quiz</h1><br>

<h4>Number of Questions in the Quiz: {{q_count}}</h4>

<hr>

<p>pages {{page_obj}}</p>

<hr>

{% for q in page_obj %}

{% if q.img_quiz.url %}


{% endif %}

{{ q.question }}

{% if q.marks %}

[marks {{q.marks}}]

{% endif %}

{% if q.option1 %}

{{q.option1}}

{% endif %}

{% if q.option2 %}

{{q.option2}}

{% endif %}

{% if q.option3 %}

{{q.option3}}

{% endif %}

{% if q.option4 %}

{{q.option4}}

{% endif %}



{% empty %}

No Exam Available Yet. CHECK LATER

{% endfor %}

2

First, a side note. When posting code (or templates) here, enclose the code (or template) between lines of three backtick - ` characters. That means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted.

Now, for your real question - you are correct. That is how the system-provided paginator works. The link for the next page ends up doing a GET for that page, not a POST to the current page. The user would need to click on something like a “save” button to issue a post to save the data on the current page before advancing to the next page.

If you’ve got a multi-page form where you want the person to be able to freely move back and forward through the pages, take a look at the Form Wizard tool in the django-formtools package.

1 Like
3

firstly, I appreciated your prompt respond to my question. Indeed, you deserve more than a boss. I will try on your recommendation now.

4

Good morning, boss, I will unable to find a solution of the integration of form wizard with bootstrap pagination. please any help video or an article?

5

You don’t integrate the two.

If you have a “multi-page” form, you use the form wizard. Normal pagination doesn’t apply.

1 Like
6

yes. am using normal bootsrap 4 pagination. This is the code:


<!-- pagination codes start -->

{% if page_obj.has_other_pages %}
<div class="container" id = ''>
<nav class="d-flex" aria-label="Page navigation example">

  <ul class="pagination  pagination-sm flex-wrap justify-content-center">
    {% if page_obj.has_previous %}
      <li class=" page-item"><a href="javascript:window.top.location.reload(true)"  class="continue page-link badge bg-primary rounded-pill" href="?page={{ page_obj.previous_page_number }}">previous &laquo;</a></li>
    {% else %}
      <li class="page-item disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in page_obj.paginator.page_range %}
      {% if page_obj.number == i %}
        <li class="page-item active" aria-current="page"><span><a class="page-link" href="">{{ i }}</a></span></li>
      {% else %}
        <li class="page-item"><a href="javascript:window.top.location.reload(true)"  class="continue page-link" href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link badge bg-primary rounded-pill" href="?page={{ page_obj.next_page_number }}"> next &raquo;</a></li>
    {% else %}
      <li class="page-item disabled"><span>last &raquo; </span></li>
    {% endif %}
  </ul>
</nav>
</div>
7 

<!-- pagination codes start -->

{% if page_obj.has_other_pages %}
<div class="container" id = ''>
<nav class="d-flex" aria-label="Page navigation example">

  <ul class="pagination  pagination-sm flex-wrap justify-content-center">
    {% if page_obj.has_previous %}
      <li class=" page-item"><a href="javascript:window.top.location.reload(true)"  class="continue page-link badge bg-primary rounded-pill" href="?page={{ page_obj.previous_page_number }}">previous &laquo;</a></li>
    {% else %}
      <li class="page-item disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in page_obj.paginator.page_range %}
      {% if page_obj.number == i %}
        <li class="page-item active" aria-current="page"><span><a class="page-link" href="">{{ i }}</a></span></li>
      {% else %}
        <li class="page-item"><a href="javascript:window.top.location.reload(true)"  class="continue page-link" href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link badge bg-primary rounded-pill" href="?page={{ page_obj.next_page_number }}"> next &raquo;</a></li>
    {% else %}
      <li class="page-item disabled"><span>last &raquo; </span></li>
    {% endif %}
  </ul>
</nav>
</div>
8

That might be fine for everything else, but it does not work in combination with the form wizard. If you are going to use the form wizard, it will control pagination.

9

OK, Sir, but what is the work around with the normal pagination? is there any solution for this problem? Thank you always for your quiz responses.

10

There are a couple different options you would have, none of which are particularly easy to implement.

  • You could rewrite the paginator to post the data from the current page, and have the successful post redirect you to the new page.

  • You could add some JavaScript to the page such that the data from each item on the form is submitted when the option is selected.

    • Or the JavaScript could store the current selections in local storage.

  • You could manage these different pages as if they were tabs. Physically, they’d all be one page, but logically and from a UI perspective, would appear as if they were different pages. The paginator would then be responsible for switching div sections on the page, not doing get to retrieve new pages from the server. The submit would then submit the entire form.

In all these cases, you’re going to have a fair bit of effort involved to “manage” the data. You’ll be taking over “programmatic responsibility” for items that normally are being taken care of for you.

1 Like
11

This is superpower recommendations. I will try to store the input into local storage and sum up on submission.