Jquery 如何在函数内多次执行Ajax函数?
我想使用Ajax填充HTML选择,首先,在开始时,我需要在文档准备好时填充第一个HTML选择 之后,每次用户点击一个按钮,它都会生成一个新的选择,我需要再次填充相同的选择 此选择包含数据库中的多个选项。我试图将Ajax函数放在函数中,以避免编写与文档准备好时相同的Ajax函数 但它不起作用 这是我的代码:Jquery 如何在函数内多次执行Ajax函数?,jquery,ajax,laravel,select,Jquery,Ajax,Laravel,Select,我想使用Ajax填充HTML选择,首先,在开始时,我需要在文档准备好时填充第一个HTML选择 之后,每次用户点击一个按钮,它都会生成一个新的选择,我需要再次填充相同的选择 此选择包含数据库中的多个选项。我试图将Ajax函数放在函数中,以避免编写与文档准备好时相同的Ajax函数 但它不起作用 这是我的代码: function datepicker() { $( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" }); $.
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();
});
});
问题在于您在ajax请求中发送的数据
data: {
id: $(this).val(),
'_token': $('input[name=_token]').val()
},
由于您在命名函数selectproductos中移动了请求,$这变得未定义。。。对其应用.val方法会引发错误
将$this更改为$add修复了问题参考:问题下方的注释。什么不起作用?你有错误吗?只使用一个标记集。。。并将函数放入文档就绪处理程序中。。。重新测试并查看说明。@LouySpatriceBesette再次查看我的代码我做了一些更改,控制台抛出app.js:8356 Uncaught TypeError:无法在jQuery.fn.init.val app.js:8356的selectproductos capturarpedido.js:38的HTMLDocument中读取undefined的属性'toLowerCase'。capturarpedido.js:71在mightThrow app.js:3913在process app.js:3981好的。。。在Ajax数据对象中:id:$this.val,,这当然是未定义的。试用id:$add.val.@louyspatricebesette谢谢现在起作用了!