Question

我想使用Ajax填充HTML选择，首先，当文档准备好时，我首先需要填充第一个HTML选择。

此后，每次用户单击按钮时，它将生成一个新的选择，而我需要再次填充相同的选择。

此选择包含数据库中的多个选项。我试图将Ajax函数放入函数中，以避免编写与文档准备就绪时相同的Ajax函数。

但是不起作用。

这是我的代码：

function datepicker() {
  $( ".datepicker" ).datepicker({
    dateFormat: "dd-mm-yy"
  });

  $.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['es']);
}


function selectproductos() {
  alert("hola");
  var select = $('.producto');

  $.ajax({
    type: "POST",
    url: "selectproductos",
    data: {
      id: $(this).val(),
      '_token': $('input[name=_token]').val()
    },
    success: function(data) {
      var htmlOptions = [];
      if( data.length ){
        for( item in data ) {
          html = '<option value="' + data[item].id + '">' + data[item].producto + '</option>';
          htmlOptions[htmlOptions.length] = html;
        }

        // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result
        select.empty().append( htmlOptions.join('') );
      }
    },
    error: function(error) {
      alert(error.responseJSON.message);
    }
  });
}

$(document).ready(function() {
  $( '.remove' ).click(function() {
    $(this).closest('tr').remove();
  });

  $('.select2').select2();
  selectproductos();
  datepicker();

  $("#add").click(function() {
    var lastField = $("#buildyourform tr:last");
    var intId = (lastField && lastField.length && lastField.attr("idx") + 1) || 1;
    var fieldWrapper = $("<tr class=\"fieldwrapper\" id=\"field" + intId + "\"> </tr>");
    fieldWrapper.data("idx", intId);
    var producto = $("<td><select name= \"producto\" placeholder= \"producto\" class=\"fieldname producto\" required=\"required\"><option value=\"\">Selecciona un producto</option></select></td>");
    var presentacion = $("<td><input type=\"text\" name= \"presentacion\" placeholder= \"presentacion\" class=\"fieldname\" /></td>");
    var cantidad = $("<td><input type=\"text\" name= \"cantidad\"  placeholder= \"cantidad\" class=\"fieldname\" /></td>");

    var fechaEntrega = $("<td><input type=\"text\" class=\"datepicker\" ></td>");
    var nota = $("<td><textarea rows=\"2\" cols=\"30\" name=\"nota[]\" id=\"notas\" maxlength=\"255\"></textarea></td>");

    var etiquetado = $("<td><input type=\"checkbox\" name=\"etiquetado\" value=\"Si\"></td>");

    var removeButton = $("<td><input type=\"button\" class=\"remove\" value=\"-\" /></td>");

    removeButton.click(function() {
      $(this).parent().remove();
    });

    fieldWrapper.append(producto);
    fieldWrapper.append(presentacion);
    fieldWrapper.append(cantidad);
    fieldWrapper.append(fechaEntrega);
    fieldWrapper.append(nota);
    fieldWrapper.append(etiquetado);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
    selectproductos();
    datepicker();
  });
});

Answer 1

问题出在您通过ajax请求发送的数据中。

data: {
  id: $(this).val(),
  '_token': $('input[name=_token]').val()
},

自从您在命名函数selectproductos()中移动请求以来，$(this)变得未定义...并对其应用了.val()方法引发了错误。

将$(this)更改为$("#add)可以解决问题（参考：问题下方的注释）。

如何在一个函数内多次执行Ajax函数？

1 个答案: