Repeater Fields in Widget Form Function in Wordpress - 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><span class="delete-row">'. __( 'Delete Row', 'srw-widget' ) .'</span></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 ); ?> /> <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;
}
}