show an element by checking bool value from model - javascript

I want to show bootstrap badges like accepted, rejected according to a bool value from the model called status . the problem here is I tried doing it using jquery but it's either all shown or all hide. so I guess it can't read the status values. I opened developer tools and there is no error. I need guidance. I appreciate your help.
#for (int i = 0; i < Model._Requests.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model._Requests[i].Account_Name)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].LOB)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Operation_Date)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Employee_no)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
</td>
<td>
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
</td>
<!--for the accept button-->
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
<!--for the reject button-->
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<!--this is the note modal of the reject button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
#Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
</tr>
}
</tbody>
</table>
script
var flag = $('[name = "Status"]').val();
if (flag === false) {
$('#pend').show();
}
else {
$('#pend').hide();
}
the badge i'm trying to show
<span name="badge" class="badge badge-warning" id="pend">WTF</span>

If status doesnt change afterwards, just set some class dynamically to this item in your cshtml
<span name="badge" class="badge badge-warning #{Model.Status ? "visible" : "invisible"}" id="pend">WTF</span>
If it does change you have to trigger events on that value change

Related

How to get row value from table when delete button is clicked?

I am trying to delete row when delete button is clicked.
<tbody>
{% for dt in data %}
<tr>
<td>
<i class="fa fa-external-link user-profile-icon"></i>
{{dt.url}}
</td>
<td>{{dt.modified}}</td>
<td>
<button type="button" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
</td>
<div class="modal fade bd-example-modal-lg" id="exampleModal{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal{{forloop.counter}}">DELETE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to delete this row
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
When I click on delete button, modal appear for confirmation and when I click Yes then I have to send the {{dt.url}} for corresponding delete button.
I could use the input tag with hidden type and set the input value with {{dt.url}} . I am not able to check which delete button is clicked. Please help.
Add <input type="hidden" name="deletefile" value="" id="deletefileID"> outside your table.
Now set the value of button as {{dt.url}.
<button type="button" value="{{dt.url}" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
This is to use this value to set value of hidden input tag whenever delete button is clicked.
$('.btn-danger').on('click',function(){
var tmp = this;
tmp = tmp.value;
$('#deletefileID').val(tmp);
});

Preventing A Bootstrap Modal From Closing If Validation Errors Exist

I have a bootstrap model in an .NET MVC5 app. My client side validation is working (jquery unobtrusive in MVC) but the problem is that my modal keeps closing even if there are errors. How can I prevent the model from closing and just display the errors? In the javascript that I have, it prevents the modal from closing but it doesn't show any of the errors. I can only seem to get it to show errors if the modal closes. I need it to stay open if there are validation errors.
Here is my html:
<div class="modal" id="createMessageModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
#using (Html.BeginForm("Dashboard", "App", null, FormMethod.Post, new { #id = "frmSendMessage", #name = "frmSendMessage" }))
{
<div class="modal-header">
<h5 class="modal-title">Send Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table>
<tbody>
<tr>
<th style="padding-bottom:15px">From:</th>
#Html.HiddenFor(model => model.messageSenderID)
<td style="padding-bottom:15px;">#ViewBag.Name</td>
</tr>
<tr>
<th style="padding-bottom:15px">To:</th>
<td style="width:100% !important; padding-bottom: 15px;">
#Html.DropDownListFor(model => model.messageRecipientID, Model.messageRecipientsDropdown, "Select A Recipient", new { #id = "recipient", #name = "recipient", #class = "form-control" })
#Html.ValidationMessageFor(model => model.messageRecipientID, "", new { #class = "text-danger" })
</td>
</tr>
<tr>
<th>Subject:</th>
<td style="width:100% !important">#Html.TextBoxFor(model => model.messageSubject, new { #class = "form-control", #name = "messageSubject", #id = "messageSubject" })</td>
<td>#Html.ValidationMessageFor(model => model.messageSubject, "", new { #class = "text-danger" })</td>
</tr>
</tbody>
</table>
<br />
#Html.TextAreaFor(model => model.messageBody, new { rows = "15", style = "resize:none; min-width:100%;", id = "messageBody", name = "messageBody" })
#Html.ValidationMessageFor(model => model.messageBody, "", new { #class = "text-danger" })
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send Message</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
This is my jquery:
$(document).ready(function() {
$("#frmSendMessage").submit(function() {
Recipient = $("input[name='recipient']").val();
MessageSubject = $("input[name='messageSubject']").val();
MessageBody = $("input[name='messageBody']").val();
return false;
})
});
In your case either there might be some other code interfering with your form submission/modal or the form is getting submitted somehow and reloading the same page. These are the only two reason I can think of.
Below is an example of doing validation from jquery using your code as base.
Its a simple search query submission to SO. You can see that modal remains open if search text is not entered.
Please note the comment inside $("#frmSendMessage").submit
$(document).ready(function() {
$("#frmSendMessage").submit(function() {
var query = document.getElementById('myQuery');
if (query.value == "") {
$('#vmsg').html("Please enter your search query")
return false; //form will not submit and modal will remain open
}
return true; //form will get submitted and modal will close due to page being changed/reloaded
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
Show Form
</button>
<div id="formModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="frmSendMessage" method="get" action="https://stackoverflow.com/search">
<input type="text" id="myQuery" name="q" placeholder="your search query here">
<div id="vmsg"></div>
<button type="submit" name="button">Search Now</button>
</form>
</div>
</div>
</div>
</div>

How to pass id to asp-route-id on the modal button

I have a problem with my code. I have table with 3 columns: category, subcategories and actions. In third column I keep buttons "Edit" and "Delete". Below part of my code:
<tbody>
#foreach (var category in Model.ToList())
{
<tr>
<td class="hide">#category.Id</td>
<td>#category.Name</td>
<td>
#if (category.Subcategories != null)
{
#foreach (var subcategory in category.Subcategories.ToList())
{
<p>#(subcategory.Id + ". " + #subcategory.Name)</p>
}
}
else
{
<a class="btn btn-primary" style="width:auto"
asp-controller="administrator"
asp-action="CreateSubcategory">
Dodaj podkategorię
</a>
}
</td>
<td>
<a class="btn btn-primary"
asp-controller="administrator"
asp-action="EditCategory"
asp-route-id="#category.Id">
Edytuj
</a>
<button type="button" onclick="getId(this.data-id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="#category.Id">
Usuń
</button>
</td>
</tr>
}
</tbody>
When button "Usuń" will be clicked I want show modal window. And this is ok:
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Usuwanie kategorii</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Czy na pewno chcesz usunąć kategorię ?</p>
</div>
<div class="modal-footer">
<form method="post">
<button id="modalDeleteButton" type="submit" class="btn btn-primary"
asp-controller="administrator"
asp-action="DeleteCategory">
Usuń
</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
</div>
</div>
</div>
And finally in modal window user have a two choice - close modal window or "Delete" category. In this place I have to know which row was clicked before modal was showing. How to pass #category.Id to my modal window button "Usuń" and set asp-route-id?
Below my JS/JQuery code:
<script type="text/javascript">
$("#myModal").on('show.bs.modal', function (event) {
$(event.currentTarget).find('asp-route-id').val(getId);
});
function getId(clicked_id) {
return clicked_id;
}
Now I have got return url https://localhost:80888/Administrator/DeleteCategory - without "/7" where 7 is Id.
In <tbody>, the id of this fragment should be sent by #category.Id.
<tbody>
...
<button type="button" onclick="getId(#category.Id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="#category.Id">
Usuń
</button>
</td>
</tr>
}
</tbody>
In the js function, the call of the getId function needs to allocate parameters, so it cannot be called directly to get its value. First, set a global variable. Then, since the browser has compiled taghelper into formaction when calling modal, this value needs to be reset here.
<script type="text/javascript">
var clickId;
$("#myModal").on('show.bs.modal', function (event) {
$(event.currentTarget).find('asp-route-id').val(getId);
var btn = $(this).find('#modalDeleteButton');
console.log(clickId)
btn.attr('formaction', '/administrator/DeleteCategory/'+clickId);
});
function getId(clicked_id) {
this.clickId = clicked_id;
}
</script>
Codes of Controller
public class administratorController:Controller
{
public IActionResult DeleteCategory(int id)
{
return Json(id);
}
}
Screenshots of Test

JavaScript Passing Parameters to modal ASP.NET Core

I have problem with my modal boostrap seems like not passing parameter to modal. Here is my code:
My view:
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.EmployeeId)</td>
<td>#Html.DisplayFor(modelItem => item.Fname) #Html.DisplayFor(modelItem => item.Lname)</td>
<td>#Html.DisplayFor(modelItem => item.PhoneNumber)</td>
<td>#Html.DisplayFor(modelItem => item.Position)</td>
<td>
<a asp-action="Edit" asp-route-id="#item.EmployeeId">Edit</a> |
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-emp-id="#item.EmployeeId"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
</td>
</tr>
}
My modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete invoice number:</p>
<input type="text" name="empID" value=""/>
</div>
<div class="modal-footer">
<form asp-controller="Employee" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
My JavaScript:
I think the problem is somewhere in this code but I don't know why.
<script src="./javascript.js" type="text/javascript">
$("button[type='button']").click(function () {
$("#myModal").find("input[type='text']").val($(this).attr("EmpID"));
});
What makes it wrong with my work? Does anyone knows why is not passing the parameter to model?
I'm just a beginner and I have no idea whats going on in my codes.
Any help would be appreciated.
Your button doesn't have an attribute named EmpId. However it does have an attribute named data-emp-id which I assume contains the value you want.
jQuery has a data method for accessing data attributes easily; in short you can get it using $(this).data("emp-id")

Utilize a bootstrap modal for both creating and editing users

I have a view which contains two elements :
Button : A add button to create a row for the table
Table : A table that I populate dynamically from database, on each row I have an edit button
What I want to do is when I click on the add button it shows a modal with form (lastname, firstname, role, login etc)
and when I click on edit button (row in table) it open the same modal but with all attributes of the user in the form.
my view Users.blade.php
....
// include modal
#include('CreateOrEditModal', array('user' => isset($user) ? $user: null))
// add button
<button data-toggle="modal" data-target="#create_edit_modal" class="btn btn-primary"><i class="fa fa-plus"></i> Add user</button>
...
...
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->lastname}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->role}}</td>
<td>{{$user->login}}</td>
<td>{{$user->password}}</td>
<td>
<button class="btn btn-primary" data-target="#create_edit_modal" data="{{$user}}"><span class="fa fa-pencil"></span>Edit</button>
</td>
</tr>
#endforeach
</tbody>
my modal
<div class="modal hide fade" id="create_edit_modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
#if(isset($user))
<h4 class="modal-title">{{$user->name}}</h4>
#else
<h4 class="modal-title">Add a new user</h4>
#endif
</div>
<div class="modal-body">
#if(isset($user))
{!! Form::model($user, array('class' => 'form-horizontal','route' => array('site.update', $user->id), 'method' => 'PUT')); !!}
#else
{!! Form::open(array('url' => 'site','class' => 'form-horizontal')) !!}
#endif
<div class="row">
....

Categories