WordPress.org

Ready to get started?Download WordPress

Forums

Javascript Show/Hide in widget options (9 posts)

  1. pezholio
    Member
    Posted 3 years ago #

    Hi,

    I'm putting together a widget, and am struggling to show/hide elements when clicking on an radio button using jQuery. Here's my code:

    <p><label for="postcode">Postcode</label> <input type="radio" name="type" onclick="jQuery('#postcodepanel').toggle()" value="postcode" /></p>
    <p><label for="postcode">Local Authority</label> <input type="radio" name="type" onclick="jQuery('#authoritypanel').toggle()" value="authority" /></p>
    <div id="postcodepanel" style="display:block;">
    Postcode panel stuff here
    </div>
    <div id="authoritypanel" style="display:block;">
    Authority panel stuff here
    </div>

    I've tried using jQuery and vanilla Javascript and nothing seems to work. I've enabled Firebug and I don't get any errors. If I change the onlick to do an alert() it works fine, so it's not an issue with JS per se. Any ideas?

  2. Taylor Dewey
    Member
    Posted 3 years ago #

    I'm not a jQuery expert, but from what I know jQuery should't really be implemented within onClick.

    Try moving your code outside of onClick into a <script type="text/javascript"></script> block. For example:

    <script type="text/javascript">
    jQuery(document).ready(function($){
    
    $('#localauthorityradiobuttonid').click(function(){
       $('#authoritypanel').show();
      },function(){
       $('#authoritypanel').hide();
      });
    });
    </script>

    Be sure to define an ID or class for your radio buttons in order to easily access them with jQuery.

  3. pezholio
    Member
    Posted 3 years ago #

    Yeah, admittedly I was being a bit lazy there doing an onclick! Just wanted to get it working first, and then tidy up later.

    Doing it properly still doesn't seem to work, even if I just try an alert and again, I don't see any errors in Firebug??!

  4. pezholio
    Member
    Posted 3 years ago #

    On reflection, my problem looks very much related to this:

    http://wordpress.org/support/topic/289414?replies=1

    Although there are no replies - seems like it's been an issue since 2.8. Anyone know whey the WP team would put this 'feature' in?

  5. Taylor Dewey
    Member
    Posted 3 years ago #

    I just threw this code up into my development blog (granted, it's WP 3.0) without issue -- I used this js code:

    <script type="text/javascript">
    jQuery(document).ready(function($){
    
    $('#postcodebutton').click(function(){
       $('#postcodepanel').toggle();
    	});
    
    $('#authoritycodebutton').click(function(){
       $('#postcodepanel').toggle();
    	});
    
    });
    </script>
    • Be sure jQuery is being loaded. You should be using wp_enqueue_script('jquery'); and calling it before wp_head();. Check to make sure it's loaded and not giving a 404 error using Firebug or similar tool.`
    • Be sure your code is wrapped in jQuery(document).ready(function($){ to avoid conflicts and allow you to use the $
  6. pezholio
    Member
    Posted 3 years ago #

    Thanks, but that's still not working for me. I probably didn't make it clear that this is in widget options in the backend, rather than on the main frontend of the site, so using wp_enqueue_script('jquery') before wp_head isn't an option unfortunately. I've also set up an alert that runs onload, which actually runs twice, could that have something to do with it?

    I've put my code in a Gist here to give you more of an idea of what I want to achieve:

    https://gist.github.com/896f11d7ca928681a253

    Thanks a lot for your help so far :)

  7. Taylor Dewey
    Member
    Posted 3 years ago #

    Phew. Not sure why the jquery selectors we were using before didn't work within the context of a widget, but here's how I ended up getting it to work:

    <script type="text/javascript">
    
    	jQuery(document).ready(function($) {
    
    	$('input[id=postcodebutton]').click(function(){
    		alert('postcodebutton');
    	});
    
    	$('input[id=authoritybutton]').click(function(){
    		alert('authoritybutton');
    	});	
    
    	});
    	</script>

    Note that I also ran this code within the <head> tags by echoing it within a function and hooking the function to admin_head.
    add_action("admin_head", "pa_script");

  8. pezholio
    Member
    Posted 3 years ago #

    Ah, seems like I've nailed it. I changed the IDs to classes and, presto changeo, it worked! Thanks for the pointers!

  9. Taylor Dewey
    Member
    Posted 3 years ago #

    No problem, glad it was able to get figured out.

Topic Closed

This topic has been closed to new replies.

About this Topic