javascript - JQuery an item.ID in the View -
continuing after previous question had answered: on click - make @html.displayfor editable text field
i trying movie item's id in jquery, need in "var" form.
i can .name via text box entry, cannot seem work code grab id. appreciated!
view snippet
@html.hiddenfor(modelitem => item.id) // <-- above 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 jquery lets me item-field's value
.on("focusout", "span.item-field", function (event) { console.log("this 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 .name i new jquery not sure if enough solve problem. more happy attach more code trying scope in on situation.
thanks!
edit
full view code context (only focus on first td in @foreach (var item in model), other td's not formatted yet till 1 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 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 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")
var id = $field.siblings("#id").val(); or
var id = $field.siblings("[name=id]").val();
Comments
Post a Comment