Napisałem prostą stronę bazodanową z wykorzystaniem JavaScript (jQuery)
Działa to tak, że w widoku głównym mam tabelę z danymi (w jednym divie), a w drugim divie mam widok edycji rekordu po kliknięciu (w osobnym divie, ale w tym samym pliku index.html).
Ten drugi div jest na początku ukrywany. Po kliknięciu w rekord otwiera się i można go zamknąć po kliknięciu przycisk "Zapisz" lub "Anuluj". I to w zasadzie działa.
Problem w tym, że w ogóle nie pomyślałem co w przypadku kliknięcia przycisku wstecz w przeglądarce. W tej chwili po kliknięciu z pozycji edycji rekordu, cofa mnie w ogóle z całej strony. a chciałbym, żeby po prostu cofnęło mnie do widoku tabeli, żeby div z edycją się zamknął/wyczyścił.
Czy mógłbym prosić o pomoc jakie jest dobre podejście w takiej funkcjonalności? Poniżej bardzo uproszczona strona, żeby zobrazować o co mi chodzi.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
</head>
<style>
#EditDiv
{
background-color: blanchedalmond;
}
#DetailsDiv
{
background-color:burlywood;
font-size: 30px;
width: 50%;
}
</style>
<body>
<div id="TableDiv">
<table id="testtable" style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Anna</td>
<td>Thompson</td>
<td>20</td>
</tr>
</table>
</div>
<div id="DetailsDiv" >
<p style="font-size: 30px; font-weight: bold;">
Edit row
</p>
<div id="EditDiv"></div>
</div>
</body>
<script>
$('#DetailsDiv').hide();
$("#testtable tr").click(function() {
$( "#EditDiv" ).empty();
$( "#EditDiv" ).append( $(this).children("td").html());
$('#DetailsDiv').show();
});
</script>
</html>