I extended my list controller and added two additional buttons to the list toolbar with similar functionality like the Delete button (perform an action on the checked records). My buttons, like the default Delete button, toggle the enable property when at least one record is selected. Everything works fine but now I have no idea how to disable other buttons when an action finishes. Currently, only the button that invoked the action is disabled via JavaScript

data-request-success="$(this).prop('disabled', true)"

How can I access/disable other buttons? Do I have to write a JavaScript code to find the button using the Id?

When the listRefresh() method is called in your ajax handler, the buttons should get disabled automatically since no records will be selected.

Can you show the code for your button ajax handler?

My controller code. Generates a license for checked list records

    /**
     * Generates the license
     */
    public function onGenerateLicense() {

        if (($checkedIds = post('checked')) && is_array($checkedIds) && count($checkedIds)) {    
            foreach($checkedIds as $id) {
                // ... license generator execution, IMO not important for the behviour
            }
            Flash::success('Licenses generated!');
        }
        return $this->listRefresh();       
    }

Button definition

<button 
            class="btn btn-default oc-icon-book"
            disabled="disabled"
            data-trigger=".control-list input[type=checkbox]"
            data-trigger-action="enable"
            data-trigger-condition="checked"
            onclick="$(this).data('request-data', {
                checked: $('.control-list').listWidget('getChecked')
            })"
            data-request="onGenerateLicense"
            data-request-success="$(this).prop('disabled', true)"
            data-stripe-load-indicator>
            Generate license
        </button>

Last updated 3 years ago

So what is the exact behavior and what do you expect? Do you still have selected records after the button's action completes?

You could probably replace the data-request-success jquery code with this, I suppose:

data-request-success="$('button[data-trigger=\".control-list input[type=checkbox]\"]').prop('disabled', true)"

Not sure about escaping the double quotes though...

Last updated 3 years ago

I think it's a misunderstanding. I have no selected records when the ajax action finishes. What I am speaking about are the buttons in the toolbar - only the action button is disabled when the request finishes, others like Delete button stay enabled although no records are selected. The question may be How to disable the Delete button when my action finishes?

Yes, I understand, but was assuming if no records are selected when refreshing the list widget that all buttons would get disabled again... I found a solution...

use this:

<div data-control="toolbar">
    <a href="<?= Backend::url('r4l/backend/domains/create') ?>" class="btn btn-primary oc-icon-plus"><?= e(trans('backend::lang.form.create')) ?></a>
    <button
        class="btn btn-default oc-icon-trash-o"
        disabled="disabled"
        onclick="$(this).data('request-data', {
            checked: $('.control-list').listWidget('getChecked')
        })"
        data-request="onDelete"
        data-request-confirm="<?= e(trans('backend::lang.list.delete_selected_confirm')) ?>"
        data-trigger-action="enable"
        data-trigger=".control-list input[type=checkbox]"
        data-trigger-condition="checked"
        data-request-success="disableButtons()"
        data-stripe-load-indicator>
        <?= e(trans('backend::lang.list.delete_selected')) ?>
    </button>
    <button 
        class="btn btn-default oc-icon-book"
        disabled="disabled"
        data-trigger=".control-list input[type=checkbox]"
        data-trigger-action="enable"
        data-trigger-condition="checked"
        onclick="$(this).data('request-data', {
        checked: $('.control-list').listWidget('getChecked')
        })"
        data-request="onGenerateLicense"
        data-request-success="disableButtons()"
        data-stripe-load-indicator>
        Generate license
    </button>
</div>
<script>
    function disableButtons() {
        $('button[data-trigger=".control-list input[type=checkbox]"]').prop('disabled', true)
    }
</script>

Yes, that's the right solution, it works. Thank you!