Occupy Ajax requests in more than one cloned select laravel 5

Question

Occupy Ajax requests in more than one cloned select laravel 5

Navigation

#1 by (2 votes)

2

I have a table in which I add rows with jquery. These rows have several inputs and one select. The functionality of the select is that when choosing a product, in an input its description is shown, this works well with a call $ .get of ajax. The problem is this: When I add another row in my table (td) and I want to choose my product with the select, the input does not show its description, so I wanted to know what I should do to show me that. Do I need to call back the ajax request? If you can guide me please I'd appreciate it a lot.

Script to add a row

$("#addRow").on("click",function(e){

    e.preventDefault();
    e.stopPropagation();    

    $("#tabla tr:last").clone().find("input, select").val('').each(function() {  }).end().appendTo("#tabla");

});

Ajax script

$("#mmscod_id").on("change", function(){

    var select = $('#mmscod_id option:selected').val(); 
    var select2 = $('#mmscod_id option:selected').text();  

    $.get("/product/"+select+"/"+select2,function(response){  
        $('#descripcion').val(response);   
    });

});

Attached image of the problem

jquery ajax laravel-5

asked by Andrés Gómez Vega 08.08.2016 в 23:27

source

1 answer

C # open other applications Save the webcam video on the live server

score 2 · Accepted Answer

There are two problems in the code above:

You have duplicate IDs: when you duplicate a row, you are duplicating the fields within that row including their IDs. Although this does not have to be directly causing the problem, it can cause problems with the selectors. You should use classes instead of IDs.

If you are associating the action that the AJAX call performs at the beginning of the page, then it will only be associated with the elements that are already created (the first row) but not those that are created new (row 2, 3, 4 ...) To solve this problem you have two options:

Clone including the events doing clone(true) , but then you will encounter the problem described in step 1: the events will be associated, but, as you have duplicate IDs, they will not be performed on the elements you expect.

Use on but with delegated events. This causes events to be associated with the elements when they are created on the page.

To delegate the events you could do something like this (by changing the ID to a class):

$("body").on("change", ".mmscod_id", function(){

    $this = $(this);

    var select = $this.find('option:selected').val(); 
    var select2 = $this.find('option:selected').text();  

    $.get("/product/"+select+"/"+select2,function(response){  
        $this.closest("tr").find('.descripcion').val(response);   
    });

});

Here is a similar example, but changing the IDs by class, and without making the AJAX call, only showing the URL that would be called by the console and in the text field of the same row:

$("#addRow").on("click",function(e){
  e.preventDefault();
  e.stopPropagation();    
  $("#tabla tr:last").clone().find("input, select").val('').each(function() {  }).end().appendTo("#tabla");
})

$("#tabla").on("change", ".mmscod_id", function(){
  
  $this = $(this);
  
  var select = $this.find('option:selected').val(); 
  var select2 = $this.find('option:selected').text();  

  console.log("/product/"+select+"/"+select2);
  $this.closest("tr").find('.descripcion').val("/product/"+select+"/"+select2);   
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="addRow">Click Me</button>
</div>
<table id="tabla">
  <tr>
    <td>
      <select class="mmscod_id">
        <option value="1">Uno</option>
        <option value="2">Dos</option>
      </select>
    </td>
    <td>
      <input type="text" value="" class="descripcion" />
    </td>
  </tr>
</table>