0

I'm trying to add this code to one of my widgets form, but it doesn't work.

<script type="text/javascript">
$(document).ready(function() {
     $('#select').change(function() {
         $("#" + this.value).show().siblings().hide();
     });
     $("#select").change();
 });
</script>

<select class="widefat" id="select">
    <option value="ad1">ad1</option>
    <option value="ad2">ad2</option>
    <option value="ad3">ad3</option>
</select>

<div>
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
<div id="ad3">ad3</div>
</div>

The code should display/hide divs with ids (ad1, ad2, ad3) based on current option selection, but it doesn't do the job on widgets page. Looks like there's something wrong with calling jQuery in the widgets page.

1
  • 2
    Please, post the code in the question itself and describe what "not working" means: for example, do you see any error message in the debug log?
    – cybmeta
    Jan 28, 2015 at 16:50

1 Answer 1

3

The reason this probably doesn't work is because Wordpress uses noConflict() mode. From The Codex:

The jQuery library included with WordPress is set to the noConflict() mode ( see wp-includes/js/jquery/jquery.js ). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available

What you'll need to do is something like this:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#select').change(function() {
             $("#" + this.value).show().siblings().hide();
        });
        $("#select").change();
    });
</script>

This line: jQuery(document).ready(function($) { tells JQuery to use the $ alias so that you can continue writing JQuery like you're used to seeing.


JQuery is not my strong-suit. I was able to get it working though, try this:

function form() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('select#select').change( function() {
                    $( '#hide_show div' ).css('display', 'none');
                    $( '#hide_show #' + this.value ).css('display', 'block');
                });
            });
        </script>

        <style type="text/css">
            #hide_show div  {display: none;}
        </style>
         
        <select class="widefat" id="select">
            <option value="ad1">ad1</option>
            <option value="ad2">ad2</option>
            <option value="ad3">ad3</option>
        </select>
         
        <div id="hide_show">
            <div id="ad1">ad1</div>
            <div id="ad2">ad2</div>
            <div id="ad3">ad3</div>
        </div>
    <?php
}
10
  • Still not working, you can try it yourself: pastebin.com/sFWi5XRU
    – Ahmed Saad
    Jan 28, 2015 at 18:30
  • 1
    Do you have any errors in your javascript debug console? Google Chrome, Firefox. I would also view the source of your page to ensure that JQuery is being included into your page.
    – Howdy_McGee
    Jan 28, 2015 at 18:51
  • I don't see any errors. Could you please try it yourself? Paste the code in the link above in any theme you have, then go to widgets page and try it.
    – Ahmed Saad
    Jan 28, 2015 at 20:34
  • 1
    I just copy and pasted my edit into my WordPress which is pretty vanilla and I didn't have a problem with it. You may be cached, here's the whole pastebin. If that doesn't work you'll need to add antoher pastebin with the modified code.
    – Howdy_McGee
    Jan 28, 2015 at 22:04
  • 1
    This is great! It worked now! I just had to add the container div to the selector for it to work. So instead of $("#" + this.value).show().siblings().hide();, it should be $(".container #" + this.value).show().siblings().hide();. Thanks so much for your help. You rock!
    – Ahmed Saad
    Jan 28, 2015 at 22:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.