Add / Update Custom Fields After Select Pictures in Media Window (Wordpress)

Question

I have a question about wordpress, I just added a button called Add Slider in Add/Edit Post Page. here's my code in my function.php :

//Add button to create slider
add_action('media_buttons','add_my_media_button',15);

function add_my_media_button(){
    echo '<a href="#" id="insert-my-media" class="button">Add Slider</a>';
}

function include_media_button_js_file(){
    wp_enqueue_script('media_button',get_bloginfo('template_directory').'/js/media_button.js',array('jquery'),'1.0',true);
}

add_action('wp_enqueue_media','include_media_button_js_file');

and this my media_button.js code

jQuery(function($){
$(document).ready(function(){
    $('#insert-my-media').click(open_media_window);
})

function open_media_window(){
    if (this.window === undefined) {
        this.window = wp.media({
            title: 'Insert a media',
            library: {type:'image'},
            multiple: true,
            button: {text:'Insert'}
        });

        var self = this; //needed to retrieve the function below
        this.window.on('select',function(){
            var files = self.window.state().get('selection').toArray();
            var values;
            for (var i = 0; i < files.length; i++) {
                var file = files[i].toJSON();
                if(values===undefined){
                    var values = file.url;
                }
                else{
                    var values = values+','+file.url;
                }
            };
            wp.media.editor.insert(values);
        });
    }

    this.window.open();
    return false;   
}
});

after user select the pictures in media window and press Insert button it will add url value of pictures to content editor post box.

My question is how to add this value automatically on custom fields box and add/update that automatically without click add custom field button.

So user can add / update custom fields for that pictures url without view/ check custom fields to view in post editor on Screen Options in wordpress.

Please help me for this question, Thanks.

Answer 1

I modify my jquery / js like this..

$(document).ready(function(){
    // $('#insert-my-media').click(open_media_window);
    if($('#images_id').val() != '' && $('#images_url').val() != ''){
        $('#open_media').text("Edit Slider");
    }
    $('#open_media').click(function(e){
        e.preventDefault();
        var target = $('#images_id');
        var target_url = $('#images_url');
        var btnSave = $('#publishing-action input.button');

        if(target.val() == '' && target_url.val() == ''){

            var wpmedia = wp.media({
                title: 'Insert a media',
                library: {type:'image'},
                multiple: true,
                button: {text:'Insert'}
            });

            wpmedia.on('select', function(){
                var ids = [];
                var urls = [];
                var models =  wpmedia.state().get('selection').toArray();
                for (var i = 0; i < models.length; i++) {
                    var file = models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Adding...");
                btnSave.click();
            });
            wpmedia.open();
        }else{
            wp.media.gallery
            .edit('[gallery ids="'+ target.val() +'" urls="'+ target_url.val() +'"]')
            .on('update', function(g){
                var ids = [];
                var urls = [];
                for (var i = 0; i < g.models.length; i++) {
                    var file = g.models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Editing...");
                btnSave.click();
            });
        }

    });

    $('#save_desc').click(function(e){
        e.preventDefault();
        var target = $('#desc_editor');
        var btnSave = $('#publishing-action input.button');         
                target.val(target.val());
                btnSave.click();
    });

    $('#delete_slider').click(function(e){
        e.preventDefault();
        /*var target = $('#images_id');
        var target_url = $('#images_url');*/
        var btnSave = $('#publishing-action input.button'); 
            /*target.val("");
            target_url.val("");*/
            $('#deleting_slider').val("Deleting...");
            $('#delete_slider').text("Deleting...");
            btnSave.click();
    });

    });

and then I make file called metabox.php to create metabox

<?php


function koplan_add_metabox(){
add_meta_box(
        'koplan_metabox_gallery',
        'Slider Gallery',
        'koplan_show_metabox',
        'post'
);
}
function koplan_add_maps_metabox(){
    add_meta_box(
            'koplan_metabox_maps',
        'Maps Descriptions',
        'koplan_show_maps_metabox',
        'post'
);
}
function koplan_show_metabox($post){
$ids = get_post_meta($post->ID, 'gallery_images', true);
$urls = get_post_meta($post->ID,'images',true); 
?>
<a href="#" id="open_media" class="button">Add Slider</a>
<hr>
<input type="hidden" name="gallery_images" id="images_id" value="<?php echo $ids; ?>">
<input type="hidden" name="gallery_urls" id="images_url" value="<?php echo $urls; ?>">
<input type="hidden" name="deleting_slider_post_meta" id="deleting_slider" value="<?php echo $urls; ?>">
<?php

    if($ids=="" and  $urls==""){
       return;
    }
    else{
        echo do_shortcode('[gallery ids="'.$ids.'" urls="'.$urls.'"]');
    }
?>
<hr>
<a href="#" id="delete_slider" name="delete_slider_post_meta" class="button">Delete Slider</a>
<?php
}

function koplan_save_gallery_metabox($post_id){
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
}

    if(! isset($_POST['gallery_images']) && !isset($_POST['gallery_urls'])){
        return;
    }

    $ids = sanitize_text_field( $_POST['gallery_images'] );
    $urls = sanitize_text_field( $_POST['gallery_urls'] );

    $terms = wp_get_object_terms( $post_id, 'category', array( 'fields' => 'names' ) );
        /*$termsname = $terms[0]->name;*/
        if(strlen($terms[1]) > strlen($terms[0])){
            $term = $terms[1];
        }
        else{
            $term = $terms[0];  
        }

    $sldata = '<slider images="'.$term.'" />';
    update_post_meta($post_id, 'slider', $sldata);
    update_post_meta($post_id, 'gallery_images', $ids);
    update_post_meta($post_id, 'images', $urls);

    if(isset($_POST['deleting_slider_post_meta']) && $_POST['deleting_slider_post_meta'] != ""){
        delete_post_meta($post_id, 'slider', $sldata);
        delete_post_meta($post_id, 'gallery_images', $ids);
        delete_post_meta($post_id, 'images', $urls);
    }
    }

function koplan_show_maps_metabox($post){
    $desc = get_post_meta($post->ID,'mapsdesc',true);
    if($desc!=""){
?>
    <textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"><?php echo $desc; ?></textarea>
<?php
}else{
?>
<textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"></textarea>
<?php
}
?>  
<hr>
<a href="#" class="button" id="save_desc">Save</a>
<?php
}

function koplan_save_maps_desc_metabox($post_id){
if (define('DOING_AUTOSAVE') && DOING_AUTOSAVE){
    return;
}
if(!isset($_POST['maps_descriptions'])){
    return;
}
$desc = $_POST['maps_descriptions'];
update_post_meta($post_id,'mapsdesc',$desc);
}

add_action( 'add_meta_boxes', 'koplan_add_metabox' );
add_action('add_meta_boxes','koplan_add_maps_metabox');
add_action( 'save_post', 'koplan_save_gallery_metabox' );
add_action( 'save_post', 'koplan_save_maps_desc_metabox' );

?>

I said problem solved, case closed. Thanks all, thanks stackoverflow