Showing results always in same div

Question

Showing results always in same div

Navigation

#1 by (2 votes)

2

I have a problem in my jquery, it always shows the result in the same div , I want the result to appear in the div where the button is . >

<div class="accordion-content" style="display: block;">
    <div class="clearfix"></div>
    <div class="col-lg-6">
        <div class="borda_servico">
            <div class="pdf"><h4>DJI_0027.jpg</h4>
                <form action="javascript:void(0)" method="post" class="reg-formulario">           
                    <input type="hidden" name="i_content" id="i_content" value="1">
                    <input type="hidden" name="id_arquivo" id="id_arquivo" value="56">
                    <div id="form-content_21" style="clear:both;"><button class="baixar_arquivo" id="submit" type="submit"><i class="fa fa-download" aria-hidden="true"></i> Baixar arquivo</button> 
                    </div>
                </form>     
            </div>
            <hr><div class="accordion-content_aba"><h2> quinta, 28 de setembro de 2017</h2></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="borda_servico">
            <div class="pdf"><h4>FOTO20Ondas-perfeitas-sim-isso-e-sinonimo-de-Indonesia-nesta-.jpg</h4>



                <form action="javascript:void(0)" method="post" class="reg-formulario">           
                    <input type="hidden" name="i_content" id="i_content" value="2">

                    <input type="hidden" name="id_arquivo" id="id_arquivo" value="61">
                    <div id="form-content_22" style="clear:both;"><button class="baixar_arquivo" id="submit" type="submit"><i class="fa fa-download" aria-hidden="true"></i> Baixar arquivo</button> 
                    </div>
                </form>             


            </div>
            <hr><div class="accordion-content_aba"><h2> quinta, 28 de setembro de 2017</h2></div>
        </div>

Jquery

$(document).on('submit', '.reg-formulario', function(e){
    e.preventDefault(); 
    $.ajax({
        url: 'ajax_arquivos.php',
        type: 'POST',
        data: $(this).serialize() 
    })
    .done(function(data){
        $('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
            $('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);
        });
    })
    .fail(function(){
        alert('Ajax Submit Failed ...');    
    });
});

I used serialize () to run on more than one form, in this part I made it show the result in the div # form-content_2 ... but this is not working because it only shows the results of all the buttons in the first div:

$('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
$('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);

jquery

asked by anonymous 28.09.2017 / 20:59

1 answer

My datepicker should work only on icon Error RSelenium - Selenium message: Java heap space

score 2 · Accepted Answer

In HTML you can not have duplicate IDs. Each ID must be unique and only exist in 1 element on the entire page.

Apart from this, which influences the error you have, you should use this as a starting point:

$(document).on('submit', '.reg-formulario', function(e) {
  e.preventDefault();

  var i = $(this).find('[name="i_content"]').val();
  var destino = $('#form-content_2' + i);
  destino.fadeOut('slow');

  $.ajax({
      url: 'ajax_arquivos.php',
      type: 'POST',
      data: $(this).serialize()
    })
    .done(function(data) {
      destino.fadeIn('slow').html(data);
    })
    .fail(function() {
      alert('Ajax Submit Failed deletar convidado...');
    });
});