Filling in a div using each Jquery

Question

Filling in a div using each Jquery

Navigation

#1 by (0 votes)

0

I have a modal that renders a partialView and I want to pass from this modal to screen view main a dynamic list of listed objects that are selected by the user

$(".corpoPedido", parent.document).text($(".lista.active").each(function () { /*html*/}))

I want to insert the result into a div into the view principal with the class "request_body" all tr that have both the "list" class and "active" but I'm missing the syntax.

Can anyone help me?

EDITED:

in the modal:

 @if (Model != null)
                {
                    foreach (var item in Model)
                    {
                        <tr class="lista" data-codigo="@item.CODIGO" data-img="@item.img" data-desc="@item.Descricao" 
                            data-un="@item.UN" data-grupo="@item.Grupo" data-preco="@item.preco" data-qnt="@item.Quantidade">
                            <td class="col-sm-1">
                                @Html.DisplayFor(modelItem => item.CODIGO)
                            </td>
                            <td class="col-sm-1">
                                @Html.DisplayFor(modelItem => item.img)
                            </td>
                            <td class="col-sm-3">
                                @Html.DisplayFor(modelItem => item.Descricao)
                            </td>
                            <td class="col-sm-1">
                                @Html.DisplayFor(modelItem => item.UN)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.Grupo)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.preco)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.Quantidade)
                            </td>
                        </tr>
                    }
                }

no js from this same page:

$(".corpoPedido", parent.document).text($(".lista.active").each(function () {
                    '<div class="row" data-img="'+$(this).attr('data-img')+'"> '+
                    '<div class="col-sm-1">' +
                        '<p>'+$(this).attr('data-codigo')+'</p>' +
                    '</div>' +
                    '<div class="col-sm-4">' +
                        '<p>'+$(this).attr('data-desc')+'</p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<p>'+$(this).attr('data-un')+'</p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<p>'+$(this).attr('data-grupo')+'</p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<p>'+$(this).attr('data-preco')+'</p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<p>' + $(this).attr('data-qnt') + '</p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<p class="total"> </p>' +
                    '</div>' +
                    '<div class="col-sm-1">' +
                        '<input type="submit" value="X" class="btn btn-danger cancelItem" />' +
                    '</div>'
                }))

in main view

<div class="table well"style="margin-top:15px">
            <div class="row linha">
                <div class="col-sm-1">
                    <b>Código</b>
                </div>
                <div class="col-sm-4">
                    <b>Descrição</b>
                </div>
                <div class="col-sm-1">
                    <b>Und.</b>
                </div>
                <div class="col-sm-1">
                    <b>Grupo</b>
                </div>
                <div class="col-sm-1">
                    <b>Quantidade</b>
                </div>
                <div class="col-sm-1">
                    <b>Preço</b>
                </div>
                <div class="col-sm-1">
                    <b>Total</b>
                </div>
                <div class="col-sm-1">

                </div>
            </div>
            <div class="row corpoPedido"></div>
        </div>

jquery

asked by anonymous 21.11.2016 / 17:19

1 answer

How to access the elements of Tupla? How to extract data from a Django QuerySet

score 0 · Accepted Answer

I made some changes to your code so that it works correctly, I believe this is what I was looking for.

$(document).ready(function() {
  var html = "<div class='col-xs-12'>";
  $(".lista.active").each(function() {
    html += '<div class="row" data-img="' + $(this).attr('data-img') + '"> ' +
      '<div class="col-xs-2">' +
      '<p>' + $(this).attr('data-codigo') + '</p>' +
      '</div>' +
      '<div class="col-xs-2">' +
      '<p>' + $(this).attr('data-desc') + '</p>' +
      '</div>' +
      '<div class="col-xs-2">' +
      '<p>' + $(this).attr('data-un') + '</p>' +
      '</div>' +
      '<div class="col-xs-1">' +
      '<p>' + $(this).attr('data-grupo') + '</p>' +
      '</div>' +
      '<div class="col-xs-1">' +
      '<p>' + $(this).attr('data-preco') + '</p>' +
      '</div>' +
      '<div class="col-xs-2">' +
      '<p>' + $(this).attr('data-qnt') + '</p>' +
      '</div>' +
      '<div class="col-xs-1">' +
      '<p class="total"> </p>' +
      '</div>' +
      '<div class="col-xs-1">' +
      '<input type="submit" value="X" class="btn btn-danger cancelItem" />' +
      '</div></div>'
  });

  $(".corpoPedido").html(html);


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!--LatestcompiledJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table>
  <tr class="lista active" data-codigo="1" data-img="2" data-desc="3" data-un="3" data-grupo="4" data-preco="5" data-qnt="6">
    <td class="col-sm-1">1</td>
    <td class="col-sm-1">2</td>
    <td class="col-sm-3">3</td>
    <td class="col-sm-1">4</td>
    <td class="col-sm-2">5</td>
    <td class="col-sm-2">6</td>
    <td class="col-sm-2">7</td>
  </tr>
  <tr class="lista active" data-codigo="12" data-img="23" data-desc="34" data-un="45" data-grupo="56" data-preco="67" data-qnt="78">
    <td class="col-sm-1">12</td>
    <td class="col-sm-1">23</td>
    <td class="col-sm-3">34</td>
    <td class="col-sm-1">45</td>
    <td class="col-sm-2">56</td>
    <td class="col-sm-2">67</td>
    <td class="col-sm-2">78</td>
  </tr>
</table>


<div class="table well" style="margin-top:15px">
  <div class="row linha col-xs-12">
    <div class="col-sm-1 col-xs-2">
      <b>Código</b>
    </div>
    <div class="col-sm-4 col-xs-2">
      <b>Descrição</b>
    </div>
    <div class="col-sm-1 col-xs-1">
      <b>Und.</b>
    </div>
    <div class="col-sm-1 col-xs-1">
      <b>Grupo</b>
    </div>
    <div class="col-sm-1 col-xs-2">
      <b>Quantidade</b>
    </div>
    <div class="col-sm-1 col-xs-1">
      <b>Preço</b>
    </div>
    <div class="col-sm-1 col-xs-1">
      <b>Total</b>
    </div>
  </div>
  <div class="row corpoPedido"></div>
</div>