JQuery an item.ID in the View

Question

Continuing after a previous question I had answered: On Click - Make @Html.DisplayFor an editable text field

I am trying to get a movie item's ID in JQuery, I just need it in a "var" form.

I can currently get the .Name via a text box entry, but I cannot seem to work this code to grab the ID. Any help appreciated!

View snippet

@Html.HiddenFor(modelItem => item.ID) // <-- this is above it a bit
<span class="item-display">
     <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Name)</span>
</span>

<span class="item-field">
     @Html.EditorFor(modelItem => item.Name)   
</span>

Here is the JQuery that lets me get the item-field's value

.on("focusout", "span.item-field", function (event) {
        console.log("this is a log");
        var $field = $(event.currentTarget),
        $display = $field.prev("span.item-display");
        $display.html($field.find(":input:first").val());
        $display.show();
        $field.hide();

        var name1 = $field.find(":input:first").val(); // get's the .Name

I am very new to JQuery so I am not sure if this is enough to help solve my problem. I am more than happy to attach more code I am just trying to scope in on the situation.

Thanks!

EDIT

Full View code for context (only focus on the first td in @foreach (var item in Model), the other td's are not formatted yet till I get this one working.

@model IEnumerable<WebApplication2.Entities.Movie>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    table tr button {
        opacity: 0.5;
        float: right;
    }

    table tr:hover button {
        opacity: 1;
    }
</style>

<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
    </div>

    <div class="col-lg-offset-8 col-lg-4">
        <button type="button" style="margin:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>

    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">




        <tr>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
            </th>
            <th>
                @using (Html.BeginForm("Index", "Movie"))
                {
                    <div class="dropdown">
                        <select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; width:40%; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter">
                            <option value="0" disabled selected>Filter By...</option>
                            <option value="1">Movie Name</option>
                            <option value="2">Description</option>
                        </select>
                    </div>

                    <input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; width:50%; text-align:center; height:35px; font-size:20px" placeholder="enter text" />
                    <button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; width:10%; height:36px; opacity:1" value="" />
                }
            </th>
        </tr>

        @foreach (var item in Model)
        {
            @Html.HiddenFor(modelItem => item.ID)
            <tr>
                <td class="col-lg-2">

                    <span class="item-display">
                        <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Name)</span>
                    </span>

                    <span class="item-field">
                            @Html.EditorFor(modelItem => item.Name)   
                    </span>

                </td>
                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.ReleaseDate)</span>
                    </span>
                    <span class="item-field">
                        @using (Html.BeginForm())
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(true)
                            @Html.HiddenFor(modelItem => item.ID)


                            @Html.EditorFor(modelItem => item.ReleaseDate)

                            @Html.ValidationMessageFor(modelItem => item.Name)
                            <button type="submit" value="Save" class="form-group  btn-success col-lg-11"><span style="margin-right: 5px" class="glyphicon glyphicon-floppy-save"></span>Save</button>
                        }
                    </span>
                </td>
                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px; font-style:italic">@Html.DisplayFor(modelItem => item.Description)</span>
                    </span>
                    <span class="item-field">
                        @using (Html.BeginForm())
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(true)
                            @Html.HiddenFor(modelItem => item.ID)


                            @Html.EditorFor(modelItem => item.Description)

                            @Html.ValidationMessageFor(modelItem => item.Name)
                            <button type="submit" value="Save" class="form-group  btn-success col-lg-11"><span style="margin-right: 5px" class="glyphicon glyphicon-floppy-save"></span>Save</button>
                        }
                    </span>
                </td>
                <td class="col-lg-3 col-lg-offset-1">
                    <span class="item-display">
                        <button type="button" class="btn btn-warning col-lg-4" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.ID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
                    </span>
                    <span class="item-display">
                        <button type="button" class="btn btn-danger col-lg-4 col-lg-offset-4" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.ID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        Movie ID: @Html.DisplayFor(modelItem => item.ID)
                        <br />
                        Placeholder
                    </p>
                </td>
            </tr>

        }
    </table>
    <span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />click for details</span>
</div>

<script>

    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("td[colspan=12]").addClass("nopadding");

        $("tr").click(function () {
            var $target = $(this);
            var $detailsTd = $target.find("td[colspan=12]");
            if ($detailsTd.length) {
                $detailsTd.find("p").slideUp();
                $detailsTd.addClass("nopadding");
            } else {
                $detailsTd = $target.next().find("td[colspan=12]");
                $detailsTd.find("p").slideToggle();
                $detailsTd.toggleClass("nopadding");
            }
        });
    });

</script>

<script>
        $(document.documentElement)
        .on("click", "span.item-display", function (event) {
            $(event.currentTarget)
                .hide()
                .next("span.item-field")
                .show()
                .find(":input:first")
                .focus()
                .select();
        })
        .on("focusout", "span.item-field", function (event) {
            console.log("this is a log");
            var $field = $(event.currentTarget),
            $display = $field.prev("span.item-display");
            $display.html($field.find(":input:first").val());
            $display.show();
            $field.hide();

            var id1 = $field.find(":input:first").attr('id');
            alert(id1);
            var name1 = $field.find(":input:first").val();

            $.post(  
                '@Url.Action("UpdateTitle", "Movie")',
                 {
                    'id': '1',
                    'name': name1
                },
                function(data){},
                "json" 
            );
        });
    </script>
@Scripts.Render("~/bundles/myscript")

Answer 1

What I did was add a hidden field to store my ID

<span style="visibility:hidden">@Html.DisplayFor(modelItem => item.ID)</span>

then I just navigated to it. For this instance I had to use the code below, as $this was in two span's before my current location.

var id = $(this).prev("span").prev("span").text();

Answer 2

can use this

 var name1 = $field.find("[id$=Name]").val();

Answer 3

var ID = $field.siblings("#ID").val();

or

var ID = $field.siblings("[name=ID]").val();