Autocomplete w/Dynamic Table Jquery and Javascript

Question

I have resolved a few things, and it works now, thanks to this page, they helped me in another thing. Now, this is how I got the code, and the Autocomplete works, but only I can just with the ones that are loaded when the page is displayed, if I enter the first one, the autocomplete script puts the description, quantity and price of the code I entered, instead of just the first row, or the row I want to put the code in. This is my code right now.

$(document).ready(function() {
  //this is added just to pre-populate some rows
  addRow2('dataTable');



  $(".chkall").click(function() {
    if ($(".chkall").is(':checked')) {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


  $('.get_total, .g_total').click(function(e) {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
    });
    console.log(g_total);
    $('.g_total').html(g_total);
  })
  $('input.total').on('change', function() {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
      $('.g_total').html(g_total);
    })
  })
})

function grandTotal() {
  g_total = 0;
  $('input.total').each(function() {
    g_total += eval($(this).val());
    $('.g_total').html(g_total);
  })
}


function addRow2(tableid) {

  

  var table = $('#' + tableid);
  rowCount = table.children().length;
  //console.log(table.children().length);
  newrow = '';
  table.append(newrow);

  $("#dataTable input[id^='codigo']").autocomplete({
    source:'buscarcompra.php',
    minLength:1
});

  $("#dataTable input[id^='codigo']").focusout(function(){
  $.ajax({
        url:'producto.php',
      type:'POST',
      dataType:'json',
      data:{ codigo: $("#dataTable input[id^='codigo']").val()}
  }).done(function(respuesta){
       $("#dataTable input[name^='descripcion']").val(respuesta.descripcion);
       $("#dataTable input[name^='precio']").val(respuesta.precio);
  });
});
}



function calc2(_row) {
  row = _row.closest('.dataRow');
  //console.log();
  //
  qty = row.find('.cantidad').val();
  price = row.find('.precio').val();
  total = parseFloat(qty) * parseFloat(price);
  console.log('qty:' + qty + ' * price:' + price + ' = ' + total);
  row.closest('.dataRow').find('.total').val(total);
  grandTotal();
}



function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

.g_total {
  width: 100px;
  background-color: #ccc;
  height: 20px;
  display: inline-block;
  float: right;
}
.cantidad,
.precio,
.total {
  /*
  height: 50px;
  width: 40px;*/
  text-align: center;
}
.cantidad {
  width: 84px;
}
.codigo,
.descripcion {
  width: 54px
}
.precio,
.total {
  width: 121px;
}

  

 
      
      
      
        
CARRITO DE COMPRAS








  
    
      
        
          
        
        CODIGO
        DESCRIPCION
        CANTIDAD
        PRECIO
        TOTAL

guest271314 · Accepted Answer

You can create a function to attach .autocomplete() and .focusout() events to :last .codigo element at .ready() handler and addRow function call. Substituted + operator for eval() calls.

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$(document).ready(function() {

  //this is added just to pre-populate some rows
  addRow2('dataTable');

  addAutocompleteAndFocusout("#dataTable input[class^='codigo']", availableTags);

  $(".chkall").click(function() {
    if ($(".chkall").is(':checked')) {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


  $('.get_total, .g_total').click(function(e) {
    g_total = 0;
    $('input.total').each(function() {
      g_total += +$(this).val();
    });
    console.log(g_total);
    $('.g_total').html(g_total);
  })

  $('input.total').on('change', function() {
    g_total = 0;
    $('input.total').each(function() {
      g_total += +$(this).val();
      $('.g_total').html(g_total);
    })
  })
})

function addAutocompleteAndFocusout(selector, src) {
  (typeof selector === "string" ? $(selector) : selector).autocomplete({
      source: src
    })
    .focusout(function() {
      console.log("focusout called")
    })
}

function grandTotal() {
  g_total = 0;
  $('input.total').each(function() {
    g_total += +$(this).val();
    $('.g_total').html(g_total);
  })
}


function addRow2(tableid) {
  var table = $('#' + tableid);
  rowCount = table.children().length;
  newrow = '';
  table.append(newrow);
  // attach `.autocomplete()`, `.focusout()` to `:last` `.codigo` element
  addAutocompleteAndFocusout(table.find(".codigo:last"), availableTags);
}

function calc2(_row) {
  row = _row.closest('.dataRow');
  qty = row.find('.cantidad').val();
  price = row.find('.precio').val();
  total = parseFloat(qty) * parseFloat(price);
  console.log('qty:' + qty + ' * price:' + price + ' = ' + total);
  row.closest('.dataRow').find('.total').val(total);
  grandTotal();
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

.g_total {
  width: 100px;
  background-color: #ccc;
  height: 20px;
  display: inline-block;
  float: right;
}
.cantidad,
.precio,
.total {
  /*
  height: 50px;
  width: 40px;*/
  text-align: center;
}
.cantidad {
  width: 84px;
}
.codigo,
.descripcion {
  width: 54px
}
.precio,
.total {
  width: 121px;
}




CARRITO DE COMPRAS





  
    
      
        
          
        
        CODIGO
        DESCRIPCION
        CANTIDAD
        PRECIO
        TOTAL

Autocomplete w/Dynamic Table Jquery and Javascript

Answers (1)

Related Questions