Reset ajax form append

0

Good, I'm with little problem. When I open the field to edit .. I load the current image, and below the input file .. When I change it and I submit, everything works perfect .. My problem is .. That when I try to edit another field, the modal opens, but the previous image continues, the current one, and also in the input file the file that was uploaded .. Can someone help me? I leave here my code ..

            <div class="form-group">
                <label class="col-md-2 control-label">Portada de Inicio actual</label>
                <div class="col-md-9">
                    <div id="f3223f235" ></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">Portada de Inicio nueva</label>
                <div class="col-md-7">
                    <input type="file" id="file-editanoti"  name="portada" class="form-control" accept="images/jpg"/>
                </div>
            </div>

            <div id="prev_edinoti" style="margin:auto; display: flex; margin-bottom: 20px;"></div> 

div PREV_EDINOTI is the ID where the new image to be loaded is displayed. JS to upload the files and where I show my image

function editarNoti(idNoticia){
    $('#form_edi_noti')[0].reset();
    var url = 'php/notiEditar.php';
        $.ajax({
        type:'POST',
        url:url,
        data:'id='+idNoticia, // envia a PHP ej.: $_POST['id'];
        success: function(valores){
                var datos = eval(valores);
                $('#edi_noti').val('Edicion');
                $('#idnoticiia').val(idNoticia);
                $('#titnoticia').val(datos[0]);
                $('#fechanoticia').val(datos[1]);
                $('#fecha_noti2').val(datos[2]);
                $('#direnoti').val(datos[3]);
                $('#direnoti2').val(datos[4]);
                $('#f3223f235').append("<img src=../imagenes/noticias/"+datos[3]+"/"+datos[5]+" style='max-width: 50%'>" ); //portadagaleria
                $('#f3223f23534').val(datos[5]);
                $('#portadagaleria').val(datos[6]);
                $('#anexo').val(datos[7]);
                $('#galeria').val(datos[8]);
                $('#intCatnoticia').val(datos[9]);
                $('#edita-noti').modal({
                    show:true,
                    backdrop:'static'
                });
            return false;
        }
    });
    return false;
}

onsubmit calls this function

function editaNoti(){
    var archivos = new FormData($("#form_edi_noti")[0]);
    var url = 'php/notiEdita.php';
    $.ajax({
        type:'POST',
        url:url,
        data: archivos,
        cache: false,
        contentType: false,
        processData: false,
        success: function(edicion){
            if ($('#edi_noti').val() == 'Edicion'){
            alertify.success("Edición realizada.");
            $('#edita-noti').modal('hide');
            $('#noti').html(edicion);
            return false;
            }
        }
    });
    return false;
}
    
asked by Rodrigo Ruiz Diaz 09.06.2016 в 18:44
source

2 answers

1

To know:

I have already solved the problem of stopping accumulating the images when opening the modal ... I had to change the append by html .. Now I can only clean the input of the file after submitting

    
answered by 09.06.2016 в 19:15
0

Apparently, you need to return the form to its initial state:

Using jQuery :

  $("#idDeTuFormulario")[0].reset();

Using% co_of pure and raw%:

document.getElementById("idDeTuFormulario").reset();
    
answered by 09.06.2016 в 18:58