Code in index.php:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title></title>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script>
function carregaPagina(item, pai, filho, url) {
var caminho = item != null ? $(item).attr('data-click') : url;
if (item != null) {
if ($(item).attr('data-json') != null) {
$('#' + $(item).attr('local-json')).html($(item).attr('data-json'));
}
}
if (pai != "" && pai != null) {
$('#' + pai).slideToggle(1000);
}
$.ajax({
url: caminho,
cache: false,
dataType: "html",
success: function (data) {
$('#' + filho).slideToggle(0);
$('#' + filho).html(data);
$('#' + filho).slideToggle(1000, function () {
if (typeof completaLoad !== 'undefined' && $.isFunction(completaLoad)) {
completaLoad();
}
if ($('#' + pai).css('display') !== 'none') {
$('#' + pai).slideToggle(0);
}
});
}
});
return false;
}
$(document).ready(function () {
$(document).on('click', '.grid', function (e) {
if (e.handled !== true) {
carregaPagina(this, 'TelaConsulta', 'TelaEditar', null);
e.handled = true;
}
return false;
});
});
</script>
<style>
.grid, .item, .btnVoltar {
cursor: pointer;
}
#TelaConsulta {
background-color: #81BEF7;
}
#TelaEditar {
background-color: #58FAAC;
}
#TelaItem {
background-color: #F6D8CE;
}
</style>
</head>
<body>
<div id="TelaConsulta">
<ul>
<li><span class="grid" data-click="editar.php?id=25">Edit</span></li>
<li><span class="grid" data-click="editar.php?id=35">Edit</span></li>
</ul>
</div>
<div id="TelaEditar">
</div>
<div id="TelaItem">
</div>
</body>
</html>
Code in editar.php:
<script>
$(document).ready(function () {
$(document).on('click', '.item', function (e) {
if (e.handled !== true) {
debugger;
var url = 'item.php?id=<?php echo $_GET['id']; ?>';
carregaPagina(null, 'TelaEditar', 'TelaItem', url);
e.handled = true;
}
return false;
});
$('#TelaEditar .btnVoltar').click(function () {
$('#TelaEditar').slideToggle(1000, function () {
$('#TelaConsulta').slideToggle(1000);
$('#TelaEditar').empty();
$('#TelaEditar').removeAttr('style');
});
return false;
});
});
</script>
Id: <?php
echo $_GET['id'];
?><br><br>
<span class="item">Item</span><br><br>
<span class="btnVoltar">Voltar</span>
Code in item.php:
<script>
$(document).ready(function () {
$('#TelaItem .btnVoltar').click(function () {
$('#TelaItem').slideToggle(1000, function () {
$('#TelaEditar').slideToggle(1000);
$('#TelaItem').empty();
$('#TelaItem').removeAttr('style');
});
return false;
});
debugger;
});
</script>
Id: <?php echo $_GET['id']; ?><br><br>
<span class="btnVoltar">Voltar</span>
In the index.php file click on the 1st Edit.
Insert a debugger in Item button on editar.php note that when you click the button it opens the VM108 and return Id 25.
http://i.stack.imgur.com/RjWER.png
Insert a debugger in the load file item.php note that it opens the VM119 and return Id 25.
http://i.stack.imgur.com/qsljX.png
Soon after I click the back button on item.php file, and then the back button of editar.php. In the index.php file click on the 2nd Edit and return Id 35.
When you click the Item button on editar.php note that it reopens the VM108.
http://i.stack.imgur.com/hSQfj.png
When it appears the item.php file note that it opens the VM141 and return Id 25.
http://i.stack.imgur.com/2rbwf.png
This is my doubt, every time I open the editar.php it always returns me the VM108. When this occurs it is not being updated the item Id and generating the problem.
Link simulation: link
