2

I'm using JQueryUi Sortable to sort gallery with user friendly drag and drop.

Thing im sorting looks like :

 <div id="gallery"><div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div>
  <div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div><div>

and here actual simple sorting script:

<script> 
       $( function() {
       $( "#gallery" ).sortable();

       });
</script>

I want to create php string by inputing data-id's of divs into hidden input in this form. How would function what can do this looks like ?

<form name="sortForm" action="sortPics_submit.php" method="post">
         <input type="hidden" id="sortOrder" name="sortOrder">
        <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>

Thank You for any advice !

Július Ľuptovec
  • 337
  • 3
  • 12
  • so you want to get the `data-id` attributes for all the divs? but at which point you want to do this ? and are you doing it to save the sorted order to the database? – Muhammad Omer Aslam Feb 17 '18 at 14:40
  • I think JQuery has something like Update event that will be triggered when the user stop sorting and the DOM position is changed. So i could put this function in this event Or it could be on click of a button it doesn't matter. The point is that i'm absolute newbie in jQuery/javascript I just want to know how to create that string based on data-id's and put it in form. And yes it's for database – Július Ľuptovec Feb 17 '18 at 14:49
  • take a look [**`here`**](https://stackoverflow.com/questions/15633341/jquery-ui-sortable-then-write-order-into-a-database) – Muhammad Omer Aslam Feb 17 '18 at 14:51
  • I already saw that. I want to avoid using ajax. I just need function that will dynamicly input values into hidden input. – Július Ľuptovec Feb 17 '18 at 15:01
  • the thing I am trying to tell is that you can use the `update` event of the sortable, if you are trying to get the order of the divs then you should replace the ajax part with the code to get the order or the divs, what I don't get is that why you want to get the `data-id` attribute if you want the sort order you can just use `$(this).sortable('serialize');` to get the latest order and if it is not about the order of the divs then why using if after sorting? – Muhammad Omer Aslam Feb 17 '18 at 15:07
  • I need php string of divs data-ids that i can later transform to array with php explode function. I my question was wrong sorry. i updated that already i think i can use something like this: `document.getElementById('sortOrder').value = serialStr;` to place stuff into hidden input's value. But how do i create that variable "serialStr" with all the divs data-ids in right order ? – Július Ľuptovec Feb 17 '18 at 15:33
  • i added an answer for you please see if it helps – Muhammad Omer Aslam Feb 17 '18 at 15:34

1 Answers1

1

You can use the below function to concatenate all the data-id of the sortable divs in a comma separated format and then add it to the form input. see the demo below

function getData() {
  var string = '';
  $("#gallery>div[data-id]").each(function() {
    string += $(this).data('id') + ',';
  });
  return string.substr(0, string.length - 1);
}
$("#sortOrder").val(getData());
console.log(getData());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gallery">
  <div class="wrapper" data-id="2017554352.jpg">

  </div>
  <div class="wrapper" data-id="2017550052.jpg">

  </div>
</div>

<form name="sortForm" action="sortPics_submit.php" method="post">
  <input type="text" id="sortOrder" name="sortOrder">
  <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>
Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68