Jquery undefined

Question

Jquery undefined

Navigation

#1 by (0 votes)

0

I'm using VS 2013 to create a detail master view, for now when I click on the list with Jquery I should get the Id from the record, but I get undefined

 @model IEnumerable<MasterDetailsMVC4.Models.Orders>
@{
    ViewBag.Title = "Home Page";
}

@section styles{
    <style>
        .highlight {
            background-color: rgb(230,244,224);
        }
    </style>
    }

@section scripts{
    <script>
        $(function () {
            $("#master tbody tr").click(function () {
                $(this).addClass('highlight').siblings().removeClass('highlight');                
                var Id = this.cells[0].textContext;
                alert(Id);
            });
        });
    </script>
    }
    <h1>Master details using asp.net mvc 4</h1>
<br\></br\>
<h2>Orders</h2>

<table class="table " id="master">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CustomerID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EmployeeID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OrderDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RequiredDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShippedDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipVia)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Freight)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipAddress)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipCity)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipRegion)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipPostalCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipCountry)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CustomerID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.OrderDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RequiredDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShippedDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipVia)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Freight)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipCity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipRegion)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipPostalCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipCountry)
            </td>

        </tr>
    }

</table>


<h2>Orders Details</h2>

<table class="table " id="details">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CustomerID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EmployeeID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OrderDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RequiredDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShippedDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipVia)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Freight)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipAddress)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipCity)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipRegion)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipPostalCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ShipCountry)
        </th>
        <th></th>
    </tr>


    <tr>
        <td colspan="13">
            <p>Seleccione una orden</p>
        </td>


    </tr>


</table>

What changes should I make? *************************edition*********** This is the generated html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <style>
        .highlight {
            background-color: rgb(230,244,224);
        }
    </style>

</head>
<body>






    <h1>Master details using asp.net mvc 4</h1>
<br\></br\>
<h2>Orders</h2>

<table class="table " id="master">
    <tr>
        <th>
            CustomerID
        </th>
        <th>
            EmployeeID
        </th>
        <th>
            OrderDate
        </th>
        <th>
            RequiredDate
        </th>
        <th>
            ShippedDate
        </th>
        <th>
            ShipVia
        </th>
        <th>
            Freight
        </th>
        <th>
            ShipName
        </th>
        <th>
            ShipAddress
        </th>
        <th>
            ShipCity
        </th>
        <th>
            ShipRegion
        </th>
        <th>
            ShipPostalCode
        </th>
        <th>
            ShipCountry
        </th>
        <th></th>
    </tr>

        <tr>
            <td>
                VINET
            </td>
            <td>
                5
            </td>
            <td>
                04/07/1996 12:00:00 a.m.
            </td>
            <td>
                01/08/1996 12:00:00 a.m.
            </td>
            <td>
                16/07/1996 12:00:00 a.m.
            </td>
            <td>
                3
            </td>
            <td>
                32,38
            </td>
            <td>
                Vins et alcools Chevalier
            </td>
            <td>
                59 rue de l&#39;Abbaye
            </td>
            <td>
                Reims
            </td>
            <td>

            </td>
            <td>
                51100
            </td>
            <td>
                France
            </td>

        </tr>

javascript jquery undefined

asked by Jhon Hernández 26.06.2018 в 02:47

source

1 answer

XamarinForms-error CS0246: The name of the type or namespace 'X' (missing a using directive or an assembly reference?) python - 'QPushButton' object is not callable

score 0 · Answer 1

When you do [0] you already lose all options (methods and variables) of jquery. Use'find' to continue filtering and to get the text of the html use the function'text', it would fit like this

$(function () {
    $("#master tbody tr").click(function () {
        $(this).addClass('highlight').siblings().removeClass('highlight');                
        var Id = $(this).find('th:nth-child(1)').text();
        alert(Id);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table class="table" id="master">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>