Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
15
rated 0 times [  20] [ 5]  / answers: 1 / hits: 26333  / 12 Years ago, thu, december 13, 2012, 12:00:00

I'm busy with building my own Wordpress Widget. Everything works fine except for the Wordpress media up loader.
I have created eight buttons and eight input text fields which should contain the url of the image that has been uploaded.



The click event is not being fired, probably because Wordpress outputs the HTML twice(Once in the bar of the available widgets and once in the bar currently active widgets).



Does anybody sees what I'm doing wrong?



Below you find my code.



Thanks in advance for the help!



<?php
/*
Plugin Name: Home_Rollover_Widget
Plugin URI:
Description: Home Rollover Widget
Version: 1.0
Author:
Author URI:
*/

// Initialize widget
add_action('widgets_init', array('Home_Rollover_Widget', 'register'));

/**
* Home_Rollover_Widget
*
* @package
* @author
* @copyright 2012
* @version $Id$
* @access public
*/
class Home_Rollover_Widget extends WP_Widget
{
/**
* __construct()
*
* @return void
*/
public function __construct()
{
parent::__construct('home-rollover-widget');
}
/**
* control()
*
* @return void
*/
public function control()
{
// Load upload an thickbox script
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');

// Load thickbox CSS
wp_enqueue_style('thickbox');

// Load all widget options
$data = get_option('Home_Rollover_Widget');
?>

<!-- Widget title -->
<p><label>Titel<input name=home_rollover_widget_title type=text value=<?php echo $data['home_rollover_widget_title']; ?> /></label></p>

<?php
// If there's a title provided, update it.
if (isset($_POST['home_rollover_widget_title'])){
$data['home_rollover_widget_title'] = attribute_escape($_POST['home_rollover_widget_title']);
}

// Show 8 input groups for image URL and text
for ($i = 1; $i <= 8; ++$i)
{
?>

<p><a href=# id=upload-button-<?php echo $i; ?>>UPLOAD IMAGE</a></p>
<p><label>IMAGE <?php echo $i; ?><input id=home_rollover_widget_image_url_<?php echo $i; ?> name=home_rollover_widget_image_url_<?php echo $i; ?> type=text value=<?php echo $data['home_rollover_widget_image_url_'.$i]; ?> /></label></p>
<p><label>TEXT <?php echo $i; ?><input name=home_rollover_widget_text_<?php echo $i; ?> type=text value=<?php echo $data['home_rollover_widget_text_'.$i]; ?> /></label></p>
<?php
// If there's an URL provided, update it.
if (isset($_POST['home_rollover_widget_image_url_'.$i])){
$data['home_rollover_widget_image_url_1'] = attribute_escape($_POST['home_rollover_widget_image_url_'.$i]);
}

// if there's a text provided, update it.
if (isset($_POST['home_rollover_widget_text_'.$i])) {
$data['home_rollover_widget_text_1'] = attribute_escape($_POST['home_rollover_widget_text_'.$i]);
}

?>

<script type=text/javascript>
var formField = '';
var imgUrl ='';

jQuery(document).ready(function() {
jQuery('#upload-button-<?php echo $i; ?>').click(function() {
alert('Clicked on upload button');
formField = jQuery('#upload-button-<?php echo $i; ?>').attr('name');
tb_show('', 'media-upload.php?type=image&amp&TB_iframe=1');
return false;
});

// send url back to plugin editor
window.send_to_editor = function(html) {
imgUrl = jQuery('img',html).attr('src');
alert('Sending image url'+imgUrl+' to text field');
jQuery('#home_rollover_widget_image_url_<?php echo $i; ?>').val(imgUrl);
tb_remove();
}
});
</script>

<hr />

<?php
}

// Update widget data
update_option('Home_Rollover_Widget', $data);
}

/**
* widget()
*
* @param mixed $args
* @return void
*/
function widget($args)
{
// Load all widget options
$data = get_option('Home_Rollover_Widget');
?>

<h4><?php echo $data['home_rollover_widget_title']; ?></h4>

<div id=all>
<?php
// Loop though the widget elements
for ($i = 1; $i <= 8; ++$i)
{
// Find image URL
$imageUrl = $data['home_rollover_widget_image_url_'.$i];

// Check for first slash, if not present, add it.
if (substr($imageUrl, 0, 1) != '/') {
$imageUrl = '/'.$imageUrl;
}
?>
<ul>
<li><a href=#><img src=<?php echo get_template_directory_uri(); ?><?php echo $imageUrl; ?> /><h4><?php echo $data['home_rollover_widget_text_'.$i]; ?></h4></a></li>
</ul>
<?php
}
?>
</div>
<?php
}

/**
* register()
*
* @return void
*/
function register()
{
// Register for sidebar
register_sidebar_widget('Home Rollover Widget', array('Home_Rollover_Widget', 'widget'));

// Register for control panel
register_widget_control('Home Rollover Widget', array('Home_Rollover_Widget', 'control'));
}
}

More From » html

 Answers
5

I have simplified the widget a little for this example, removing the for loop as I think you could just create new instances of the widget. This also allows the added benefit of sorting the items. I moved the js to another file as there's no need to repeat the code.



The widget class



class Home_Rollover_Widget extends WP_Widget
{

public function __construct()
{
parent::__construct(
'home-rollover-widget',
'Home Rollover Widget',
array(
'description' => 'Home rollover widget'
)
);
}

public function widget( $args, $instance )
{
// basic output just for this example
echo '<a href=#>
<img src='.esc_url($instance['image_uri']).' />
<h4>'.esc_html($instance['image_uri']).'</h4>
</a>';
}

public function form( $instance )
{
// removed the for loop, you can create new instances of the widget instead
?>
<p>
<label for=<?php echo $this->get_field_id('text'); ?>>Text</label><br />
<input type=text name=<?php echo $this->get_field_name('text'); ?> id=<?php echo $this->get_field_id('text'); ?> value=<?php echo $instance['text']; ?> class=widefat />
</p>
<p>
<label for=<?php echo $this->get_field_id('image_uri'); ?>>Image</label><br />
<input type=text class=img name=<?php echo $this->get_field_name('image_uri'); ?> id=<?php echo $this->get_field_id('image_uri'); ?> value=<?php echo $instance['image_uri']; ?> />
<input type=button class=select-img value=Select Image />
</p>
<?php
}


}
// end class

// init the widget
add_action( 'widgets_init', create_function('', 'return register_widget(Home_Rollover_Widget);') );

// queue up the necessary js
function hrw_enqueue()
{
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
// moved the js to an external file, you may want to change the path
wp_enqueue_script('hrw', '/wp-content/plugins/home-rollover-widget/script.js', null, null, true);
}
add_action('admin_enqueue_scripts', 'hrw_enqueue');


New js file: use the .on() method instead of .click() to attach the event handler.



var image_field;
jQuery(function($){
$(document).on('click', 'input.select-img', function(evt){
image_field = $(this).siblings('.img');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = $('img', html).attr('src');
image_field.val(imgurl);
tb_remove();
}
});

[#81440] Wednesday, December 12, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dayshadelaniej

Total Points: 668
Total Questions: 121
Total Answers: 121

Location: Sao Tome and Principe
Member since Wed, Dec 21, 2022
1 Year ago
;