ajax_index.twig

{# /admin/files/upload からPartial読み込み #}
<h3 id="entry_count">
    {{ _('File search') }}[{{ _('Hits') }}&nbsp;{{ paging.count }}{{ _(' results') }}]
    {{ input(req, 'limit', 'select', {'options': page_list_file, 'default': file_default_limit}) }}
    {{ input(req, 'page', 'select', {'options': page_list_paging, 'default': 0}) }}
</h3>
<p>{{ _('You can search to match the conditions file.') }}</p>
<div id="entry_search">
    <form method="GET" id="sys-search-form" onsubmit="return false;">
        <input type="hidden" name="mode" value="Files"/>
        <input type="hidden" name="process" value="ajax_index"/>
        {{ input(req, 'limit', 'hidden', {'default': page_limit_file}) }}
        {{ input(req, 'page', 'hidden', {'default': 0}) }}
        {{ input(req, 'order', 'hidden', {'default': 'created_at_desc'}) }}
        <br/>{{ input(req, 'keyword', 'text', {'maxlength': 100}) }}
        <input type="submit" value="{{ _('Search') }}"/>
    </form>
</div>

{% include('admin/common/paging.twig') %}

<table>
    <thead>
    <tr>
        <th><input type="checkbox" onclick="common.fullCheck(this);"/></th>
        <th class="file_view"></th>
        <th><a href="javascript:void(0);" onclick="orderChange('created_at_desc'); return false;">{{ _('Date') }}</a></th>
        <th><a href="javascript:void(0);" onclick="orderChange('name_asc'); return false;">{{ _('Name') }}</a></th>
        <th>{{ _('Edit') }}</th>
        <th>{{ _('Delete') }}</th>
    </tr>
    </thead>
    <tbody>
    {% if files %}
        {% for file in files %}
            <tr>
                <td class="center ss_cell"><input type="checkbox" name="id[]" value="{{ file.id }}"/></td>
                <td class="center">
                    {% if inArray(file.ext, ['jpeg', 'jpg', 'png', 'gif']) %}
                        <img alt="upload image" src="{{ file.path }}" style="width: 120px;"/>
                    {% endif %}
                </td>
                <td>{{ file.created_at|date('y/m/d') }}</td>
                <td><a href="{{ file.path }}" target="_blank">{{ t(file.name,30) }}</a></td>
                <td class="center s_cell"><a href="{{ url(req, 'Files', 'edit', {id: file.id}) }}">{{ _('Edit') }}</a></td>
                <td class="center s_cell"><a href="{{ url(req, 'Files', 'delete', {id: file.id, sig: sig}) }}" onclick="return confirm('{{ _('Are you sure you want to delete?') }}');">{{ _('Delete') }}</a></td>
            </tr>
        {% endfor %}
    {% endif %}
    {% if not files %}
        <tr>
            <td colspan="6">{{ _('The target file does not exist') }}</td>
        </tr>
    {% endif %}
    </tbody>
</table>

<input type="button" id="sys-delete-button" value="{{ _('Remove what you have selected') }}" disabled="disabled"/>

{% include('admin/common/paging.twig') %}

<script>
    $(function () {
        // ページ件数 or ページ数を変更した際に自動でサブミット
        $('select[name=limit]').on('change', function () {
            $('input[name=limit]').val($(this).val());
            ajaxSubmit();
        });
        $('select[name=page]').on('change', function () {
            $('input[name=page]').val($(this).val());
            isPageChange = true;
            ajaxSubmit();
        });
        // 検索ボタンのサブミット処理
        $('#sys-search-form input[type=submit]').on('click', function () {
            ajaxSubmit();
        });
        $('ul.paging a').on('click', function () {
            ajaxSubmit($(this).prop('href'));
            return false;
        });

        // 複数ファイル削除ボタン
        $('#sys-delete-button').click(function () {
            if (!confirm('{{ _('Are you sure you want to delete?') }}')) {
                return;
            }
            var ids = [];
            $('input[type=checkbox][name="id[]"]:checked').each(function () {
                ids.push($(this).val());
            });

            if ($('#sys-delete-button').prop('disabled')) {
                return;
            }

            isAjaxSubmit = false;
            $('#sys-delete-button').attr('disabled', 'disabled');
            $('#sys-delete-button').val('通信中');

            // Ajaxで削除処理
            $.ajax({
                url: '{{ url(req, 'Files', 'ajax_delete') }}',
                type: 'POST',
                data: {id: ids, sig: '{{ sig }}'},
                dataType: 'json',
                success: function (json) {
                    // 削除完了後検索処理を実行
                    isAjaxSubmit = isPageChange = true;
                    ajaxSubmit();
                },
                error: function( response, status, xhr ) {
                  if (status === "error") {
                    alert("エラーが発生しました、ページをリロードしてください。\n" +
                      "Request failed. Please reload page and retry.");
                    // 失敗しているが、画面を復帰させるために検索処理を実行
                    isAjaxSubmit = isPageChange = true;
                    ajaxSubmit();
                  }
                }
            });
            return false;
        });
        // 削除用のチェックボックスがチェックされている時だけ削除ボタンを有効化する
        $('input[type=checkbox][name="id[]"]').on('change', function () {
            $('#sys-delete-button').prop('disabled', !$('input[type=checkbox][name="id[]"]:checked').length);
        });
    });
</script>