web-dev-qa-db-fra.com

window.send_to_editor et jQuery .attr () sont en conflit avec plusieurs boîtes de méta d'image de téléchargement personnalisées

J'ai ajouté deux méta-boîtes personnalisées à un type de publication personnalisé. L'une consiste à télécharger une image à stocker dans une valeur de champ personnalisé pour un "headshot" et l'autre consiste à télécharger une image à stocker dans une valeur de champ personnalisé pour un "tir à la colonne". C'est un site de nouvelles.

UI for Headshots

Les deux envoient l'URL de l'image choisie dans le volet "Ajouter un média" à un champ caché, qui est ensuite publié via le processus normal dans les champs personnalisés. Cependant, je veux aussi un aperçu de l'image choisie avant que le message ne soit enregistré ou publié. Je demande donc à jQuery de mettre à jour l'attribut src d'une image, qui est dans un div affiché une fois qu'une image est sélectionnée dans le champ "Ajouter un média". vitre. Le problème est que, dans la première zone "Tête normale", lorsqu'une image est sélectionnée, elle met à jour l'attribut src de l'image dans la zone "Tête de colonne", plutôt que la bonne - la zone "Tête normale".

Je suis à peu près sûr que cela est dû à des conflits avec plusieurs instances window.send_to_editor. J'avais initialement un problème où la mise à jour du "Tête normale" envoyait également l'URL de celle-ci au mauvais champ caché (celui de la zone "Colonne en tête"), mais j'ai résolu ce problème en définissant le champ à mettre à jour comme tel: uploadID = jQuery(this).prev('input');

Cela a résolu le problème. J'ai essayé de définir l'image de l'attribut source que je souhaite modifier ainsi, mais cela n'a pas résolu le problème (et signifie en fait qu'aucun attribut source n'a été mis à jour): changeID = jQuery(this).prev('img');

Il y a des questions existantes qui demandent comment traiter plusieurs instances de window.send_to_editor, mais elles ne m'ont pas aidé. Soit leur solution ne fonctionne pas ici, soit je l’applique de manière incorrecte.

Comment ajuster ce code afin que l'élément send_to_editor mette à jour le bon attribut source d'image ou que je puisse afficher un aperçu des deux images après leur choix?

Ci-dessous, le jQuery utilisé dans la première boîte, "Normal Headshot":

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

$('#upload_image_button').click(function() {
    uploadID = jQuery(this).prev('input');
    formfield = $('#upload_image').attr('name');
    tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

    return false;
});


window.send_to_editor = function(html){


    headshotimgurl = $('img',html).attr('src');
    uploadID.val(headshotimgurl);

    jQuery("#imageurladder").attr("src", headshotimgurl);

    tb_remove();

    $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).show();

    $("#upload_image_button_clear").removeAttr("disabled");

}


  $("#upload_image_button_clear").click(function() {



 if (!$("#upload_image_button_clear").is(":disabled")) {

  $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).hide();

    $('#upload_image').val('');  

    $("#upload_image_button_clear").attr("disabled","disabled");

  }


 });


 });

Ci-dessous, le jQuery utilisé dans la deuxième boîte, "En-tête de colonne":

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

$('#upload_column_button').click(function() {


    uploadID = jQuery(this).prev('input');
    formfield = $('#upload_column').attr('name');
    tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

    return false;


});


window.send_to_editor = function(html){



    columnimgurl = $('img',html).attr('src');
    uploadID.val(columnimgurl);


    jQuery("#columnurladder").attr("src", columnimgurl);

    tb_remove();

    $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).show();

    $("#upload_column_button_clear").removeAttr("disabled");


}


 $("#upload_column_button_clear").click(function() {



if (!$("#upload_column_button_clear").is(":disabled")) {

  $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).hide();

    $('#upload_column').val('');


    $("#upload_column_button_clear").attr("disabled","disabled");



   }


   });



   });
custom-post-typescustom-fieldjquerymetaboxuploads
1
Edmund Heaphy

J'ai récemment fait la même chose, mais j'ai utilisé wp.media à la place de ThickBox https://codex.wordpress.org/Javascript_Reference/wp.media avec le même code que Codex. La seule chose à faire fonctionner avec plusieurs entrées consiste à déplacer la variable frame d'une portée globale à une fonction click afin que la "frame" soit actualisée à chaque clic.

2
rzepak