Using WordPress Media Upload on multiple buttons?

2 Views

Follows the HTML button and text field: 

<div class="meta-container">
    <div class="label col-2 left">
        <label class="squeeze-label">Imagem Logo:</label>
    </div>
    <div class="col-6">
        <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemLogo]" value="<?php echo $this->data['imagemLogo']; ?>" />
        <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
        <a id="remover_imagem_logo" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
        <p class="description">Imagem que ficará acima da headline.</p>
    </div>
</div>

<div class="meta-container">
    <div class="label col-2 left">
        <label class="squeeze-label">Imagem Background:</label>
    </div>
    <div class="col-6">
        <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemBackground]" value="<?php echo $this->data['imagemBackground']; ?>" />
        <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
        <a id="remover_imagem_background" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
        <p class="description">Imagem que ficará no fundo da página. Por padrão será feito upload de uma nova imagem para o WordPress, caso necessite será possível informar um link externo.</p>
    </div>
</div>

And below follows javascript to make button class “definir_imagem_button” open the native wordpress media uploader and insert the selected image URL in their respective text field class “definir_imagem_url”:

Read More
$('.definir_imagem_button').click(function(e) 
{
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: {
            text: 'Definir Imagem'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })

    .on('select', function() 
    {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.definir_imagem_url').val(attachment.url);
    })

    .open();

});

The problem is that the line $('.definir_imagem_url').val(attachment.url); assigns the value for all fields of the class and I need the value to be added only to text field of the respective button that was clicked. What better way to do this?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. If you know that your HTML structure will be the same for every button, you can capture which button was clicked and use that to find the nearest .definir_imagem_url input.

    $('.definir_imagem_button').click(function(e) {
    e.preventDefault();
    var btnClicked = $( this );
    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: {
            text: 'Definir Imagem'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $( btnClicked ).parent().children( '.definir_imagem_url' ).val( attachment.url );
    })
    .open();
});