This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
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
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
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>
1-9 of 9