Adding AJAX to sidebar widget

  • Resolved David Gard

    (@duck_boy)


    14 years, 3 months ago

    Hey all,

    More of a coding question than a WP question, but just wondering if someone happens to know the answer –

    I have a sidebar widget that gives people 3 options, and if they click the top option (multiple testimonials to be listed) then I’d like for a box unerneith that to be visible, but if one of the other 2 options are secected I’d like for the box to disappear.

    Here is the code – 

    <p>
	<label for="<?php echo $this->get_field_id('style_list'); ?>">
		<input class="" id="<?php echo $this->get_field_id('style_list'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_list" <?php if($testimonials_style === 'style_list'){ echo 'checked="checked"'; } ?> />
		<?php _e('List style (Multiple)'); ?>
	</label><br />
	<label for="<?php echo $this->get_field_id('numposts'); ?>">
		<?php _e('Display this many testimonials:'); ?>
		<input class="widefat" id="<?php echo $this->get_field_id('numposts'); ?>" name="<?php echo $this->get_field_name('numposts'); ?>" type="text" value="<?php echo $numposts; ?>" />
	</label><br />
	<label for="<?php echo $this->get_field_id('style_sidebar'); ?>">
		<input class="" id="<?php echo $this->get_field_id('style_sidebar'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_sidebar" <?php if($testimonials_style === 'style_sidebar'){ echo 'checked="checked"'; } ?> />
		<?php _e('Sidebar style (Single)'); ?>
	</label><br />
	<label for="<?php echo $this->get_field_id('style_box'); ?>">
		<input class="" id="<?php echo $this->get_field_id('style_box'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_box" <?php if($testimonials_style === 'style_box'){ echo 'checked="checked"'; } ?> />
		<?php _e('Box style (Single)'); ?>
	</label>
</p>

    I realise it’ not really WP but would be very appricative if anyone here happens to be a guru on this.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, I do a very similar piece of logic in my own widgets. The only difference is that i disable the fields instead of hiding them but the general principles should work. Here is the javascript code I have outputted with each widget instance.

    <script type="text/javascript">
    if( window.changeAmazonWidgetCarousel ) {

    } else {
        function changeAmazonWidgetCarousel( id, asin_id, keywords_id, node_id, index_id ) {
            var value = jQuery( "#" + id ).val();
            if( value == "ASINList" ) {
                jQuery( "#" + asin_id ).removeAttr('disabled');
                jQuery( "#" + keywords_id ).attr('disabled','disabled');
                jQuery( "#" + node_id ).attr('disabled','disabled');
                jQuery( "#" + index_id ).attr('disabled','disabled');
            } else if ( value == "SearchAndAdd" ) {
                jQuery( "#" + asin_id ).attr('disabled','disabled');
                jQuery( "#" + keywords_id ).removeAttr('disabled');
                jQuery( "#" + node_id ).removeAttr('disabled');
                jQuery( "#" + index_id ).removeAttr('disabled');
            } else {
                jQuery( "#" + asin_id ).attr('disabled','disabled');
                jQuery( "#" + keywords_id ).attr('disabled','disabled');
                jQuery( "#" + node_id ).removeAttr('disabled');
                jQuery( "#" + index_id ).removeAttr('disabled');
            }
        }
    }
    jQuery( "#<?php echo $this->get_field_id('widgetType');?>").change();
</script>

    In the javascript it has a check first to see if the function is defined and if it isn’t then it defines the function.
    As for the actual form part I attach the function call to the onchange method of the field that will cause the javascript to run.

    onchange=\" changeAmazonWidgetCarousel( '" . $this->get_field_id('widgetType') . "', '" . $this->get_field_id('ASIN') . "', '" . $this->get_field_id('keywords') . "', '" . $this->get_field_id('browseNode') . "', '" . $this->get_field_id('searchIndex') . "' )\"

    Let me know if you need more details but the basics are that you need to pass the field ids to the function and then using jQuery or your preferred javascript library you can modify them however you want.

    P.S. this isn’t AJAX it’s simply javascript

    Thread Starter David Gard

    (@duck_boy)

    Thanks for the example code. I think I’m pretty much where I want to be now, so very happy.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding AJAX to sidebar widget’ is closed to new replies.