تأكيد بسيط مشروط / المنبثقة-مفك 5/التمهيد 3
https://stackoverflow.com//questions/24001844
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أحاول المتابعة مع أدلة مشروطة/منبثقة بسيطة من أجل الحصول على حوار تأكيد حذف لطيف ولكن لا يمكنني أبدا الحصول على أي منها للعمل.
الشخص الذي أعمل عليه حاليا يتلاشى الشاشة ببساطة ولكن لا يظهر أي حوار.هذا واحد مأخوذ من: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
بلدي ديليتفونكتيون الحالي يعمل على هذا النحو:
زر
<span class="item-delete-button">
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
مسج
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
$(element).closest("table").removeClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
$(document).ready(function () {
var answer = confirm("Are you sure you want to delete this movie?");
if (answer) {
$.post(
'@Url.Action("customDelete", "Movie")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").remove();
return true;
} else {
$(element).closest("tr").css('background-color', 'initial');
return false;
}
});
}
كل ما أريده هو تأكيد حذف بسيط.
لقد نظرت إلى أكثر من 20 بعض الأدلة الآن وما زلت لا أستطيع الحصول على أي شيء لتنفيذه بشكل صحيح.(تشغيل التصحيح في كروم كذلك)
هنا وجهة نظري بأكملها ، ربما هناك شيء متضارب...?(جديد على كل هذا)
شكرا لك على أي وجميع المساعدة!
@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-10 col-lg-2">
<button type="button" style="margin-top:3px; margin-bottom: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:48%; 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:12%; height:36px; opacity:1" value="" />
}
</th>
</tr>
@foreach (var item in Model)
{
<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">
@Html.EditorFor(modelItem => item.ReleaseDate)
</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">
@Html.EditorFor(modelItem => item.Description)
</span>
</td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
@*<span class="item-delete-button">
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>*@
<!-- Button HTML (to Trigger Modal) -->
<span class="item-delete-button">
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
</span>
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</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 Movie 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>
function editFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
$(element).closest("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
}
function saveFunction(element) {
var three = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
var one = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
if (one == "" || three == "" || two == "") {
if (one == "") {
alert("invalid name");
}
if (two == "") {
alert("invalid date");
}
if (three == "") {
alert("invalid desc");
}
} else {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
$(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
var newID = $(element).closest("td").find("span.ID").text();
var newName = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").text();
var newRelease = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
var newDescription = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
$.post(
'@Url.Action("customEdit", "Movie")',
{
'id': newID,
'name': newName,
'date': newRelease,
'desc': newDescription
},
function (data) { },
"json"
);
}
}
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
$(element).closest("table").removeClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
$(document).ready(function () {
var answer = confirm("Are you sure you want to delete this movie?");
if (answer) {
$.post(
'@Url.Action("customDelete", "Movie")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").remove();
return true;
} else {
$(element).closest("tr").css('background-color', 'initial');
return false;
}
});
}
</script>
@Scripts.Render("~/bundles/myscript")
المحلول
لست متأكدا لماذا كان هذا من الصعب جدا ، ولكن في نهاية المطاف حصلت عليه للعمل.
زر
<!-- Modal Button-->
<span class="item-delete-button">
<button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
Delete
</button>
</span>
مشروط
<div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete</h4>
</div>
<div class="modal-body">
<span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.YOUR_ITEM)?</span>
</div>
<div class="modal-footer">
<button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button>
</div>
</div>
</div>
</div>
ملاحظة: #@item.ID, ، هو بلدي @modelمعرف وجهة نظري ، كما بنيت وجهة نظري List من العناصر من قاعدة البيانات الخاصة بي.
لا تنتمي إلى StackOverflow
