Created
January 17, 2014 00:36
-
-
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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
See the solution here: http://wordpress.stackexchange.com/questions/130084/executing-javascript-when-a-widget-is-added-in-the-backend/130136?noredirect=1#130136