Repeater Fields in Widget Form Function in Wordpress

Question

I've been trying to add repeater fields in my wordpress widget form. I found two plugin examples but they don't work anymore. When I click on "Add row", nothing happens.

https://www.commoninja.com/discover/wordpress/plugin/social-repeater-widget https://www.zealousweb.com/wordpress-plugins/repeater-entries-widget/

I noticed both use jquery in their widgets which I guess doesn't work anymore in the newer Wordpress versions?

/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/

public function form($instance)
{
    $max_entries = get_option( 'max_entries' );
    $max_entries = (empty($max_entries)) ? '5' : $max_entries;
    $widget_add_id = $this->id . "-add";
    $title = !empty($instance['title']) ? $instance['title'] : __('Social Repeater Widget', 'srw-widget');
    
    $srw_html = '<p>';
    $srw_html .= '<label for="'.$this->get_field_id('title').'"> '. __( 'Widget Title', 'srw-widget' ) .' :</label>';
    $srw_html .= '<input id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$title.'" />';
    $srw_html .= '<div class="'.$widget_add_id.'-input-containers"><div id="entries">';
    for( $i =0; $i<$max_entries; $i++){
        
        if(isset($instance['block-' . $i]) || isset($instance['social_platform-' . $i]))
        {
            $srw_tab_title = !empty($instance['social_platform-' . $i]) ? $instance['social_platform-' . $i] : __( 'Add Social Profile Details', 'srw-widget' );

            $display = (!isset($instance['block-' . $i]) || ($instance['block-' . $i] == "")) ? 'style="display:none;"' : '';
            $srw_html .= '<div id="entry'.($i+1).'" '.$display.' class="entrys"><span class="entry-title" onclick = "slider(this);"> '.$srw_tab_title.' </span>';
            $srw_html .= '<div class="entry-desc cf">';
            $srw_html .= '<input id="'.$this->get_field_id('block-' . $i ).'" name="'.$this->get_field_name('block-' . $i ).'" type="hidden" value="'.$instance['block-' . $i].'">';

            $social_platform    = esc_attr( $instance['social_platform-' . $i] );
            $social_platform_link    = esc_attr( $instance['social_platform_link-' . $i] );

            $srw_html .= '<p class="last desc">';
            $srw_html .= '<label for="'.$this->get_field_id('social_platform-' . $i).'"> '. __( 'Social Platform', 'srw-widget' ) .' :</label>';
            $srw_html .= '<input class="widefat" id="'.$this->get_field_id('social_platform-' . $i).'" name="'.$this->get_field_name('social_platform-' . $i).'" type="text" value="'.$social_platform.'" placeholder="'.__( 'Enter Social Platform name', 'srw-widget' ).'" />';
            $srw_html .= '</p><p>';
            $srw_html .= '<label for="'.$this->get_field_id('social_platform_link-' . $i).'"> '. __('Social platform Link', 'srw-widget' ) .' :</label>';
            $srw_html .= '<input class="widefat" id="'.$this->get_field_id('social_platform_link-' . $i).'" name="'.$this->get_field_name('social_platform_link-' . $i).'" type="url" value="'.$social_platform_link.'" placeholder="'.__( 'Enter Social Platform Link', 'srw-widget' ).'"/>';
            $srw_html .= '</p>';
            /* end wrapper with delete entry option */
            $srw_html .= '<p><a href="#delete"><span class="delete-row">'. __( 'Delete Row', 'srw-widget' ) .'</span></a></p>';
            $srw_html .= '</div></div>';
        }
    }
    $srw_html .= '</div></div>';
    $srw_html .= '<div id="message">'. __( 'Sorry, you reached to the limit of','srw-widget') .' "'.$max_entries.'" '. __( 'maximum entries', 'srw-widget' ) .'.</div>'  ;
    $srw_html .= '<div class="'.$widget_add_id.'" style="display:none;">' . __('Add New Platform', 'srw-widget') . '</div>';
    ?>
    <script>
      jQuery(document).ready(function(e) {
        jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
            if(jQuery(this).find('input').val() != ''){
                jQuery(this).show();
            }
        });
        jQuery(".<?php echo $widget_add_id; ?>" ).bind('click', function(e) {
            var rows = 0;
            jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
                if(jQuery(this).find('input').val() == ''){
                    jQuery(this).find(".entry-title").addClass("active");
                    jQuery(this).find(".entry-desc").slideDown();
                    jQuery(this).find('input').first().val('0');
                    jQuery(this).show();
                    return false;
                }
                else{
                  rows++;
                  jQuery(this).show();
                  jQuery(this).find(".entry-title").removeClass("active");
                  jQuery(this).find(".entry-desc").slideUp();
                }
            });
            if(rows == '<?php echo $max_entries;?>')
            {
                jQuery("#rew_container #message").show();
            }
        });
        jQuery(".delete-row" ).bind('click', function(e) {
            var count = 1;
            var current = jQuery(this).closest('.entrys').attr('id');
            jQuery.each(jQuery("#entries #"+current+" .entry-desc").children(), function(){
                jQuery(this).val('');
            });
            jQuery.each(jQuery("#entries #"+current+" .entry-desc p").children(), function(){
                jQuery(this).val('');
            });
            jQuery('#entries #'+current+" .entry-title").removeClass('active');
            jQuery('#entries #'+current+" .entry-desc").hide();
            jQuery('#entries #'+current).remove();
            jQuery.each(jQuery(".<?php echo $widget_add_id; ?>-input-containers #entries").children(), function(){
                if(jQuery(this).find('input').val() != ''){
                    jQuery(this).find('input').first().val(count);
                }
                count++;
            });
        });
    });
    </script>
    <style>
        .cf:before, .cf:after { content: ""; display: table; }
        .cf:after { clear: both; }
        .cf { zoom: 1; }
        .clear { clear: both; }
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix { display: inline-block; }
        * html .clearfix { height: 1%; }
        .clearfix { display: block;}

        #rew_container input,select,textarea{ float: right;width: 60%;}
        #rew_container label{width:40%;}
        <?php echo '.'.$widget_add_id; ?>{
        background: #ccc none repeat scroll 0 0;font-weight: bold;margin: 20px 0px 9px;padding: 6px;text-align: center;display:block !important; cursor:pointer;
        }
        .desc{height:55px;}
        #entries{ padding:10px 0 0;}
        #entries .entrys{ padding:0; border:1px solid #e5e5e5; margin:10px 0 0; clear:both;}
        #entries .entrys:first-child{ margin:0;}
        #entries .delete-row{margin-top:20px;float:right;text-decoration: underline;color:red;}
        #entries .entry-title{ display:block; font-size:14px; line-height:18px; font-weight:600; background:#f1f1f1; padding:7px 5px; position:relative;}
        #entries .entry-title:after{ content: '\f140'; font: 400 20px/1 dashicons; position:absolute; right:10px; top:6px; color:#a0a5aa;}
        #entries .entry-title.active:after{ content: '\f142';}
        #entries .entry-desc{ display:none; padding:0 10px 10px; border-top:1px solid #e5e5e5;}
        #rew_container #entries p.last label{ white-space: pre-line; float:left; width:39%;}
        #message{padding:6px;display:none;color:red;font-weight:bold;}
    </style>
    <div id="rew_container">
      <?php echo $srw_html;?>
    </div>
    <?php
}

I'm pretty new to php and wordpress so any help would be appreciated.

Answer 1

Please try the below code to create a repeater field in the widget.

dd_action( 'widgets_init', 'services_widget' );
function services_widget() {
    register_widget( 'services_widget' );
}
 
class services_widget extends WP_Widget {
 
    public function __construct() {
        $widget_ops = array(
            'classname' => 'services_widget',
        'description' => 'Add a service description.'
        );
    $control_ops = array( 'width' => 400, 'height' => 350 );
        parent::__construct( 'services_widget', 'Services', $widget_ops, $control_ops );
    }
    
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title .  $args['after_title'];
        } 
        if( have_rows('service', 'widget_' . $args['widget_id']) ):
        echo '<ul>';
        while ( have_rows('service', 'widget_' . $args['widget_id']) ) : the_row();
        echo '<li class="service one-half">';
        $title = get_sub_field( 'title', 'widget_' . $args['widget_id'] );
        $body = get_sub_field( 'body', 'widget_' . $args['widget_id']);
        $button = get_sub_field( 'button', 'widget_' . $args['widget_id'] );
        $button_link = get_sub_field( 'button_link',  'widget_' . $args['widget_id'] );
        if( $title ) {
        echo '<h4>' . $title . '</h4>';
        } 
        if( $body ) {
        echo '<p>' . $body . '</p>';
        }
        if( $body ) {
        echo '<a class="more" href="' . $button_link . '">' .$button . '</a>';
        }
        echo '</li><div class="clearfix"></div></ul>';
        endwhile;
        endif;
        echo $args['after_widget'];
    }
    
    public function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
        $filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
        $title = sanitize_text_field( $instance['title'] );
        ?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
        <p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        if ( current_user_can( 'unfiltered_html' ) ) {
        $instance['text'] = $new_instance['text'];
        } else {
        $instance['text'] = wp_kses_post( $new_instance['text'] );
        }
        $instance['filter'] = ! empty( $new_instance['filter'] );
        return $instance;
    }
}