How To Separate UUids For Jquery-Sortable

Question

I want to use jquery-ui sortable method for my larave project. When i was separate my <tr> rows with id, there is no problem.

Example;

<tr id="item-1">

But if I want to use uuids instead of id my tr row becoming like this:

<tr id="item-b20s0b82-dc01-4e9a-a7a6-cd60ff5f9165">

So, if i try to use like this way, it gives me error. I'm using "-" to separate but uuids also have "-"

How can i fix this? Thanks...

UPDATE:

index.blade part of the my table(trying to sortable)

<tbody id="sortable">
                @foreach($data['blogs'] as $blogs)
                    <tr id="item-{{$blogs->id}}">
                        <td>{{$loop->iteration}}</td>
                        <td><img width="100" src="/images/blogs/{{$blogs->blogs_file}}" alt=""></td>
                        <td class="sortable">{{$blogs->blogs_title}}</td>
                        <td>{{Illuminate\Support\Str::limit($blogs->blogs_content, 15)}}</td>
                        <td align="center" width="20">
                            <a href="#"><i
                                    class="fa fa-pencil-square"></i></a>
                        </td>
                        <td align="center" width="20">
                            <a href="javascript:void(0)"><i id="{{$blogs->uuid}}"
                                                            class="fa fa-trash-o"></i></a>
                        </td>
                    </tr>
                @endforeach
                </tbody>

jquery :

$(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#sortable').sortable({
                revert: true,
                handle: ".sortable",
                stop: function (event, ui) {
                    var data = $(this).sortable('serialize');
                    $.ajax({
                        type: "POST",
                        data: data,
                        url: "{{route('blogs.Sortable')}}",
                        success: function (msg) {

                            if (msg) {
                                alertify.success('İşlem Başarılı');
                            } else {
                                alertify.error('İşlem Başarısız');
                            }
                        }
                    });
                }
            });
            $('#sortable').disableSelection();
        });

BlogController:

public function sortable()
    {
        foreach ($_POST['item'] as $key => $value) {
            $blogs = Blogs::find(intval($value));
            $blogs->blogs_must = intval($key);
            $blogs->save();
        }
        echo true;
    }

In this usage, it work perfectly fine. But when i change <tr id="item-{{$blogs->id}}"> to

<tr id="item-{{$blogs->uuid}}">

it fails.

Answer 1

UPDATE: I finally figured it out.The problem coming this part:

var data = $(this).sortable('serialize');

So if i want to use UUIDs instead of IDs i should do this way:

In the tablebody;

id="item_{{$blogs->uuid}}"

Than my Jquery code:

var data = $(this).sortable('serialize',{expression: /(.+)_(.+)/ });

Now it's done.