it-swarm.com.de

window.send_to_editor und jQuery .attr () stehen in Konflikt mit mehreren verwendeten Upload-Bild-Metaboxen

Ich habe einem benutzerdefinierten Beitragstyp zwei benutzerdefinierte Meta-Boxen hinzugefügt. Einer ist das Hochladen eines Bildes, das in einem benutzerdefinierten Feldwert für einen "Kopfschuss" gespeichert werden soll, und der andere ist das Hochladen eines Bildes, das in einem benutzerdefinierten Feldwert für einen "Spaltenkopfschuss" gespeichert werden soll. Es ist eine Nachrichtenseite.

UI for Headshots

Beide senden die URL des im Bereich "Medien hinzufügen" ausgewählten Bildes an ein ausgeblendetes Feld, das dann wie gewohnt in den benutzerdefinierten Feldern angezeigt wird. Ich möchte jedoch auch eine Vorschau des ausgewählten Bildes, bevor der Beitrag gespeichert oder veröffentlicht wird. Daher muss jQuery das src-Attribut eines Bildes aktualisieren, das sich in einem Div befindet, das angezeigt wird, sobald ein Bild unter "Medien hinzufügen" ausgewählt wurde. Feld. Das Problem besteht darin, dass bei Auswahl eines Bildes im ersten Feld "Normaler Kopfschuss" das src-Attribut des Bildes im Feld "Spaltenkopfschuss" aktualisiert wird und nicht das richtige - das Feld "Normaler Kopfschuss".

Ich bin mir ziemlich sicher, dass dies auf Konflikte mit den mehreren window.send_to_editor-Instanzen zurückzuführen ist. Ich hatte anfangs ein Problem, bei dem das Aktualisieren des "Normalen Headshot" auch die URL desselben an das falsche ausgeblendete Feld (das Feld im Feld "Spaltenkopf") sendete, aber ich habe das gelöst, indem ich das zu aktualisierende Feld als solches definierte: uploadID = jQuery(this).prev('input');

Dies löste das Problem. Ich habe versucht, das Bild zu definieren, dessen Quellattribut ich auch so ändern möchte, aber es hat das Problem nicht gelöst (und in der Tat bedeutet, dass kein Quellattribut aktualisiert wurde): changeID = jQuery(this).prev('img');

Es gibt vorhandene Fragen , die fragen, wie mit mehreren Instanzen von window.send_to_editor umgegangen werden soll, aber sie haben mir nicht geholfen. Entweder funktioniert ihre Lösung hier nicht oder ich setze sie falsch um.

Wie passe ich diesen Code an, damit der send_to_editor das richtige Bildquellenattribut aktualisiert, oder damit ich eine Vorschau beider Bilder anzeigen kann, nachdem sie ausgewählt wurden?

Nachfolgend sehen Sie die im ersten Feld "Normaler Headshot" verwendete jQuery:

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");

  }


 });


 });

Nachfolgend sehen Sie die im zweiten Feld "Column Headshot" verwendete jQuery:

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");



   }


   });



   });
1
Edmund Heaphy

Ich habe kürzlich etwas Ähnliches gemacht, aber wp.media anstelle von ThickBox https://codex.wordpress.org/Javascript_Reference/wp.media mit demselben Code von Codex verwendet. Damit es mit mehreren Eingaben funktioniert, müssen Sie die Frame-Variable aus dem globalen Bereich in die Klick-Funktion verschieben, damit der 'Frame' bei jedem Klick aktualisiert wird.

2
rzepak