Cara terbaik untuk menyimpan nilai kotak semak dalam sesi semasa penomboran

Question

Saya bekerja dengan Symfony dan Twig. Pada masa ini saya mempunyai halaman ranting yang mengandungi senarai produk, saya menggunakan gelung foreach untuk memaparkannya dan menyediakan penomboran untuk mengehadkan paparan produk.

Saya mempunyai borang dalam halaman ini yang mempunyai kotak semak sebagai input dan apabila saya pergi ke halaman seterusnya saya perlu menyemak kotak semak simpan dalam sesi

Saya cuba melakukannya dengan menambahkan kod ini

Terdapat beberapa kod dan saya telah menambahkan beberapa ulasan dalam paparan penomboran dan pengawal untuk menerangkan perkara yang saya cuba lakukan.

Pandangan gelung saya:

<form>
    <div class="row" >
        {%  for annonce in annonces %}

            <div class="col-12 col-md-6 col-lg-4">
                        <p class="text text--blue text--bold m-0 text--medium mt-2">
                            {{ annonce._source.titre }}
                        </p>
                        <p class="m-0">{{ 'Réf' }}: {{ annonce._source.reference }}</p>
                        <div class="d-flex mt-2 text--bold">
                            <div class="d-flex me-2">
                                {{  annonce._source.ville }}
                            </div>
                        </div>
                    <div>
                        <input type="checkbox" name="checkbox[]" id="checkbox_pdf" value="{{annonce._id}}" multiple/>
                    </div>

            </div>

        {% endfor %}
    </div>
    <input type="submit" id="pdf_submit" value="Create PDF" name="submit_pdf" class="btn btn-primary">
</form>

Paparan halaman:

// I tried to add a onclick : onclick='document.forms["name"].submit(); return false;' on each pagination link combined with the save of the value in session with my controller but doesn't work

<div class="col d-flex justify-content-between align-items-center">
    <div class="d-flex">
        {% if page > 0 %}
            <a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':0, 'type':'frontoffice'}) }}" data-target="pagination-target">
                «
            </a>
            <a href="#"  data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':page-1, 'type':'frontoffice'}) }}"  data-target="pagination-target">
                {{ 'Précédent' }}
            </a>
        {% else %}
            <a href="#" disabled="disabled" >
                {{ 'Précédent' }}
            </a>
        {% endif %}
    </div>
    <div>
        <ul class="list-unstyled pagination m-0">
            {% for i in (page+1)..(page+4) %}
                {% if i <= numberOfMaxPage %}
                    {% if i == (page+1) %}
                        <li>
                            <a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':(i-1), 'type':'frontoffice'}) }}" data-target="pagination-target">
                                {{ i }}
                            </a>
                        </li>
                    {% else %}
                        <li>
                            <a href="#"  data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':(i-1), 'type':'frontoffice'}) }}" data-target="pagination-target">
                                {{ i }}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    <div class="d-flex">
        {% if page < (numberOfMaxPage-1) %}
            <a href="#"  data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':page+1, 'type':'frontoffice'}) }}" data-target="pagination-target">
                {{ 'Suivant' }}
            </a>
            <a href="#"  data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':numberOfMaxPage-1, 'type':'frontoffice'}) }}" data-target="pagination-target">
                »
            </a>
        {% endif %}
    </div>
</div>

JS untuk penomboran:

$( document ).ready(function() {
            $(document).on('click', 'a.pagination',function(e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).data('uri'),
                }).done(function(html) {
                    $('#pagination-target').html(html);
                    $('html,body').animate({scrollTop: $('#pagination-target').offset().top - 80}, 200);
                    var $scrollable = document.getElementById('pagination-target');
                    $scrollable.scrollIntoView();

                });
            });
        });

Dalam pengawal saya, saya memberikan paparan seperti ini:

public function search(Request $request, ?SecteurGeographique $secteurGeographique, AnnonceRepository $annonceRepository): Response
    {
        $selectId = $request->get('checkbox');
        $selected = $annonceRepository->findById($selectId);

// I tried to add this code to save my values
        
if (isset($selectId))
        {
            $session = new Session();
            $session->set('checkbox',$selectId);
        }else{
            echo 'false';
            $session = new Session();
            $session->clear();
        }

return $this->render('front/annonce/list.html.twig', array(
                        'annonces' => $results['hits']['hits'],
                        'total'  => $results['hits']['total']['value'],
                        'website' => $website,
                        'page' => $request->query->getInt('page')
                    ));
}

Adakah lebih baik untuk menyimpan php saya dalam sesi atau dalam ajax?

Terima kasih terlebih dahulu

Answer 1

Sebenarnya, jika saya memahami kod anda dengan betul, anda sebenarnya tidak perlu menggunakan sesi.

Saya menganggap, apabila anda menyerahkan borang, anda perlu menyiarkan semua nilai kotak semak dengan segera untuk menjana PDF.

Jika ini yang anda cuba lakukan, anda hanya perlu menyimpan senarai kotak semak terus melalui JavaScript dan pastikan semuanya dihantar apabila borang diserahkan.

Mengikut teori ini, mungkin terdapat halaman utama HTML:

{% for annonce in annonces %}

{{ annonce._source.titre }}

{{ 'Réf' }}: {{ annonce._source.reference }}

{{ annonce._source.ville }}

{% endfor %}

Di sini anda boleh melihat saya menambah div #savedCheckboxes yang tidak kelihatan. Ini akan membolehkan kami menyimpan semua kotak pilihan apabila anda menukar halaman. Saya juga membetulkan sedikit HTML anda, tetapi tiada yang utama.

Kemudian anda harus mengemas kini javascript penomboran anda:

$(document).ready(function() {
    $(document).on('click', 'a.pagination',function(e) {
        e.preventDefault();
        // Save all the selected checkboxes by moving them to #savedCheckboxes
        $('.checkboxPDF:checked').appendTo($('#savedCheckboxes'))

        // Do your pagination like you did
        $.ajax({
            url: $(this).data('uri'),
        }).done(function(html) {
            $('#pagination-target').html(html);

            // If the user come to a previous page, verify if he did selected a checkbox
            $('#pagination-target .checkboxPDF').each(function(i, element) {
                // If the checkbox already exists in the #savedCheckboxes, then select this checkBox & remove it from #savedCheckboxes
              var savedCheckbox = $('#savedCheckboxes .checkboxPDF[value="'+element.val()+'"]')
              if(savedCheckbox.length > 0) {
                 element.click() // Select this checkbox
                 savedCheckbox.remove() // Remove it from the hidden selection
              }
            })

            $('html,body').animate({scrollTop: $('#pagination-target').offset().top - 80}, 200);
            var $scrollable = document.getElementById('pagination-target');
            $scrollable.scrollIntoView();
        });
    });
 });

Keajaiban selesai... Apabila anda menyerahkan borang, anda akan sentiasa menerima semua senarai dengan kotak pilihan yang dipilih, malah senarai yang tidak lagi dipaparkan kerana penomboran.