0

I have a component for my plugin in OctoberCMS. I show my repeater's data with a table with an edit and delete button. For example when I clicking the delete button for one item data-request="onDeletePackage" is calling and PHP deletes this item and with ajaxFramework the table refresh.

But I want to get all data and work on them, and for example when to click delete, the item without requesting to the server and when I click save service the repeater fill data.

This is my Code

//php code 

public function onDeletePackage()
    {

        $packages = Session::get('packages');
        if (post('id') !== null) {
            $id = post('id');
            unset($packages[$id]);
        }

        Session::put('packages', $packages);
        $this->page['packages'] = $packages;
        $this->page['service'] = new Service();
    }
{% if packages %}
    <table class="table table-hover dataTable" id="table2">
        <tbody>
        {% set cnt = 1 %}
        {% for key,item in packages %}
            {% if item.is_rejected ==false %}
            <tr>
                <td>{{ cnt }}</td>
                <td>{{ item.receiver_postal_code }}</td>
                <td>{{ item.receiver_address }}</td>
                <td>{{ service.getPostType(item.post_type_id) }}</td>
                <td>{{ service.getPackageType(item.package_type_id) }}</td>
                <td>{{ item.package_number }}</td>
                <td>{{ service.getWeight(item.weight_id) }}</td>
                <td>
                    <a
                            href="#"
                            class="btn btn-default btnEdit"
                            data-toggle="modal"
                            data-target="#package-modal"
                            data-id="{{ key }}"

                    >
                        <i class="fa fa-edit"></i>
                    </a>

                    <a
                            href="#"
                            class="btn btn-default"
                            data-request="onPackageDelete"
                            data-request-data="id:{{ key }}"
                            data-request-update="'{{ __SELF__ }}::_packages':'.showPackages'"
                    >
                        <i class="fa fa-trash"></i>
                    </a>
                </td>
            </tr>
            {% endif %}
            {% set cnt = cnt + 1 %}
        {% endfor %}
        </tbody>
    </table>
{% endif %}

<script type="text/javascript">
    $(document).ready(function () {
        $(".btnEdit").click(function () {

            id = $(this).attr('data-id');
            $("input[name='package_id']").val(id);

             packages={{ packages|json_encode|raw }};
            $("input[name='receiver_postal_code']").val(packages[id].receiver_postal_code);
            $("input[name='receiver_address']").val(packages[id].receiver_address);
            $("select[name='weight_id']").val(packages[id].weight_id).change();
            $("select[name='post_type_id']").val(packages[id].post_type_id).change();
            $("select[name='package_type_id']").val(packages[id].package_type_id).change();
            $("select[name='insurance_type_id']").val(packages[id].insurance_type_id).change();
            $("select[name='distribution_time_id']").val(packages[id].distribution_time_id).change();
            $("select[name='special_services_id']").val(packages[id].special_services_id).change();
            $("input[name='package_number']").val(packages[id].package_number);

            $('#package-modal').find('.modal-title').text('فرم ویرایش بسته');


        });

        $("#btn-newPack").click(function () {
            $('#my-form')[0].reset();
            $('span.select2-selection__rendered').text('انتخاب کنید');
            $("input[name='package_id']").val("");
            $('#package-modal').find('.modal-title').text('فرم ایجاد بسته جدید');


        });
    });


</script>
ehsan
  • 209
  • 1
  • 4
  • 13
  • may be just use repeater data and show table row including with hidden fields [ `containing single data-set` ], up on delete `do not use ajax` just `remove element div/row etc containing hidden fields so it removed` so when you click save it will send `only available hidden fields data` so you get them and save them `with single request` may be. – Hardik Satasiya Nov 12 '18 at 13:22

1 Answers1

0

You could change

<tr> to <tr id="pk{{ key }}"> 

then replace

data-request-update="'{{ __SELF__ }}::_packages':'.showPackages'"

with

data-request-success="removeRow({{ key }});"

and finally add this to your JS

removeRow function(key){
 $('#pk'+ key ).remove();
}

I think you could also then remove

    $this->page['packages'] = $packages;
    $this->page['service'] = new Service();

from your PHP onDeletePackage()

firemankurt
  • 97
  • 3
  • 12