Ok so here's the question how do i stop js from running twice on the widget.php page? I am creating a ajax loaded custom image selector from a domain on the same server as the current site. I want the user to be able to pick an image and populate the fields below with the href to the image description, the title of the image and the image src in it's self, this then posts the results on the front end in the sidebar.
I have registered a custom widget inside of my functions.php, the widget has custom js inside it the code is as follows:
/*
*
*Ajax loaded gallery for sidebar
*Note this will not work cross browser.
*
*
*/
/**
* Plugin Name: A gallery Widget
* Description: A widget that displays an ajax loaded gallery.
* Version: 0.1
*/
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$titlewidget = apply_filters('widget_title', $instance['titlewidget'] );
$introtext = $instance['introtext'];
$title = $instance['title'];
$name = $instance['name'];
$img = $instance['img'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
?>
<?php
if($titlewidget)
?>
<h4 class="widget-title"><?php echo $titlewidget;?></h4>
<?php
if($introtext)
?>
<p> <?php echo $introtext; ?></p>
<div class="row">
<?php
//display gallery img
if ( $img)
?>
<a class="columns four" href="<?php echo $name; ?>">
<img class="imggallery" src="<?php echo $img; ?>">
</a>
<?php
// Display the gallery name and link
if ( $title )
?>
<a class="columns eight imggallery_link" href="<?php echo $name; ?>"><?php echo $title; ?></a>
</div>
<?php
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['titlewidget'] = strip_tags( $new_instance['titlewidget'] );
$instance['introtext'] = strip_tags( $new_instance['introtext'] );
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
$instance['img'] = $new_instance['img'];
return $instance;
}
function form( $instance ) {
//Set up some default widget settings.
$defaults = array( 'title' => __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<script type="text/javascript">
(function($) {
//load on page load
$(".area").load("/galleries/ #projects > li a");
//load on widget title click
$('.widget-top').live("click", function() {
$(".area").load("/galleries/ #projects > li a");
});
//stop default href from working
$('.area a').unbind().live("click", function() {
event.preventDefault();
return;
});
//load into input boxes
$(".area a").live("click", function() {
var title = $(this).attr('title');
$(".title").val(title);
var link = $(this).attr('href');
$(".link").val(link);
var img = $("img", this).attr('src');
$(".img").val(img);
var imgexample = $("img", this).attr('src');
$(".gallery_one").attr("src", imgexample);
});
}(jQuery));
</script>
<style type="text/css">
.area img{
max-width: 100px;
max-height: 100px;
display: inline-block;
}
.area a{
max-width: 100px;
max-height: 100px;
display: inline-block;
}
.gallery_one_image_wrap{
width: 100%;
height: 150px;
}
.gallery_one{
max-width: 80%;
max-height: 150px;
width: 80%;
margin: auto;
padding-left: 10%;
padding-right: 10%;
}
</style>
<script type="text/javascript">
(function($) {
var addDiv = jQuery('.addinput');
var i = jQuery('.addinput p').size() + 1;
jQuery('.addNew').live('click', function() {
jQuery.append('<p><input type="text" class="p_new' + i +'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
i + 1;
return false;
});
jQuery('.remNew').live('click', function() {
if( i > 1 ) {
jQuery(this).parents('p').remove();
i - 1;
}
return false;
});
}(jQuery));
</script>
<h3>Gallery selector for Lundhs</h3>
<p>
<label for="<?php echo $this->get_field_id( 'titlewidget' ); ?>"><?php _e('Widget Title:', 'example'); ?></label>
<input type="text" class="titlewidget" name="<?php echo $this->get_field_name( 'titlewidget' ); ?>" value="<?php echo $instance['titlewidget']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'introtext' ); ?>"><?php _e('Intro text:', 'example'); ?></label>
<input type="text" class="introtext" name="<?php echo $this->get_field_name( 'introtext' ); ?>" value="<?php echo $instance['introtext']; ?>" style="width:100%;" />
</p>
<h4 style="text-align: center;">First Pick your images</a>
<div class="area"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h3>Your current front end projects</h3>
<h4>Reference project one</h4>
<div class="gallery_one_image_wrap">
<img class="gallery_one" src="<?php echo $instance['img']; ?>" /><br/>
</div>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input type="text" class="title" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('The link:', 'example'); ?></label>
<input type="text" class="link" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
//img Input.
<p>
<label for="<?php echo $this->get_field_id( 'img' ); ?>"><?php _e('The Link to the image:', 'example'); ?></label>
<input type="text" class="img" id="<?php echo $this->get_field_id( 'img' ); ?>" name="<?php echo $this->get_field_name( 'img' ); ?>" value="<?php echo $instance['img']; ?>" style="width:100%;" />
</p>
<div class="addinput">
<p>
<a href="#" class="addNew">Add new project</a>
</p>
</div>
<?php
}
}
the problem arises because this js runs twice adding the additional input boxes twice when '.addNew' is clicked.
(function($) {
var addDiv = jQuery('.addinput');
var i = jQuery('.addinput p').size() + 1;
jQuery('.addNew').live('click', function() {
jQuery.append('<p><input type="text" class="p_new' + i +'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
i + 1;
return false;
});
jQuery('.remNew').live('click', function() {
if( i > 1 ) {
jQuery(this).parents('p').remove();
i - 1;
}
return false;
});
}(jQuery));
the latter code runs twice once in the inactive widgets on the left and once in the active widget in the sidebar.
How do i go about forcing the JS to run only in the currently active widget.
Moving the js to a separate .js file and enqueing really isn't an option for me because i am going to have to use php values inside the php to populate and retrive the values in the next step of this build.
Any help is appreciated.
Chris
//UPDATE//
Right i think the function i'm looking for is is_active_widget()
(codex) but I just can't seem to get it to work it still runs the js twice even if i set $skip_inactive to true.
so far I've tried this:
//start gallery widget
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$titlewidget = apply_filters('widget_title', $instance['titlewidget'] );
$introtext = $instance['introtext'];
$title = $instance['title'];
$name = $instance['name'];
$img = $instance['img'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
?>
<?php
if($titlewidget)
?>
<h4 class="widget-title"><?php echo $titlewidget;?></h4>
<?php
if($introtext)
?>
<p> <?php echo $introtext; ?></p>
<div class="row">
<?php
//display gallery img
if ( $img)
?>
<a class="columns four" href="<?php echo $name; ?>">
<img class="imggallery" src="<?php echo $img; ?>">
</a>
<?php
// Display the gallery name and link
if ( $title )
?>
<a class="columns eight imggallery_link" href="<?php echo $name; ?>"><?php echo $title; ?></a>
</div>
<?php
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['titlewidget'] = strip_tags( $new_instance['titlewidget'] );
$instance['introtext'] = strip_tags( $new_instance['introtext'] );
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
$instance['img'] = $new_instance['img'];
return $instance;
}
function form( $instance ) {
if ( is_active_widget( false, false, $this->id_base, true ) ) {?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//load on page load
alert('this is the if!');
});
</script>
<?php
}
else {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Stuff to do as soon as the DOM is ready;
});
</script>
<?php
}
//Set up some default widget settings.
$defaults = array( 'title' => __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults );
wp_localize_script( 'some_handle', 'object_name', $instance );
?>
<h3>Gallery selector for Lundhs</h3>
<p>
<label for="<?php echo $this->get_field_id( 'titlewidget' ); ?>"><?php _e('Widget Title:', 'example'); ?></label>
<input type="text" class="titlewidget" name="<?php echo $this->get_field_name( 'titlewidget' ); ?>" value="<?php echo $instance['titlewidget']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'introtext' ); ?>"><?php _e('Intro text:', 'example'); ?></label>
<input type="text" class="introtext" name="<?php echo $this->get_field_name( 'introtext' ); ?>" value="<?php echo $instance['introtext']; ?>" style="width:100%;" />
</p>
<h4 style="text-align: center;">First Pick your images</a>
<div class="area"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h3>Your current front end projects</h3>
<h4>Reference project 1</h4>
<div class="gallery_one_image_wrap">
<img class="gallery_one" src="<?php echo $instance['img']; ?>" /><br/>
</div>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input type="text" class="title" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('The link:', 'example'); ?></label>
<input type="text" class="link" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
//img Input.
<p>
<label for="<?php echo $this->get_field_id( 'img' ); ?>"><?php _e('The Link to the image:', 'example'); ?></label>
<input type="text" class="img" id="<?php echo $this->get_field_id( 'img' ); ?>" name="<?php echo $this->get_field_name( 'img' ); ?>" value="<?php echo $instance['img']; ?>" style="width:100%;" />
</p>
<div class="addinput">
<p>
<a href="#" class="addNew">Add new project</a>
</p>
</div>
<?php
}
}
I have also tried moving it into the class MY_Widget extends WP_Widget { }
then adding the add_action
.
Like so:
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
}
add_action('widgets_init', 'jsadd');
function jsadd(){
if ( is_active_widget( false, false, 'MY_Widget', true ) ) {?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Stuff to do as soon as the DOM is ready;
alert("we made it this far and this is the If!!");
});
</script>
<?php
}
else {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Stuff to do as soon as the DOM is ready;
alert("we made it this far!!");
});
</script>
<?php
}
}
but still no luck. DOes anybody know what i'm doing wrong here?