I have created a repeater, which has a checkbox field with with 3 options, to be used for an availability schedule.
Min allowed = 7 as is max, so I can create a week schedule.
Only ‘problem’ is, every day shows Day, see image.
Can I override these labels somehow, so I can show the names of the days ?
Hi @beee
You should be able to do it by using a little bit advanced Javascript. Here’s an example how to do it:
add_action('acf/input/admin_footer', 'my_acf_change_repeater_label');
function my_acf_change_repeater_label() {
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
// Hook when a new row is added
acf.add_action('append', function( $el ){
// Set default day and get the current total rows
var currentDay = "Monday";
var currentRow = $el.closest(".acf-table").find(".acf-row").length - 1;
console.log(currentRow);
// Convert current row to day name
switch(currentRow) {
case 2:
currentDay = "Tuesday";
break;
case 3:
currentDay = "Wednesday";
break;
}
// Replace the label
$el.find(".acf-field-123456789abc label").text(currentDay);
});
});
})(jQuery);
</script>
<?php
}
Where ‘.acf-field-123456789abc’ is the class of the field you want to target.
I hope this helps 🙂
Thanks…. I have one question though…. My rows are set at min 7, max 7.
Users can’t add a row himself…
So am I right to assume this line won’t be working, since no rows are added ?
acf.add_action('append', function( $el ){
I have tested the provided script with and without the if function but can’t get it to work yet…
Hi @beee
If you set the repeater to show the exact total rows, then you don’t need to use the repeater field at all. Just use the normal check box field for each day.
If you still want to use the repeater, then you need to loop through the rows and change the label for each row.
I hope this make sense 🙂
Yes, I understand, but I can’t ‘write’ it. I’m not a hero with js…
The reason I choose a repeater is too eliminate any typos or whatsoever.
Now I know for sure all 7 days are ‘formatted’ the same and they’re properly grouped in the form.
And I think it looks better, see http://i.imgur.com/jQ0krcI.png.
Would you happen to know/have a solution ?
Hi @beee
You should be able to do it like this:
add_action('acf/input/admin_footer', 'my_acf_change_repeater_label2');
function my_acf_change_repeater_label2() {
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
var currentDay = "Monday";
// Replace the label
$(".acf-field-123456789abc label").each(function(i){
switch(i) {
case 1:
currentDay = "Tuesday";
break;
case 2:
currentDay = "Wednesday";
break;
}
$(this).text(currentDay);
});
});
})(jQuery);
</script>
<?php
}
Because this is more related to jQuery, kindly visit its community for better support.
I hope this helps 🙂
Yes that helps a lot. It almost worked right as you wrote it, but this way also the values of the checkboxes are changed, so there needs to be one minor change.
CHANGE
$(".acf-field-123456789abc label").each(function(i){
TO
$(".acf-field-123456789abc .acf-label label").each(function(i){
Then it works like a charm.
Thnq.
This topic was before I made a front-end form.
I have it working on the front-end now.
I noticed it works with acf/render_field and acf/input/admin_footer.
Does it matter which one I use ?
Hi Bee,
The acf/render_field action will add the script when the field is rendered while the acf/input/admin_footer will add the script in the footer. It really depends on how you want it to be, but the best place to add JS script is in the footer (the bottom of your page). This page should give you more idea about it: http://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document.
I hope this makes sense 🙂
I wasn’t sure if the admin_footer was limited to the back-end in some way, hence the question.
Hi @beee
If you use the acf_form() function, the acf/input/admin_footer will be applied to the page too. That’s because the front end form needs scripts that are added by this hook.
Hope this helps 🙂
