Help Adding a Form with Blue Button to Media Uploader with media_upload_tabs

  • If anyone can help, I would greatly appreciate it. I have added a new link to the left side of the media uploader popup with media_upload_tabs(). What I need help with is adding the blue button that shows at the bottom right of the media screen for this new custom HTML screen of mine.

    I have this code so far that works:

    function fancy_title_tab($tabs) {
    $newtab = array( 
        'fancy_title'   =>  'Fancy Title',
    );

    return array_merge( $tabs, $newtab );
}

add_filter('media_upload_tabs', 'fancy_title_tab'); 

function custom_media_upload_fancy_title() {
    $html = ('
        <form>
            <input id="shortcode-fancy-title" value="ok" style="width:100%; padding:5px;" type="text">
        </form>
    ');

    echo $html;
}

add_action( 'media_upload_fancy_title', 'custom_media_upload_fancy_title' );

    This code works well and shows my form when someone clicks on Fancy Title.

    What I need help with is how to add the blue button on the bottom right-hand corner like you see on the media tab “Insert Into Post”. Also, when someone types a value into the textbox, how do we access it from the iframe? jQuery?

    I cannot find a tutorial on the web that is completely written to include this.

    Thank you,
    Bruce

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter hotwebideas

    (@hotwebideas)

    Nobody has an answer to this?

    Moderator bcworkz

    (@bcworkz)

    A partial answer perhaps. I was holding off replying, hoping someone would have a better answer. Once someone replies to a topic, including the OP, the topic falls off the “No Replies” list that most of the experts here use to find people to help. You don’t want that to happen unless you’re getting an answer. Currently, topics do not float back to the top of the list with a recent reply, so there is no advantage and a big disadvantage to “bumping” your topic. Just so ya know ??

    Of course adding the button is easy enough, getting it to do what you want is the challenge. You could use JavaScript to do so, though jQuery would be easier, and the main library is loaded on the page anyway, so you may as well use it. Altering the textarea is well documented. If it is the view currently visible, there may be an existing script that updates the iframe to the current textarea content when the view is switched. But if it’s the current view, I’m not quite sure how to access the iframe content.

    You should be able to walk the DOM down from the iframe element. Its child is essentially another document, though I don’t think document applies. But the immediate child is < html>, which contains head and body elements, and the body content should match the textarea. So just navigating child nodes should get you there. Or simply the ID “tinymce” should do it, though it may not be part of the real document but of the iframe’s child. One of these ways of access should work.

    Thread Starter hotwebideas

    (@hotwebideas)

    Thanks, BCWorkz. I will try it.

    Thread Starter hotwebideas

    (@hotwebideas)

    bcworkz, this is still not working. I am having issues accessing content with the media_upload_tabs hook with jQuery. I have no trouble accessing HTML elements in the DOM outside of the iframe that the media frame creates.

    This is my simple code which I found online, but the people who write these do not complete the tutorial. Most of the help on sites like stackoverflow, etc seem to just stop in the middle when it comes to this subject:

    
// add the tab
function my_upload_tab($tabs) {
    $tabs['mytabname'] = "Iframe";
    return $tabs;
}

// call the new tab with wp_iframe
function add_my_new_form() {
    wp_iframe( 'iframe_form' );
}

// the tab content
function iframe_form() {
    echo media_upload_header(); 
    echo '<input id="iframe-content" type="text" />';
    echo '<input id="btnSaveMedia" value="Save" type="submit" />';
}
add_filter( 'media_upload_tabs', 'my_upload_tab');
add_action('media_upload_mytabname', 'add_my_new_form');

    In Inspect Element in Google, I see the HTML:

    
<div class="media-frame-content" data-columns="8"><div class="media-iframe"><iframe src="https://rockettes.loc/wp-admin/media-upload.php?chromeless=1&post_id=10891&tab=mytabname"></iframe></div></div>

    Under this iframe that is generated by the media frame, I have a form element <input id=”iframe-content” type=”text” value=”today”><input id=”iframe-submit” type=”submit”>

    Using jQuery, how can I access this form element #iframe-content? I have tried several techniques in jQuery and cannot access it no matter what I try. I have even tried `var $iframe = $(“#iframeID”).contents();
    $iframe.find(‘#iframe-content’);`

    with no luck. I just get no value, even though the default value is “today”.

    Thanks for your help.
    Bruce

    Moderator bcworkz

    (@bcworkz)

    AFAIK the contents().find() sequence is correct, but you do need to get the selectors right. I’m not seeing anything like an iframe ID of “iframeID”. If the iframe is the only one in the DOM, I’d think something like $("iframe")contents().find("#iframe-content"); would work. If there’s other iframes, perhaps a selector like “.media-frame-content > iframe”, assuming that media-frame-content is the only occurrence of that class.

    I’m rather weak with jQuery I’m afraid, but the point is getting the selectors right should do it. The one thing that could be standing in your way is the iframe content has not yet been loaded at the time your script runs. You may need to bind your script to some action/event so it doesn’t run until there’s something to get. Unfortunately, I’ve no idea what that action might be. It’ll help if you take measures to ensure your script loads and runs last, but that may not be enough.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Help Adding a Form with Blue Button to Media Uploader with media_upload_tabs’ is closed to new replies.