Атрибут data не работает для получения динамического c идентификатора из foreach - PullRequest
Новая
       37

Атрибут data не работает для получения динамического c идентификатора из foreach

1 голос
/ 14 февраля 2020

Я использую JS на странице бритвы, чтобы получить динамический c идентификатор из столбца в foreach.

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

Может кто-нибудь сказать мне, если я все еще делаю это правильно? Или если я что-то упустил. Спасибо.

Просмотр: 

            <div class="list-group container" id="JobRequestMonitorTable">
            <div class="row list-group-item list-group-item-heading container divTableHeading" style="margin-bottom:0px;">
                <div class="col-md-4"> Job Code </div>
                <div class="col-md-4"> Description </div>
                <div class="col-md-2"> Schedule </div>
                <div class="col-md-1"> Running </div>
                <div class="col-md-1"></div>
            </div>
            @if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
            {
                <div class="row list-group-item-danger">
                    <div class="col-md-1 text-center">@ViewBag.ErrorMessage</div>
                </div>
            }
            @foreach (var item in Model.JobRequests)
            {
                <div class="row list-group-item container">
                    <div class="hidden" data-id="@item.JobRequestId" id="requestId">@item.JobRequestId</div>
                    <div class="col-md-4">@item.JobCode</div>
                    <div class="col-md-4">@item.Description</div>
                    <div class="col-md-2">@item.Schedule</div>
                    @if (@item.IsRunning == true)
                    {
                        <div class="col-md-1" style="margin-left:25px;"><span class="glyphicon glyphicon-ok"></span></div>
                        <div class="col-md-1"></div>
                    }
                    else
                    {
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn"></button>
                        </div>
                    }
                </div>
            }
        </div>

JS: 

        $("button").click(function () {

            var col = $('#requestId');
            var jobRequestId = col.data('Id');

             $.ajax({
                url: '@Url.Action("JobPollerParameters", "Tools")',
                 data: { "jobRequestId": jobRequestId},
                 success: function (results) {

                    $modal = $('#paramsModal');
                    $modal.modal("show");               

                     var arr = results;
                     //loop through arr created from dictionary to grab key(s)
                     for (var key in arr) {
                         if (arr.hasOwnProperty(key)) {
                             var myKey = key;
                         }
                     }

                     var name = myKey;
                     var value = results[myKey];

                    $('#modalName').text(name);
                     $('#modalMessage').text(value);

                }
            });
        });

Действительно единственная важная часть, которую можно увидеть в JS, это var col = $('#requestId'); var jobRequestId = col.data('Id');

Но я полагаю, что я включу весь сценарий на случай, если люди спросят.

Ответы [ 3 ]

1 голос
/ 14 февраля 2020

Ваш l oop создает несколько элементов #requestId и #paramModalBtn, когда id атрибуты должны быть уникальными в DOM . Измените логи c, чтобы вместо них использовать общие классы. Затем вы можете пройти DOM, чтобы найти элементы, связанные с кнопкой, по которой вы нажали. Попробуйте это: 

$("button").click(function() {
  var $col = $(this).closest('.row').find('.requestId');
  var jobRequestId = $col.data('id');
  console.log(jobRequestId);
  
  // AJAX request...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="row list-group-item container">
  <div class="hidden requestId" data-id="foo-bar">Job #1</div>
  <!-- other content... -->
  <div class="col-md-1">
    <button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
  </div>
</div>

<div class="row list-group-item container">
  <div class="hidden requestId" data-id="lorem-ipsum">#Job #2</div>
  <!-- other content... -->
  <div class="col-md-1">
    <button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
  </div>
</div>
1 голос
/ 14 февраля 2020

Все ваши предметы внутри l oop получают одинаковый атрибут id, он жестко закодирован 

id="requestId"

селектор jQuery $('#requestId') возвращает первый , это специально.

Я бы добавил data-id к каждой кнопке и выбрал бы соответствующий столбец с этим идентификатором.

Например, кнопка получит: 

<button data-col-id="@item.JobRequestId" class="glyphicon glyphicon-list-alt btn btn-primary"></button>

И затем, легко получить эту информацию по клику: 

$("button").click(function () {

            var jobRequestId = $(this).data('col-id');

             $.ajax({
                url: '@Url.Action("JobPollerParameters", "Tools")',
                 data: { "jobRequestId": jobRequestId},
                 success: function (results) {

                    $modal = $('#paramsModal');
                    $modal.modal("show");               

                     var arr = results;
                     //loop through arr created from dictionary to grab key(s)
                     for (var key in arr) {
                         if (arr.hasOwnProperty(key)) {
                             var myKey = key;
                         }
                     }

                     var name = myKey;
                     var value = results[myKey];

                    $('#modalName').text(name);
                     $('#modalMessage').text(value);

                }
            });
        });

Мне нравится это решение, поскольку вы не зависите от своей HTML структуры и иерархии, поэтому селекторы не будут часто ломаться.

0 голосов
/ 14 февраля 2020

Если у вас есть кнопка для каждого элемента, вы также можете сохранить данные в атрибуте значения кнопки, что приводит к простой реализации в JS: 

$("button").click(function (e) {

    var jobRequestId = $(e.target).val();
    console.log(jobRequestId);

    $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId},
         success: function (results) {

            $modal = $('#paramsModal');
            $modal.modal("show");               

             var arr = results;
             //loop through arr created from dictionary to grab key(s)
             for (var key in arr) {
                 if (arr.hasOwnProperty(key)) {
                     var myKey = key;
                 }
             }

             var name = myKey;
             var value = results[myKey];

            $('#modalName').text(name);
             $('#modalMessage').text(value);

        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="1">Job 1</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="2">Job 2</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="3">Job 3</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="4">Job 4</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="5">Job 5</button>

Obs .: значение должно быть равно @item.JobRequestId примерно так: <button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="@item.JobRequestId">Job 5</button>

...