Ich arbeite an einem Upload-Medienformular für meine WordPress-Admin-Seite und habe ein paar Probleme mit dem endgültigen Code, der es zurückhält.
Die Idee ist,
Ein Formular zeigt beim Start an, ob es einen Wert hat oder nicht. Wenn Sie auf „Klonen“ klicken, wird dieses Formular geklont und die ID und der Name erhöht. Außerdem wird allen Formularen eine Schaltfläche „Entfernen“ hinzugefügt. Wenn Sie dann in einem Formular auf „Entfernen“ klicken, werden die ID- und Namens-Tags für alle Formulare verringert danach ist es also egal was passiert, die Formen sind immer 1, 2, 3, 4, 5 usw. siehe Geige http://jsfiddle.net/jLc8X/
Das erste Problem ist:
Wenn Sie das erste Formular klonen und beiden Formularen einen Wert zuweisen und speichern, haben beide Formulare beim Aktualisieren der Seite keine Schaltfläche zum Entfernen (alle Formulare sollten eine Schaltfläche zum Entfernen haben, es sei denn, es gab nur eine), wenn Sie dann auf “Klonen” klicken. Die Schaltfläche “Entfernen” wird für alle Formulare angezeigt und funktioniert dann wie gewohnt. Sie können dies nicht auf der Geige sehen.
Das zweite Problem ist:
Wenn Sie auf „Klonen“ klicken, möchten Sie wahrscheinlich sofort ein Bild auf das hochladen. Dies funktioniert erst, wenn Sie das Formular gespeichert haben.
Hier ist der Code
Ich denke, das zweite Problem liegt an den separaten Skripten, aber ich habe sie mit einem Raster verbunden und kann es nicht zum Laufen bringen.
Hier ist die jquery, Sie können sie auch in der Geige anzeigen.
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "upload_image_link_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}
$(document).on("click", "button.clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).parents(".clonedInput").clone();
updateClonedInput(cloneIndex, new_Input);
$('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
if ($('.clonedInput').length < 2) {
$('button.remove').hide();
}
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
// Media Upload
var custom_uploader;
$('.upload_images').click(function(e) {
alert(this.id);
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
var ter = $(this).siblings('input').attr('id');
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#'+ter).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});