Filling a div using each Jquery

Asked

Viewed 85 times

0

I have a modal rendering a partialView and I want to move 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 in view main class with "corpoPedido" all tr which have both "list" and " active" but I’m missing the syntax.

Can someone help me?

EDITED:

in 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>
                    }
                }

in the js of the 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
  • 1

    Post your code, because it is very vague, explaining what is happening with this code you posted, $(". corpoPedido", Parent.Document). text() Grabs all tags that have the body classPedido $(".lista.active"). each(Function () { /html/}) Grabs all tags q has the list and active classes

  • Sorry for the lack of information, I thought I could simplify my idea in order to make it easier to understand, I edited the post and put the codes as request @Marcoviniciussoaresdalalba

1 answer

0


I made some changes to your code, to work properly 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>
<!-- Latest compiled and minified CSS -->
<link rel="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>

<!-- Latest compiled JavaScript -->
<script src="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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.