How to select a drop-down menu item with jQuery, in a WordPress image gallery?

2 Views

First, see screenshot to see what I’m trying to select:

enter image description here

Read More

In WordPress, when I click New Post, then the Add Media button, on the popup image gallery there’s the image filtering drop-down menu; I want to automatically select. the “Unattached” item when that popup loads.

I’m having trouble getting this to happen. So far, in my theme’s functions.php I have a call to the .js file with the jQuery code in it. 

function my_custom_scripts() {
    wp_enqueue_script( 'my-custom', THEMATER_URL . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Then in the .js file I have: 

jQuery(document).ready(function($) {
    $('#media-attachment-filters').prop('selectedIndex', 6); // select 5th option
});

But nothing happens. What am I missing?

Update:

Based on Christian Nguyen’s code, I did get it to select the item I wanted, however, it’s not actually sorting the image gallery based on that selection, so it’s functionally just ‘highlighting’ the item. My guess is it’s not triggering some OnClick/OnSelect event. I tried adding .trigger('change'), but still no joy. Does anyone also know how to get it to actually do so?

So far, I have this code, note that ALL of the commented out items WILL select the item, just no actual “selection” triggered to do the sorting. 

/* When Insert Media button gets clicked ... */
$("#insert-media-button").on('click', function() {

     // Set a 'delay' of 0, & then call the function that selects the menu item.
     // NOTE: Skipping the setTimeout, & just directly call the selector doesn't work.
    setTimeout(function() {

        /* BUG: All 4 of the following WILL select the "Unattached" drop-down item,
                        However, ALL pics still get loaded, instead of JUST the UNATTACHED
                        pics, which is what we want.
        */
        //$('#media-attachment-filters').attr('selected', 'selected').trigger('change');
        //$('#media-attachment-filters').val('unattached');
        //$('#media-attachment-filters').prop('selectedIndex', 5);
        //$('#media-attachment-filters>option:eq(5)').prop('selected', true);
    }, 0);
});

Another thing of NOTE: in my case, the .js also wasn’t being called at all in the admin area because I mistakenly only enqueued it for the front-end, I had to use admin_enqueue_scripts to get the .js to load in the admin area (back end) where the action is actually happening.

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. I have a temporary solution:

    jQuery(document).ready(function($) {
    $("#insert-media-button").on('click', function() {
        setTimeout(function() {
            $('#media-attachment-filters').val('unattached');
        }, 0);
    });
});

  2. You should be able to do this with the .val() function if you have an associated value on your <option> elements. An example may include…

    <button id="insert-media-button">Insert</button>

<select id="media-attachment-filters">
    <option value="1">All media items</option>
    <option value="2">Uploaded to this post</option>
    <option value="3">Images</option>
    <option value="4">Audio</option>
    <option value="5">Video</option>
    <option value="6">Unattached</option>
</select>

    $(function() {
    $('#insert-media-button').on('click', function() {
        $('#media-attachment-filters').val(6); // selects Unattached
    });
});

    JSFiddle Link

  3. In this question you can find 2 solutions to do what you want and a tip to remove the list options that you doesn’t want.

    The firsts works on admin_footer-post-new.php and admin_footer-post.php hook action and trigger the change event to the right options inside jquery ajaxStop() function on $('#wpcontent'). This solutions load all the images, so the first time is slow than the other.

    The seconds on admin_enqueue_scripts hook action, the same jquery event but use wp.media.view.MediaFrame.Post to prevent to load all the image.
    This solutions is faster but have some that it’s easy to workaround.

  4. OK, looks like I’ve got it figured out; it needed .change() appended to the end, and I’ve also increased the setTimeout() from 0 to 10. Depending on how fast/slow your own server is, you may want to play around with increasing/decreasing that value. Essentially it’s meant to give the initial image loading a bit of time to ‘load’ before calling the jQuery.

    Here’s my final working code. Thanks again to Christian Nguyen for 99% of the code:

    jQuery(document).ready(function($) {

/*  When the image gallery loads after clicking New Post | Insert Image, auto-select
 *  the "Unattached" menu item from the drop-down menu.
 */

/* When Insert Media button gets clicked ... */
$("#insert-media-button").on('click', function() {

     // Set a 'delay' of 10, & then call the function that selects the menu item.
     // NOTE: Skipping the setTimeout, & just directly call the selector doesn't work.
    setTimeout(function() {
        $('#media-attachment-filters').val('unattached').change();
true);
    }, 10);
  });
});