[英]Ajax request stores old data
I have a litte problem with my ajax request and I haven't found a solution yet. 我的ajax请求有一个小问题,但尚未找到解决方案。
What I am trying to accomplish: 我要完成的工作:
I have simple search form, when I submit I send the data to a PHP file which returns the result as json. 我有一个简单的搜索表单,当我提交时,我将数据发送到一个PHP文件,该文件将结果作为json返回。 Then I add the returned data in a clickable list and when I click on one list item I want to display the data in a new div. 然后,我将返回的数据添加到可单击的列表中,当我单击一个列表项时,我想在新的div中显示数据。 This actually works fine. 这实际上工作正常。 Even if I start a new search I get the correct json objects and the list updates as expected but now I have following problem. 即使我开始新的搜索,我也会得到正确的json对象,并且列表会按预期更新,但现在出现以下问题。 If I start a new search without refreshing the whole page and again click on a list item, in the console log i see that the new but also the previous data is still kinda stored in the list or wherever and this is the problem because I then display the wrong data if I click on the list items. 如果我在不刷新整个页面的情况下开始新搜索,然后再次单击列表项,那么在控制台日志中,我会看到新数据以及以前的数据仍然存储在列表中或任何地方,这是问题所在,因为然后如果我单击列表项,则显示错误的数据。
I hope you understand my question and I am thankful for every hint. 希望您能理解我的问题,对于每一个提示我都很感谢。 And btw, is my approach even possible or is there a better way to solve this? 顺便说一句,我的方法是否可行,或者有更好的方法来解决这个问题?
Javascript code JavaScript代码
$('#searchbar').submit(function(e){
e.preventDefault();
var query = $('#searchQuery').val();
if (query != ''){
loadData();
}else{
alert('Empty searchform!');
}
});
function loadData(){
var query = $('#searchQuery').val();
$.ajax({
type: "POST",
url: "search.php",
data: {'query': query},
dataType: 'json'
}).done(function(res) {
console.log(res);
resetInfos();
generateList(res);
$('.list-group').on('click', '.list-group-item', function(e){
var index = $(this).index();
console.log(res[index].Name);
$('#locationName').text(res[index].Name);
$('#locationAddress').text(res[index].Zip
+ ' '
+ res[index].State);
$('#locationContact').text(res[index].Internet);
init_map(res[index].Latitude, res[index].Longitude);
});
});
}
function resetInfos(){
$('.list-group').empty();
$('#listItems').remove();
$('#searchQuery').val('');
$('#locationName').text('');
$('#locationAddress').text('');
$('#locationContact').text('');
}
function generateList(result){
$.each(result, function(i){
$('.list-group').append('<li class="list-group-item" id="listItems">'
+ result[i].Name
+ ", "
+ result[i].Zip
+ " "
+ result[i].State);
});
}
HTML search form HTML搜索表单
<form id="searchbar">
<div class="input-group form-group-lg">
<input type="text" id="searchQuery" name="query" class="form-control" autocomplete="off" placeholder="Name, ZIP, State">
<span class="input-group-btn"><button class="btn btn-success btn-lg" id="searchButton" type="submit">Search</button></span>
</div>
<form>
You are using id selector to remove multiple elements. 您正在使用ID选择器删除多个元素。
$('#listItems').remove();
It will only remove the first matched reference. 它只会删除第一个匹配的参考。 Please add some class to li element and then use class selector to remove. 请在li元素中添加一些类,然后使用类选择器删除。
Ok I solved it. 好的,我解决了。 I had to remove the click event handler with 我必须删除click事件处理程序
$('.list-group').off('click');
in my resetInfos function. 在我的resetInfos函数中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.