我有两个 ajax 调用，当用户单击 jquery datepicker 上的日期时触发。
在第二个 ajax 调用中，我希望它将响应/数据填充到第一个 ajax 调用中的段落 tag class="spots" 中，以显示该特定时间的可用景点。
我的问题是第二个 ajax 调用仅填充并重复它找到的第一个结果。我认为这是因为我的类选择器在 foreach 行中是相同的。我已经设置了 id + item.id 以使它们动态化，但如何在 jquery 选择器中访问它们？任何帮助，将不胜感激。请参阅下面的代码。
$(document).ready(function() {
//show datpicker calendar set getDay function on select
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
showButtonPanel: true,
onSelect: getDay,
});
function getDay() {
var date1 = $('#datepicker').datepicker('getDate');
var day = date1.getDay();
//set hidden input to numberical value of day
$('#dayOfWeek').val(day);
//set hidden textbox value near datepicker to submit date in proper format for db
$('#date').val($.datepicker.formatDate('yy-mm-dd', date1));
//ajax form the get available times to play
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(response){
//clear results before showing another date selected
$('.table').html("");
//loop through json results and build table
$.each(JSON.parse(response), function(i, item) {
var jdate = $('#date').val();
var id = item.id;
$('<tr>').html("<td>" + item.time + "</td><td>" + '<input type="text" name="jtime" value="' + item.time + '"' + "/>" + '<input type="text" name="jdate" value="' + jdate + '"' + ">" + "Spots:" + '<p class="spots" id="spots_' + id + '"'+ ">" + '</p>' + "</td>").appendTo('#availableTimes');
});//end loop
//fire getSpots function
getSpots();
}//end success
});
return false;
}; //end getDay function
// get available spots
function getSpots(){
var values = {
'jtime': $('input[name="jtime"]').val(),
'jdate': $('input[name="jdate"]').val(),
};
$.ajax({
//url: form.attr('action'),
url: '/reservations/getSpots',
type: 'POST',
// data : form.serialize(),
data : values,
success: function(response){
$('.spots').html(response);
}//end success
}); //end ajax
return false;
};//end getSpots function
})//end doc ready
</script>
这是一段有效的代码片段，但它使用带有按钮的表单来提交第二个 ajax 调用。我希望它像这样工作而无需按钮提交。希望在选择数据选择器日期时发布第二个 ajax 调用。也许我在想这个错误。
//show datpicker calendar set getDay function on select
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
showButtonPanel: true,
onSelect: getDay
});
})//end doc ready
function getDay() {
var date1 = $('#datepicker').datepicker('getDate');
var day = date1.getDay();
//set hidden input to numberical value of day
$('#dayOfWeek').val(day);
//set hidden textbox value near datepicker to submit date in proper format for db
$('#date').val($.datepicker.formatDate('yy-mm-dd', date1));
//ajax form the get available times to play
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(response){
//clear results before showing another date selected
$('.table').html("");
//loop through json results and build table
$.each(JSON.parse(response), function(i, item) {
var jdate = $('#date').val();
var id = item.id;
$('<tr>').html("<td>" + item.time + "</td><td>" + '<form class="insideForm" action="/reservations/getSpots" accept-charset="utf-8" method="">' + '<input type="text" name="jtime" value="' + item.time + '"' + "/>" + '<input type="text" name="jdate" value="' + jdate + '"' + ">" + '<input type="submit" class="btn btn-primary" value="Spots">' + "Spots:" + '<p class="spots" id="spots_' + id + '"'+ ">" + '</p>' + '</form>' + "</td>").appendTo('#availableTimes');
});//end loop
getSpots();
}//end success
});
return false;
}; //end getDay function
// get available spots
function getSpots(){
//ajax form the get available spots
$('.insideForm').submit(function(){
var form = $(this).closest('form');
$.ajax({
url: form.attr('action'),
type: 'POST',
data : form.serialize(),
success: function(response){
$('.spots', form).html(response);
}//end success
}); //end ajax
return false;
}); //end submit
};//end getSpots function
最佳答案
您调用 getSpots 一次并期望所有内容都更新？您需要做的是为每一行调用一次 getSpots，并将 id 传递给 getSpots，以便 getSpots 可以使用正确的输入更新正确的行
请参阅标记为 //**** 的行以了解对代码的更改
A deleted answer had a better approach
function getDay() {
var date1 = $('#datepicker').datepicker('getDate');
var day = date1.getDay();
//set hidden input to numberical value of day
$('#dayOfWeek').val(day);
//set hidden textbox value near datepicker to submit date in proper format for db
$('#date').val($.datepicker.formatDate('yy-mm-dd', date1));
//ajax form the get available times to play
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data: $('#form').serialize(),
success: function (response) {
//clear results before showing another date selected
$('.table').html('');
//loop through json results and build table
$.each(JSON.parse(response), function (i, item) {
var jdate = $('#date').val();
var id = item.id;
$('<tr>').html('<td>' + item.time + '</td><td>' + '<input type="text" name="jtime" value="' + item.time + '"' + '/>' + '<input type="text" name="jdate" value="' + jdate + '"' + '>' + 'Spots:' + '<p class="spots" id="spots_' + id + '"' + '>' + '</p>' + '</td>').appendTo('#availableTimes');
// **** call getSpots for every row
getSpots('#spots_'+id, item.time, jdate);
}); //end loop
} //end success
});
return false;
} //end getDay function
// get available spots
// **** accept output id, jtime and jdate
function getSpots(id, jtime, jdate) {
// get the inputs for the current id
var values = {
'jtime': jtime,
'jdate': jdate,
};
$.ajax({
//url: form.attr('action'),
url: '/reservations/getSpots',
type: 'POST',
// data : form.serialize(),
data: values,
success: function (response) {
// **** update the spots for current id
$(id).html(response);
} //end success
}); //end ajax
return false;
} //end getSpots function
关于javascript - 如何访问foreach语句中的选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48737417/