I have two different views: edit.html.erb and create.html.erb I want to add similar functionality onclick a checkbox on both the pages but want to avoid writing redundant code in both the files:
Currently what I am doing in both the files: In create.html.erb
<script>
function onclick (event) {
var message = 'Are you sure ?';
confirm(message) || event.preventDefault();
}
var elem = document.getElementById('create');
elem.addEventListener('click', onclick);
</script>
In edit.html.erb
<script>
function onclick (event) {
var message = 'Are you sure ?';
confirm(message) || event.preventDefault();
}
var elem = document.getElementById('edit');
elem.addEventListener('click', onclick);
</script>
Ideally I want to have a js file where both these events can be captured when clicking on either create or edit instead of writing this method individually on both files. What is a good way to do DRY here.
I would just do it the same way that Rails UJS does - by adding an event listener that targets elements with a data-confirm attribute:
function handleConfirm(e){
if (!event.target.matches('[data-confirm]')){ return; };
const attr = e.target.dataset.confirm;
const message = attr.length > 0 ? attr : 'Are you sure ?';
window.confirm(message) || e.preventDefault();
}
document.addEventListener('click', handleConfirm);<button>No confirmation</button>
<button data-confirm>Standard message</button>
<button data-confirm="REALLY???!!">A button with a custom text</button>