jQuery popup screen fills a field , but values are lost when (by accident) F5 (refresh) is clicked.

jQuery popup screen fills a field , but values are lost when (by accident) F5 (refresh) is clicked.

Hello everybody,

in my PHP file, by clicking a button, I'm giving the user a popup screen to enter some data. 
Once OK is clicked, the data is put into an array and  shown on the "underlying" page.

But, when the user presses F5 by accident, the values are lost because the HTML of the screen part is empty by origin. 

How can I prevent this ?

Greetings and thanks in advance,

Davy

  1. // *************************************************************************************************************
  2. // Scherm Toevoegen onderdelen
  3. // *************************************************************************************************************
  4. $('#extrascherm').click(function () {
  5. $("#overlay3").show();
  6. $("#modal3").show("slow");
  7. $("#mat_type2").val($(this).attr("data-materiaaltype"));
  8. $.getJSON("select.php",{mat_type: $(this).attr("data-materiaaltype")}, function(data){
  9.         var options = '';
  10. var len = data.length;
  11. options = "<option value='0'>Maak uw keuze...</option>";
  12.             for (var i = 0; i < len; i++) {
  13.             options += '<option value=\'' + data[i].ID+ '\'>' + data[i].Benaming + '</option>';
  14. }
  15.            $("#mat_naam2").html(options);
  16. });
  17. });

  18. function display_table_onderdelen() {
  19. var new_text = '';
  20. new_text = '<table><tr><td colspan="4"><h1>Extra onderdelen</h1></td></tr><tr><th></th><th>Onderdeel</th><th>Aantal</th></tr>';

  21. $.each(onderdelenarr, function(i , val) {
  22. new_text += "<tr>";
  23. new_text += '<td width="20px"><img src="images/delete.png" alt="X" title="REMOVE row" class="deleteButton2"></td>';
  24. $.each(val, function(index, value) {
  25. if (index != "onderdeelID") {
  26. new_text += "<td>" + value + "</td>";
  27. }
  28. });
  29. new_text += '</tr>';
  30. });

  31. new_text += '</table>';
  32.     
  33. $('#onderdelenarr').val(JSON.stringify(onderdelenarr));
  34. $("#onderdelen").html(new_text);
  35. $('#onderdelen').show();
  36. }

  37. $('body').on('click', '.deleteButton2', function(e) {
  38. // eerst zoeken welke knop het is
  39. var index = $(this).index('.deleteButton2');
  40. remove_row_onderdelen(onderdelenarr, index);
  41. });

  42. /** remove an item from an array. */
  43. function remove_row_onderdelen(rows, index) {
  44. rows.splice(index, 1);   // haalt element index weg en laat de rest mooi staan

  45. if (rows.length == 0) {
  46. $('#onderdelenarr').val("");
  47. $("#onderdelen").html("");
  48. $('#onderdelen').hide();
  49. }
  50. else {
  51. display_table_onderdelen();
  52. }
  53. }

  54. $('#sluiter3').click(function () {
  55. if ($('#mat_naam2').val() > 0 && $('#onderdeel_aantal').val() > 0) {
  56. onderdelenarr.push({ 
  57. onderdeelID: $('#mat_naam2').val(), 
  58. onderdeelNaam: $('#mat_naam2 option:selected').text(),  
  59. aantal: $('#onderdeel_aantal').val() 
  60. });

  61. alertify.set({ delay: 3000 });
  62. alertify.success("Gegevens toegevoegd !");

  63. display_table_onderdelen();
  64. $("#mat_naam2").val('0');
  65. $("#onderdeel_aantal").val("");
  66. }
  67. else
  68. {
  69. alertify.set({ delay: 3000 });
  70. alertify.error("Foute gegevens ingevuld of vergeten !");
  71. }
  72. });
  73. $('#cancel_button3').click(function () {
  74. $("#modal3").hide("slow");
  75. $("#overlay3").hide();
  76. });