Я пытаюсь создать навигацию боковой панели, которая использует AJAX для загрузки содержимого внутри div. Пока он работает отлично, я просто заметил, что каждый раз, когда я нажимаю кнопки, чтобы перейти на другой сайт на своей странице, содержимое сайта, похоже, загружается поверх текущего содержимого.AJAX загружает контент дважды
У меня есть эта гипотеза, потому что на каждом сайте загружается мой сайт отправляет один запрос на сервер, чтобы получить данные оттуда.
Теперь, если я уже посетил сайт на своей странице, который отправляет этот запрос, перейдите на другой сайт на моей странице и перейдите на первый сайт, этот сайт отправляет на сервер два запроса. Если я повторяю эти шаги, он просто добавляет и запрос отправляется 3,4,5..times
Это код моей навигационной панели:
<div id="sidedrawer" class="mui--no-user-select">
<div class="mui-divider"></div>
<ul>
<li onClick="remote();" href="./#remote">
<strong><a href="./#remote" class="navbarlink">Remote</a></strong>
</li>
<li onClick="groups();" href="./#groups">
<strong><a href="./#groups" class="navbarlink">Groups</a></strong>
</li>
<li onClick="devices();" href="./#devices">
<strong><a href="./#devices" class="navbarlink">Devices</a></strong>
</li>
<li onClick="users();" href="./#users">
<strong><a href="./#users" class="navbarlink">Users</a></strong>
</li>
<li onClick="programs();" href="./#programs">
<strong><a href="./#programs" class="navbarlink">Programs</a></strong>
</li>
<li onClick="settings();" href="./#settings">
<strong><a href="./#settings" class="navbarlink">Settings</a></strong>
</li>
</ul>
</div>
Функции удаленного()/группы()/устройства() выглядят примерно одинаково:
function remote() {
showSubPage("Remote", "./remote.php");
}
showSubpage() выглядит следующим образом:
function showSubPage(title, page){
changeTabName(title);
$.ajax({
url: page,
type: "GET",
cache: false,
success:function(data){
var $main = $('#main');
$main.html('');
$main.html(data);
}
});
}
Главное просто нормальный ДИВ:
<div id="main"></div>
Кто-нибудь есть идея, почему моя страница не дозвонились только один раз каждый раз, когда я нажимаю на ссылки?
Редактировать: Когда я просматриваю исходный код своей страницы, содержимое указывается только один раз.
Edit2: Я понял, что проблема не исходит от самого ajax. Это PHP-код, который я использую для создания моей страницы.
function addGroup($groupId, $groupname, $devicearr)
{
echo('<div class="group">
<h3>'.$groupname);
echo('<div class="verticalcenter"><div class="toggle-button toggle-button-selected " id="groupButton'.$groupId.'"><button></button></div></div>');
echo(' </h3>
<div>
<table class="devicetable">
');
foreach ($devicearr as &$device) {
echo('<tr>
<td>'.$device['name'].'</td>');
if($device['status'] == 1){
echo('<td class="togglecolumn"><div class="verticalcenter" ><div class="toggle-button toggle-button-selected group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'" ><button></button></div></div></td></tr>');
} else {
echo('<td class="togglecolumn"><div class="verticalcenter"><div class="toggle-button group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'"><button></button></div></div></td></tr>');
}
echo ('<script>
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
if($("#group'.$groupId.'device'.$device['id'].'").hasClass("toggle-button-selected")){
$(".device'.$device['id'].'").removeClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
else{
$(".device'.$device['id'].'").addClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
});
</script>');
}
echo('
</table>
</div>
</div>');
}
Мой код создает кнопку для каждого «устройства», находящегося в «devicearr». Но когда моя страница дважды вызывалась, и я нажимаю кнопку один раз, она регистрирует два события щелчка.
Пример того, что возвращается в данных? – Gary
Из того, что вы показали, обработчик кликов должен (и делает) выполнять только один раз: https://jsfiddle.net/RoryMcCrossan/1hesztbt/. Нам нужно увидеть рабочий пример проблемы, чтобы помочь вам –
Почему бы не '$ main.load (page, callback)'? – Dimava