Klonen von Formularen, Schaltfläche funktioniert nicht, wenn sie sollte, und wird beim Start nicht korrekt angezeigt

Lesezeit: 3 Minuten

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();
});

Das erste Problem ist das Problem, wie Sie HTML beim Laden der Seite generieren. Sie müssen diese Schaltfläche manuell hinzufügen, wenn ich das richtig verstanden habe.

Das zweite Problem liegt an dieser bestimmten Codezeile:

$('.upload_images').click(function(e) {

Dies bindet nur an vorhandene Elemente, und wenn Sie es für neue Schaltflächen binden möchten, sollten Sie es wie folgt schreiben:

$(document).on('click','.upload_images',function(e) {

Lass mich wissen was du denkst.

  • Das zweite Problem scheint perfekt zu funktionieren, Sie sind also auf halbem Weg. Ich verstehe jedoch nicht, wie ich die Schaltfläche manuell hinzufügen kann.

    Benutzer1221565

    27. Februar 2014 um 11:44 Uhr


  • Nun, wenn Sie möchten, dass HTML über Seitenladevorgänge hinweg bestehen bleibt, müssen Sie es irgendwie speichern. Wenn also beispielsweise drei Formulare gesendet und die Seite aktualisiert wird, müssen Ihre serverseitigen Skripts HTML für drei Formulare ausgeben, nicht für eines.

    – dkasipović

    27. Februar 2014 um 11:46 Uhr

995110cookie-checkKlonen von Formularen, Schaltfläche funktioniert nicht, wenn sie sollte, und wird beim Start nicht korrekt angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy