Merge two $ (document) .on ('click' in one ajax

Question

Merge two $ (document) .on ('click' in one ajax

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have an ajax autocomplete script and I'm trying to merge two $(document).on('click' into one so that when you make a single click the two are copied at the same time in their corresponding fields but I do not get it possible?

$(document).on('click', '.datalistdes', function(){
                $('#nombre1').val($(this).text());
                $('#Listdes').fadeOut();

        }).on('click', '.linkdata', function(){
                $('#nombre2').val($(this).text());
                $('#Listdes').fadeOut();

        });

<div class="form-group">
    {{ Form::text('nombre1', null, ['class' => 'from-control', 'id' => 'nombre1']) }}
</div>
<div class="form-group">
    {{ Form::text('nombre2', null, ['class' => 'from-control', 'id' => 'nombre2']) }}
</div>

Right now, it works well for me when I click on one, I fill it in and click on the other one, but what I need is for both to be filled in with a single click.

ajax autocompletar

asked by Lendy Rodriguez Silva 07.11.2018 в 18:01

source

3 answers

Pass data from a DataGridView to another DataGridView in the same form and modify the amount when passing the row How do I perform a dql query to join 4 tables

score 0 · Answer 1

I made an example with two buttons using your classes, the idea is to add a class in common that have the two selectors and to that class in common assign the click event and then evaluate which of the two beats clicked:

$(document).on('click', '.clase-en-comun', function(){

  if($(this).hasClass("datalistdes")){
    
    alert("Haz clikeado datalistdes y el selector que voy a instanciar es #nombredes");
    $('#nombredes').val($(this).text());
    
  }else if($(this).hasClass("linkdata")){
    
    alert("Haz clikeado linkdata y el selector que voy a instanciar es #linkdes")
    $('#linkdes').val($(this).text());
  
  }
  
  $('#Listdes').fadeOut();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="datalistdes clase-en-comun">datalistdes</button>

<button class="linkdata clase-en-comun">linkdata</button>

score 0 · Answer 2

As an alternative to David's solution, you could do the following:

$(document).on('click', '.datalistdes, .linkdata', function(){
    // logica que coloca el text al input que deseas
    $('#Listdes').fadeOut();
});

The logic that selects the element and places the input text will vary depending on how the HTML is built.

JQuery Multiple selector

score 0 · Answer 3

Based on the answer of cavpollo, you could complete it in the following way:

$(document).on('click', '.datalistdes, .linkdata', function(){
    // logica que coloca el text al input que deseas

    if($(this).attr('class') == "linkdata"){
        $('#nombre2').val($(this).text());
                $('#Listdes').fadeOut();
    }else{
        $('#nombre1').val($(this).text());
                $('#Listdes').fadeOut();
    }

    //Para cargar el valor en los dos inputs
    /*
    $('#nombre2').val($(this).text());
    $('#Listdes').fadeOut();
    $('#nombre1').val($(this).text());
    $('#Listdes').fadeOut();*/
});

I put the two options, that is, to load an input according to where the click was made and to load the two inputs.