js / laravel-Как получить точный идентификатор пользователя из элемента

Question

Мне нужно найти решение, чтобы получить идентификатор пользователя из таблицы пользователей с помощью JavaScript или Laravel.Зачем мне это нужно?

Потому что мне нужно заполнить модальное всплывающее окно точной информацией для пользователей.У меня около 10 пользователей, их идентификаторы, и все они отображаются сейчас. Мне нужно получать информацию из базы данных, когда кто-то нажимает на этого пользователя и отображает его день рождения, имя, фамилию, изображение ....

вот мой код, где находится окно нашей модели с именем index.blade.php

@extends('layouts.app')

@section('includes')
    <link href="{{ url('org/css/jquery.orgchart.min.css') }}" rel="stylesheet">

    <script src="{{ url('org/js/jquery.orgchart.min.js') }}"></script>
    <script type="text/javascript">
        $(function () {


            $('#chart-container').orgchart({
                'data': $('#ul-data'),
                'verticalDepth': 40,
                'depth': 20
            });
            $('.orgchart').addClass('noncollapsable');


            $('.title').on('click', function() {
                $('#exampleModalLong').modal();
            });
        });
    </script>

    <style>
        .edge {
            display: block !important;
        }
</style>






@endsection


@section('content')




    <div class="container-fluid">
        <div class="header text-center">
            <h3 class="title">@lang('orgchart.title')</h3>
            <p class="category">@lang('orgchart.subtitle')</p>
        </div>



        <div class="col-md-12">
            <div class="card" style="padding: 20px; overflow: auto;">
                <ul id="ul-data" style="display:none;">
                    @foreach($categories as $category)
                        <li class="user-{{ $category->id }}">
                            {{ $category->getFullNameAttribute()}}
                            @if(count($category->childes))
                                @include('management.orgchart.manageChild',['childs' => $category->childes])
                            @endif
                        </li>
                    @endforeach
                </ul>
                <div id="chart-container"></div>
            </div>
        </div>
    </div>


    <script>
        //$('#myModal').modal();

    </script>

    {{-- POPUP WINDOW ON CLICK --}}

   
    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Popup Window title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
                    Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.

                    This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.

                    Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.

                    Kyle Fiedler from the Design Informer feels that distracting copy is your fault:

                    If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
                    Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.

                    Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.

                    Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    {{--<button type="button" class="btn btn-primary">Save changes</button>--}}
                </div>
            </div>
        </div>
    </div>


@endsection

А вот дочерний класс для той же оргструктуры

<ul>
    @foreach($childs as $child)
        <li class="user-{{ $child->id }}">
            {{ $child->getFullNameAttribute()}}
            @if(count($child->childes))
                @include('management.orgchart.manageChild',['childs' => $child->childes])
            @endif
        </li>
    @endforeach
</ul>

Answer 1

С вашей текущей настройкой вы помещаете идентификатор как часть класса.Таким образом, вы можете получить класс, назначенный элементу HTML, а затем разделить его, чтобы извлечь идентификатор

$("ul li")
  .click(function(event) {
    //event.target is what you clicked on
    //you can wrap it in a jQuert element via $() to use jQuery features
    var $el = $(event.target); 
    
    var htmlClass = $el.attr("class");
    
    var id = htmlClass.split("-")[1];
    
    console.log("My ID is: ", id);
  });

li {
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on a name:
<ul>
  <li class="user-1">Alice</li>
  <li class="user-2">Bob</li>
  <li class="user-3">Carol</li>
  <li class="user-4">David</li>
  <li class="user-5">Edel</li>
  <li class="user-6">Fred</li>
</ul>

Однако это может привести к ошибкам.Например, если у вас несколько классов, это может стать проблемой.Скажем, классы user user-1 item, тогда split("-") даст вам 1 item.Если больше классов имеют тире, то это еще большая проблема.

Вместо этого вы можете заставить свой шаблон генерировать пользовательский атрибут data-*.Эти атрибуты, которые вы можете вставить в HTML, предназначены для того, чтобы они были вам нужны - вы можете выбрать, как их зовут (после части data-) и что они хранят.Итак, если вы измените свой шаблон для генерации элементов, вы можете использовать data-user-id="{{ $child->id }}" и получить HTML, который выглядит следующим образом:

$(".user") //now we can use a common class, instead of having one per item
  .click(function(event) {
    var $el = $(event.target); 
    
    var id = $el.data("user-id");
    
    console.log("My ID is: ", id);
  });

.user {
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on a name:
<ul>
  <li class="user" data-user-id="1">Alice</li>
  <li class="user" data-user-id="2">Bob</li>
  <li class="user" data-user-id="3">Carol</li>
  <li class="user" data-user-id="4">David</li>
  <li class="user" data-user-id="5">Edel</li>
  <li class="user" data-user-id="6">Fred</li>
</ul>