0

I have a table whose rows are made draggable using sortable property as mentioned below.

<script type="text/javascript">
    $(function () {
        $("#tblLookup1 tbody").sortable({
            items: 'tr',
            cursor: 'pointer',
            axis: 'y',
            dropOnEmpty: false,
            start: function (e, ui) {
                ui.item.addClass("selected");
                
            },

            stop: function (e, ui) {
                ui.item.removeClass("selected");

            },
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        });
    });

    
</script>

Now, once rows are dragged and dropped I have created an update button which is used to update the new order to database.

<input type="submit" class="btn CreateButtonColor" id="btnSave" value="Update"/>

Now I wish to have an alert, if the user drags and drops the rows and forgots to click on update, how to put warning so that user cannot navigate to other pages without saving?

warning something like below

if (confirm('Do you want to save the data before leaving?')) {
  // Update code
}
else
{
// do nothing
}

where shall I place the above block of code?

electro_guy
  • 19
  • 4

1 Answers1

0

To do what you require, set a flag on the table when something is dropped. When the user attempts to leave the page you can then check to see if that flag is set and display the warning:

$(function() {
  // set the flag on drop
  let $tbody = $("#tblLookup1 tbody").sortable({
    // ... settings
    receive: function(e, ui) {
      $tbody.data('is-dirty', true).find("tbody").append(ui.item);
    }
  });

  // remove the flag when submitting the form through the update button
  $('#yourForm').on('submit', () => $tbody.data('is-dirty', false));

  // check the flag when the user leaves the page and display 
  // a message if it's set
  window.addEventListener('beforeunload', () => {
    if ($tbody.data('is-dirty')) {
      return 'Do you want to save the data before leaving?';
    }
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • ``` $('#yourForm').on('submit', () => $tbody.data('is-dirty', false));``` ,for this line I need to clarify one thing , since I am not using any form but just a table with update button, what shall I replace #yourForm with...? – electro_guy Jul 05 '22 at 14:56
  • any idea about this? – electro_guy Jul 06 '22 at 09:19
  • In that case use the `click` event of your `button` – Rory McCrossan Jul 06 '22 at 09:33
  • I had tried that , but the problem is that the alert is not even appearing if I click on refresh or navigate to a different page, not sure why the beforeunload is not triggering... not sure if 'is-dirty' is getting assigned any value as I put alert statements inside the if block and nothing returned – electro_guy Jul 06 '22 at 11:32
  • Why is the page being transferred when you click the button? If it's not in a `form` then it won't do anything - unless you have some other JS code attached to it. In which case you need to remove it – Rory McCrossan Jul 06 '22 at 12:50