I am having a jquery data table in which there is a description field, I want to limit the words to 30 and add a show more link. when the user clicks on the show more the comment of that particular id will open in the bootstrap modal. Till now I am able to do this much, but the comment is not coming in the bootstrap modal.
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('FeedbackID');
$(".modal-body #commentdesc").val(mycomment);
});
$('#FeedbackDetails').DataTable({
"processing": true,
"ajax": {
"url": "/ViewFeedback/LoadData",
"type": "GET",
"datatype": "json"
},
"lengthMenu": [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "All"]
],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
var oSettings = this.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
"columns": [
{ "data": null, "autoWidth": true },
{ "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
{ "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
{ "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
{ "data": "Designation", "name": "Designation", "autoWidth": true },
{ "data": "Organization", "name": "Organization", "autoWidth": true },
{ "data": "ContactNo", "name": "Contact No", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{
"data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,
'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth();
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
],
columnDefs: [{
targets: 3,
data:"FeedbackID",
render: function (data, type, row, meta) {
if (type === 'display' && data.length > 40) {
return '<span title="' + data + '">' + data.substr(0, 38) + '...Show More';
}
else {
return data;
}
}
}],
"language": {
"emptyTable": "No Events Found Related To This User"
}
});
});
</script>
<div class="container" style="margin-top:10px">
<table id="FeedbackDetails" class="ui celled table">
<thead>
<tr>
<th>S.No</th>
<th>User Name</th>
<th>Email ID</th>
<th>Comment</th>
<th>Designation</th>
<th>Organization</th>
<th>Contact No</th>
<th>City</th>
<th>Feedback Date</th>
</tr>
</thead>
</table>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id="commentdesc"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
public ActionResult LoadData()
{
using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())
{
var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();
return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
}
}
I cannot find the comment div in your modal with id #commentdesc.
So change your modal HTML to:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id="commentdesc"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then show the modal when the link is clicked. Also to get your comment change to $(this).data('id'); and
since you are using paragraph tag set its html and not val properties
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('id');
$(".modal-body #commentdesc").html(mycomment);
$('#myModal').modal('show');
});
Also if your jquery selector is by ID, there is no need to search it within a class: $(".modal-body #commentdesc").val(mycomment); change that to $("#commentdesc").val(mycomment);
Related
Objective: Hide buttons for action Delete and Edit based on UserRole
Did some research and attempted a couple of solutions but unfortunately doesn't get the desired result.
#model IEnumerable<VmSTicketing.Models.Ticket>
#using VmSTicketing.Utility;
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
var RoleCheck = (User.IsInRole(SD.Role_Manager) ? "true" : "false");
}
<br />
<div class="row">
<div class="col-6">
<h2 class="text-primary">Lista tiketa</h2>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> Novi tiket</a>
</div>
</div>
<br />
<div class="p-4 border rounded">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-dark">
<tr class="table-info">
<th>Opis</th>
<th>Datum i vrijeme slanja</th>
<th>Vrsta Tiketa</th>
<th>Status</th>
#*<th>Datum i vrijeme zavrsetka</th>*#
<th>Korisnik</th>
<th></th>
</tr>
</thead>
</table>
</div>
<partial name="UserDetails" />
#section Scripts{
<script src="~/js/ticket.js"></script>
}
Here is my JavaScript and calling DataTable
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Manager/Ticket/GetAll"
},
"columns": [
{ "data": "description", "width": "10%" },
{ "data": "dateAndTime", "width": "15%" },
{ "data": "ticketType.name", "width": "10%" },
{ "data": "status", "width": "10%" },
{
"data": "applicationUser.name",
"width": "10%",
"render": function (data) {
return '<a id="' + data + '" class="text-info user-details" data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
}
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-info-circle"></i>
</a>
<a href="/Manager/Ticket/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-edit"></i>
</a>
<a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
<i class="fas fa-trash-alt"></i>
</a>
</div>
`;
}, "width": "15%"
}
]
});
}
$("#tblData").on("click", "a.user-details", function () {
var name = $(this).attr('id');
$.get("/Manager/Ticket/GetByName?name=" + name, function (result) {
$('#ImePrezime').val(result.data[0].name);
$('#Email').val(result.data[0].email);
$('#BrTel').val(result.data[0].phoneNumber);
$("#userDetails").modal({ show: true })
});
});
function Delete(url) {
swal({
title: "Da li ste sigurni da zelite izbrisati tiket?",
text: "Necete moci vratiti podatke!",
icon: "warning",
buttons: true,
dangerMode: true
}).then((willDelete) => {
if (willDelete) {
$.ajax({
type: "DELETE",
url: url,
success: function (data) {
if (data.success) {
toastr.success(data.message);
dataTable.ajax.reload();
}
else {
toastr.error(data.message);
}
}
});
}
});
}
REFERENCE
Hide buttons when no result on filtering
Role based column visibility
When I press the delete button in my DataTable it should bring me to the DeleteUserConfirm view. I can see that the data needed to display the page is being passed. However, the page is not displaying and I do not receive any errors. Any thoughts or suggestions to fix this would be greatly appreciated!
The code for the DataTable is below:
<html>
<head>
<!--CSS for DataTables-->
<link href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<h1>All Accounts</h1>
<br />
<br />
<div>
<table id="allAccounts" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Organization</th>
<th>State</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div>
<a asp-action="Index">Back to Home</a>
</div>
</body>
</html>
#section Scripts{
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#allAccounts').DataTable(
{
"responsive": true,
"ajax": {
"url": "/api/User/GetUsers",
"dataSrc": ""
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Organization" },
{ "data": "State" },
{
"data": "Id",
"render": function (data, type, row, meta) {
return "<button class='btn btn-danger' style=margin-right:5px; onclick=DeleteUser(" + row.Id + ")>Delete</button>"
}
}
]
});
});
function DeleteUser(data) {
$.ajax({
"type": "POST",
"url": "/api/User/Delete/",
"data": JSON.stringify(data),
"contentType": "application/json; charset=utf-8"
})
}
</script>
}
Once the delete button is clicked, the data is sent to the Delete method in the User Controller, which is an API Controller. The code for the Delete method is below:
[HttpPost]
public IActionResult Delete([FromBody] int data)
{
return RedirectToAction("DeleteUserConfirm", "Home", new { id = data });
}
The Delete method in the User Controller redirects to the Home Controller where the data is passed and the DeleteUserConfirm view should be displayed. The DeleteUserConfirm method from the Home Controller is below:
[HttpGet]
public IActionResult DeleteUserConfirm(int id)
{
return View(_userRepository.GetUser(id));
}
The code for the DeleteUserConfirm view is below:
#model Project.Models.User
#{
ViewData["Title"] = "Confirm Rejection/Deletion";
}
<h1>Confirm Account Rejection/Deletion</h1>
<br/>
<br/>
<h4>Are you sure you want to reject and delete this account?</h4>
<div>
<hr />
<dl class="row">
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.FirstName)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.FirstName)
</dd>
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.LastName)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.LastName)
</dd>
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.EmailAddress)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.EmailAddress)
</dd>
<dt class="col-sm-2">
#Html.DisplayNameFor(model => model.PhoneNumber)
</dt>
<dd class="col-sm-10">
#Html.DisplayFor(model => model.PhoneNumber)
</dd>
</dl>
<form asp-action="DeleteUser">
<input type="hidden" name="id" value="#Model.Id" />
<input type="submit" value="Delete" name="submit" class="btn btn-danger" /> |
<input type="submit" value="Cancel" name="submit" class="btn btn-primary" formnovalidate />
</form>
<br/>
<a asp-action="Accounts">Back to Account Management</a>
</div>
I make it all the way to the DeleteUserConfirm method in the Home Controller. I can see that the user is being retrieved from the GetUser(Id) method. I just do not get taken to the view itself.
You won't be able to RedirectToAction in the controller because your request is coming from client side via ajax.
Instead, just redirect directly to your DeleteUserConfirm when the user clicks the button.
$(document).ready(function () {
$('#allAccounts').DataTable(
{
"responsive": true,
"ajax": {
"url": "/api/User/GetUsers",
"dataSrc": ""
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Organization" },
{ "data": "State" },
{
"data": "Id",
"render": function (data, type, row, meta) {
return "<a class='btn btn-danger' style='margin-right:5px;' href='/Home/DeleteUserConfirm/" + row.Id + "'>Delete</a>"
}
}
]
});
});
}
You cannot do it this way using ajax. Returning a view is possible, but you need to update it manually via javascript. Currently your ajax is not doing anything after successful request. Update your ajax to this:
$.ajax({
"type": "POST",
"url": "/api/User/Delete/",
"data": JSON.stringify(data),
"contentType": "application/json; charset=utf-8"
}).done(function(html){
$('#Container').html(html);
}).fail(function(){
console.error('error');
});
and ideally, you should return PartialView from controller.
[HttpGet]
public IActionResult DeleteUserConfirm(int id)
{
return PartialView(_userRepository.GetUser(id));
}
You may have to call home/DeleteUserConfirm/ directly in ajax, but you can try with API to see if its working.
or if you just need to redirect to another page, do it in done callback.
$.ajax({
"type": "POST",
"url": "/api/User/Delete/",
"data": JSON.stringify(data),
"contentType": "application/json; charset=utf-8"
}).done(function(){
window.location.href = 'url';
}).fail(function(){
console.error('error');
});
I'm developing an application with asp.net mvc. I am not doing a screen for preparing questions for surveys and answers to these questions. On the home screen is a table of questions. When I press 'add new question' button, I open a popup with jquery and add the question and answer options in this question ('popup is independent of the main screen, ie Layout = null'). Then, when the 'submit' button of this popup is pressed, I validate the form in the popup with javascrit in addOrEdit.cshtml. If the validation is successful, my goal is to submit the form submit event of asp.net mvc to the javascript function on the main page. I can't do this. Where am I making a mistake. What is the problem. I tried to explain it in an explanatory way. I also added screenshots and codes.
Index.cshtml
#{
ViewBag.Title = "Soru Listesi";
}
<h2>Add Question</h2>
<a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('#Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>
//table heree
Index.cshtml sectionscript
#section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
//datatable script hereee.....
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: true,
title: 'Soru Detay',
modal: true,
height: 'auto',
width: '700',
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
alert('gel babanaaa');
if ($(form).valid()) {
alert('validd');
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
Popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message,
{
globalPosition: "top center",
className: "success",
showAnimation: "slideDown",
showDuration: 500,
gap: 1000
});
}
}
});
}
}
</script>
}
AddOrEdit.cshtml
#model MerinosSurvey.Models.Questions
#{
Layout = null;
}
#using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { #class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
// other component heree
<div class="form-group row">
<input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
<input type="reset" value="Reset" class="btn btn-secondary" />
</div>
}
AddOrEdit.cshtml scripts
<script>
//some scriptt for validationn...
$("#btnSubmit").click(function (event) {
var form = $("#questionForm");
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
// Perform ajax submit here...
if ($(form).valid()) {
form[0].submitEvent();//MY PROBLEM!!!!!
}
});
</script>
I want to call SubmitForm event in asp.net mvc after button click and validation. And I used form[0].submitEvent(); SO I can't send a request via AJAX. but I doesn't work.
replaces your Index.cshtml with the code below
#{
ViewBag.Title = "Soru Listesi";
}
<h2>Add Question</h2>
<a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('#Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>
<table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 100%">
<thead>
<tr>
<th>Soru No</th>
<th>Soru Adı</th>
<th>Oluşturma Tarihi</th>
<th>Güncelleme Tarihi</th>
<th>Detay/Güncelle/Sil</th>
</tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
#section Scripts{
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#questionTable").DataTable({
"ajax": {
"url": "/Question/GetData",
"type": "GET",
"datatype": "json"
},
"columnDefs": [
{ width: '10%', targets: 5 }
],
"scrollX": true,
"scrollY": "auto",
"columns": [
{ "data": "QuestionId" },
{ "data": "QuestionName" },
{
"data": "CreatedDate",
"render": function (data) { return getDateString(data); }
},
{
"data": "UpdatedDate",
"render": function (data) { return getDateString(data); }
},
{
"data": "QuestionId",
"render": function (data) {
return "<a class='btn btn-primary btn-sm' onclick=PopupForm('#Url.Action("AddOrEdit", "Question")/" +
data +
"')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
data +
")><i class='fa fa-trash'></i> Sil</a>";
},
"orderable": false,
"searchable": false,
"width": "150px"
}
],
"language": {
"emptyTable":
"Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni anket oluşturunuz. "
}
});
});
function getDateString(date) {
var dateObj = new Date(parseInt(date.substr(6)));
let year = dateObj.getFullYear();
let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
let day = dateObj.getDate().toString().padStart(2, '0');
return day + '/' + month + '/' + year;
};
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: true,
title: 'Soru Detay',
modal: true,
height: 'auto',
width: '700',
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
alert('Submit Formm');
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
if ($(form).valid()) {
alert('ben burdyaım');
}
}
function ResetForm(form) {
Popup.dialog('close');
return false;
}
function Delete(id) {
if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
$.ajax({
type: "POST",
url: '#Url.Action("Delete", "Question")/' + id,
success: function (data) {
if (data.success) {
dataTable.ajax.reload();
$.notify(data.message,
{
className: "success",
globalPosition: "top center",
title: "BAŞARILI"
})
}
}
});
}
}
</script>
}
replaces your AddOrEdit.cshtml with the code below
#model MerinosSurvey.Models.Questions
#{
Layout = null;
}
#using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { #class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group row">
#Html.LabelFor(model => model.QuestionId, new { #class = "col-form-label col-md-3" })
<div class="col-md-9">
#Html.TextBoxFor(model => model.QuestionId, new { #readonly = "readonly", #class = "form-control" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.QuestionName, new { #class = "col-form-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.QuestionName, new { htmlAttributes = new { #class = "form-control", required = "true" } })
<div class="valid-feedback"><i class="fa fa-check">Süpersin</i></div>
<div class="invalid-feedback "><i class="fa fa-times"></i></div>
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.CreatedDate, new { #class = "form-control-label col-md-3"})
<div class="col-md-9">
#Html.EditorFor(model => model.CreatedDate, "{0:yyyy-MM-dd}", new { htmlAttributes = new { #class = "form-control", type = "date", #readonly = "readonly",required="false" } })
</div>
</div>
<div class="form-group row ">
<label class="col-sm-3 col-form-label">Options</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" name="option[]" required placeholder="Seçenek giriniz" />
<div class="input-group-append">
<button type="button" class="btn btn-success addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The option field template containing an option field and a Remove button -->
<div class="form-group d-none row" id="optionTemplate">
<div class="offset-sm-3 col-sm-9 input-group">
<input class="form-control" type="text" name="option[]" required placeholder="Diğer seçenek giriniz." />
<div class="input-group-append">
<button type="button" class="btn btn-danger removeButton"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
<div class="form-group row">
<input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
<input type="reset" value="Reset" class="btn btn-secondary" />
</div>
}
<script>
$(document).ready(function () {
// The maximum number of options
var MAX_OPTIONS = 5;
$('#questionForm').on('click', '.addButton', function () {
var $template = $('#optionTemplate'),
$clone = $template
.clone()
.removeClass('d-none')
.removeAttr('id')
.insertBefore($template),
$option = $clone.find('[name="option[]"]');
// Add new field
$('#questionForm').bootstrapValidator('addField', $option);
})
// Remove button click handler
.on('click', '.removeButton', function () {
var $row = $(this).parents('.form-group'),
$option = $row.find('[name="option[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#questionForm').bootstrapValidator('removeField', $option);
})
// Called after adding new field
.on('added.field.bv', function (e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'option[]') {
if ($('#questionForm').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
$('#questionForm').find('.addButton').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.bv', function (e, data) {
if (data.field === 'option[]') {
if ($('#questionForm').find(':visible[name="option[]"]').length < MAX_OPTIONS) {
$('#questionForm').find('.addButton').removeAttr('disabled');
}
}
});
});
$("#btnSubmit").click(function (event) {
var form = $("#questionForm");
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
SubmitForm(form);
});
</script>
How to Display a Datatable in Modal Popup with out using partial view.
hear is the my indax.cshtml
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork">Branch Network</button>
<div class="modal fade" id="itemModel" 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"> Branch Network</h4>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;">
<table id="branchTable">
<thead>
<tr>
<th>BranchName</th>
<th>Address</th>
<th>Manager Name</th>
<th>Mobile</th>
<th>Telephone</th>
<th>fax</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
hear i'm using /Branch/GetBranchNetwork for getting Data.
#section Scripts{
<script>
$(document).ready(function () {
$('#branchTable').DataTable({
"processing": true, // for show progress bar
"ajax": {
cache: false,
url: "/Branch/GetBranchNetwork",
type: "POST",
datatype: "json",
},
"columns": [
{ "data": "branchName", "width": "5%", },
{ "data": "address"},
{ "data": "managerName"},
{ "data": "mobile"},
{ "data": "telephone"},
{ "data": "fax"},
]
});
});
</script>
}
popup Modal section
<script>
$('.btn-BranchNetwork').on('click', function () {
var url = '/Branch/BranchNetwork';
$.get(url, function (data) {
//debugger;
$('#ItemModelContent').html(data);
$('#itemModel').modal('show');
});
});
Method
[HttpPost]
public ActionResult GetBranchNetwork()
{
WebPortalEntities db = new WebPortalEntities();
var jsonData = new
{
data = from a in db.tbl_branchNetwork.ToList() select a
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public ActionResult BranchNetwork()
{
return PartialView("_BranchNetwork");
}
_BranchNetwork.cshtml is my Partial view and no content there.
i want to without calling partial view.load data to modal dialog
So... just put the Modal on the parent page with the table defined in it. No need for modal. BUT the table will populate when the parent page populates.
change your button html to
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork"
data-toggle="modal" data-target="#itemModel">Branch Network</button>
I have a problem as follow : click button delete , then show modal popup , in modal, i have one button is "OK", when i click button "OK" , process event click of button "OK", such as call action delete via ajax.
my code snippet.
#foreach (var item in Model)
{
<tr>
<td>
#Ajax.ActionLink(" Delete", "", "", new { id = #item.UserProfileID }, new AjaxOptions()
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "",
OnSuccess = "ShowModal()"
}, new { #class = "fa fa-times btn btn-danger btn-xs", #id = "bt_del_profile" })
</td>
</tr>
}
<div id="myModal" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ShowModal() {
$("#myModal").modal('show');
}
$('#bt_del_ok').click(function (e) {
e.preventDefault();
$.ajax({
url: '/Profile/DelProfile',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false,
//processData: false,
data: { id: #item.UserProfileID },
success: function (result) {
alert("OK");
},
error: function (result) {
alert("Error delete");
}
});
});
</script>
The problem in here data: { id: #item.UserProfileID }, . I can not get ID in here although when i show devtool chrome , i see <a class="fa fa-times btn btn-danger btn-xs" data-ajax="true" data-ajax-method="GET" data-ajax-success="ShowModal()" href="/Home/Index/P000000002" id="bt_del_profile"> Delete</a>
Can you tell me about this? and give me some advices.
Thank you.
Even though you are using #item.UserProfileID within your java script, it's actually asp.net. If you had this value coming from javascript, you would use it like data: { id: '12345' },
Which means your code should be data: { id: '#item.UserProfileID' }. That should fix your problem.
Some 'Ideas'
You can change your show modal like this.
<div aria-hidden="true" class="modal fade myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
Then change your ShowModal like below.
function ShowModal(userProfileId) {
$(".myModal").prop('id', userProfileId);
$(".myModal").modal('show');
}
Then in delete event;
var userProfileId = $(".myModal").prop('id');
data: { id:userProfileId },