Skip to content

Instantly share code, notes, and snippets.

@tomjn
Created January 17, 2014 00:36
Show Gist options
  • Save tomjn/8466299 to your computer and use it in GitHub Desktop.
Save tomjn/8466299 to your computer and use it in GitHub Desktop.
Add this widget and save, and refresh the page. Once you have done this, look at the dropdown in the widget interface, notice how it responds when clicked. Now add a new JS Test Widget, and notice how the UI of the test widget does not respond. Until the page is refreshed or the save button is pressed, the selectize control is inactive. Also not…
<?php
/*
Plugin Name: JS Test Widget
Description: Tests a frustrating issue
Author: Tom J Nowell
Version: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/**
* Adds Foo_Widget widget.
*/
class JS_Foo_Widget extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'foo_widget', // Base ID
__('JS Test Widget', 'text_domain'), // Name
array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
echo __( 'Hello, World!', 'text_domain' );
echo $args['after_widget'];
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'text_domain' );
}
?>
<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>
<select name="testselect" class="testselectize widefat">
<option value="test1">test 1</option>
<option value="test2">test 2</option>
<option value="test3">test 3</option>
<option value="test4">test 4</option>
</select>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // class Foo_Widget
// register Foo_Widget widget
function register_foo_widget() {
register_widget( 'JS_Foo_Widget' );
}
add_action( 'widgets_init', 'register_foo_widget' );
add_action('admin_enqueue_scripts', function() {
wp_enqueue_script( 'selectize', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js', array('jquery') );
wp_enqueue_style( 'selectize', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.css' );
});
add_action( 'admin_footer', function () {
?>
<script>
function runSelect() {
var found = jQuery( 'select.testselectize');
found.each(function( index, value ) {
jQuery(value).selectize();
jQuery(value).removeClass('testselectize').addClass('run-'+window.counter);
console.log(window.counter);
window.counter++;
});
}
jQuery(document).ready( function() {
window.counter = 1;
runSelect();
jQuery( document ).ajaxStop( function() {
runSelect();
} );
});
</script>
<?php
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment