Sort Images Script

[ben]

The following script is used in part 22 of the Image Gallery Tutorial at https://www.youtube.com/watch?v=agvNauJm3xI. This code can be copied and pasted into your document. For more information, go to https://jqueryui.com/sortable/#display-grid.

<!--sortableScript-->
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    $(function() {
      $( "#record" ).sortable({cursor: "move"},{revert:true},{scroll:true},{scrollSensitivity: 10},{tolerance: "pointer"});
      $( "#record" ).disableSelection();
      $( "#record" ).sortable({
        update: function( event, ui ) {
          var listItems = $('#record div');
          listItems.each(function(idx) {
            $(this).find('.cos').val(idx+1);
          });
        }
      });
    });
  </script>
<!--//sortableScript-->

[larabeer]

Hi @ben,

i’ve implemented a similar function with jquery-ui-sortable. The sortable elements (just a list which can be vertically sorted) are retrieved from a serverconnect-action. After resorting the elements and updating them in the database (which works fine), i have a problem that as soon as the serverconnect is being reloaded (e.g. after adding or deleting an element), the order is visually messed up (in the database and also in the serverconnect itself is correct, but in the browser its in the wrong order). I think it’s because the nodes somehow get cached; so for example i have a list:
A
B
C

when i drag “A” to the third position, the new order B, C, A is correctly saved. After serverconnect-reload, in the browser i see C, A, B. So the first serverconnect-element is actually displayed at the third position (in the node, which initially was the first node and has been manually dragged to the third position). Any ideas how to solve this? Hope you understand what i mean.

[ben]

Lara, Wappler now has its own sorting module. Have a look at

Inserting Data in Main and Sub Table using App Connect Form Repeat

Intro App Connect Form repeat makes it easy to insert or update nested data in your database tables using a single insert or update action. This way you can easily insert data in your main table as well as in its sub tables. In this tutorial we will show you how to store a user and its contacts. The user will be stored in the main table, while its contacts will be stored in a sub table. Database Structure Our database structure is quite simple. We have a main table called users, having an un…

Sortable is near the end as in