I have a program where the user can delete a line from a text file, however, before deleting, i would like for there to be a confirmation modal where the user can double check that he/she is deleting the correct line. However, my modals id does not seem to be linking with the data toggle of the button responsible for bringing up the modal?
Button to bring up modal:
<button class="btn" data-toggle="modal" data-target="#dataLine.Split(Model.CategoryList.delimiterChar)[1]" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]">Delete</button>
To provide additional context; "#dataLine.Split(Model.CategoryList.delimiterChar)[0]" is a part of the line within the text file, i am using this in order to be able to tell which line needs to be deleted.
Below is my modal, where i am using the same id value as the data toggle above:
<div class="modal" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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">
<p>#dataLine.Split(Model.CategoryList.delimiterChar)[0]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="location.href = '#Url.Action("DeleteCategoryLine", "Index", new { id = dataLine.Split(Model.CategoryList.delimiterChar)[1] })'">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
Is it even possible to use data toggle and id in the way i have above?
Why are you setting the id with the selected line of your text file? What if your text line has spaces? Give a static id-name and refer it in data-target since this popup is not dynamically generated as per my understanding. Your objective will be achieved inside modal body, which is to show what line is deleted
Related
EDIT: I noticed that when i click the button inside the modal then the mandatory popup shows and does not allow to go on.
i need to use the bootstrap modal to add some details about some authorization. So, i have a cshtml page with some fields required and a button which open the modal. But, when i click the button, the modal shows up even if the fields are empty. How can i solve this?
Button code:
<div class="col-sm-2"><input type="submit" value="#Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" /></div>
Modal (which is not the one i'll use, i put this in my cshtml only for tests):
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
This is the graphic result:
As you can see, the alert that the fields are mandatory pops up, but practically they may also not be entered.
The idea that i had is to open the modal by JS only if all the required fields have been filled. But i want to know if there is a more elegant way to do it.
Thank you.
Prevent the model before validation using below code,
Html:
<input type="text" id="txt_name" /><button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Jquery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($("#txt_name").val().length==0) {
e.stopPropegation();
}
});
I think the type attribute in your button code is the cause of the problem.
Try changing the value "submit" to "button".
I'm little bit new in web development. I have an application with many Index sites which display list with elements. These elements are deletable with a HtmlAction. I want to make a generic? modal which appear when the user has clicked the button. This modal request a confirmation from user to delete the selected element from list. If I'm right I have to pass some data to this modal e.g. (which controller, which action, which elementId). Somehow can I create a parameterized modal? Can you give me some startpoint for this?
<div class="row ">
<div class="card">
<table class="table">
<tr>
<td>
<h5>#Html.DisplayNameFor(item => item.SupplyTypeName)</h5>
</td>
<td></td>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.SupplyTypeName)
</td>
<td>
<i class='material-icons'>
#Html.ActionLink("mode_edit", "Edit", new { id = item.Id })
</i>
<i class='material-icons' data-toggle="modal" data-target="#myModal">
*
</i>
</td>
</tr>
}
</table>
</div>
</div>
<div class="modal fade" id="myModal" 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 Confirmation</h4>
</div>
<div class="modal-body">
Are you sure want to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
Without writing JavaScript you have to create own modal for every row. Also it's nice to show user something related to row in modal so user knows they clicked delete for correct row.
If you plan to use JavaScript then simplest is to add click event handler and show browsers own confirm popup with confirm function then cancel event if they don't click ok. Like Delete
If you write JavaScript for Bootstrap modal you need add your own click event handler that gets data attributes of delete button and patches (maybe sets id for url where confirm button posts) modal using that data before showing it.
I am having a problem with my bootstrap modal displaying inline with the html on the homepage of my site(AKA it is not invisible, it shows on the page). I have open sourced this project, so it is available here to view:
AdHoc Reporting Engine
This is a weird problem which suddenly popped up when I added panels to the page.
The following is my modal's code:
<!-- Placing excel upload modal here... -->
#using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" })) {
<div class="modal fade" id="excelModal" 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">Excel Upload</h4>
</div>
<div class="modal-body">
<p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
</div>
<div class="modal-footer">
<div>
<div class="form-group">
#Html.Label("Excel File:", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input id="excelFile"
name="excelFile"
type="file" />
<button class="btn btn-primary"
type="button"
ng-click="ExcelUpload()">
Submit
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
The project is now open sourced, so you can download the whole thing. You will just have to know how to set up an instance of OracleXE, the learner's (free) edition. The project itself is a form of reporting engine, difference being that the user actually has to browse out to it in order to get their report.
You must call $('#excelModal').modal() at some point so the logic to turn it into a modal fires.
You just need to pass it an option to hide the modal until you show it via some event:
$('#excelModal').modal({
show: false
})
Correct me if I'm wrong but i'm not actually seeing where you hide the modal as default. It is my understanding that modals are not hidden by default. To the HTML compiler you are just making a regular modal that is shown to the user on page load.
Something like:
<div class="modal fade" id="excelModal" role="dialog" aria-hidden="true">
or
<div class="modal fade" id="excelModal" role="dialog" hidden="true">
aria-hidden means:
ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.
per: What's the difference between HTML 'hidden' and 'aria-hidden' attributes?
And then to show the modal with jquery would be
$("#excelModal).modal('show')
Please let me know if I am wrong and you are hiding the modal. Or if there is a better way to hide and show modals. I'm learning too.
I'm Developing an ASP.NET Core web application & stuck in a problem regarding the Bootstrap dialog modal. I just want to load a partialView into a dialog modal on a button click & have implemented it in the code. But the problem is Dialog modal is not getting appear, instead page gets refreshes with instant dark splash.
It is very strange, because I have implemented modals previously too.
Here is my code in View.cshtml
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewData["Title"] = "Create";
}
<div class="content-wrapper">
<section class="content">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Add Queue</h3>
</div>
<form asp-action="Create">
<div class="box-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group col-md-6">
#* ....... *#
</div>
<div class="form-group col-md-6">
#* ...... *#
</div>
<div class="form-group col-md-6">
#* ...... *#
#* ---- button that triggers the modal ---- *#
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
</div>
<div class="form-group col-md-6"></div>
</div>
<div class="box-footer">
<input type="submit" value="Next" class="btn btn-primary" />
<input type="reset" value="Clear" class="btn btn-warning" />
</div>
</form>
</div>
</div>
</section>
</div>
#* ------- modal div ---------- *#
<div id="adHocAdd" 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">Create a New Menu</h4>
</div>
<div class="modal-body">
#**Load View*#
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Any help is welcome.
The problem seems to be due to your button is within the <form> tag. In ASP.NET I also have experienced this problem.
To overcome the problem you can add type="button" inside your <Button> tag & run the code. so your full code for button will be looks like following.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
According to my point of view, this problem is due to triggering of form submission on the button click which launches the model.
For further understanding purpose refer here (dotnetfiddle.net).
There are 2 buttons, one with same as in above problem, & other button is with type="button" respectively.
Button without type="button" will appear & get disappear within seconds. But other one will remain as normal.
A button inside a form will always act as submit if nothing is specified. So either you keep the form inside the model body or remove the model from the form and keep it outside of it.
Here the button is not only triggering the Model but is also submitting the form. So before your model appears, you are doing the post.
I have a table that lists users. I have a details link on last column. Link opens a modal that calls partial view. I used a static id (JohnSmith) and it works with below code.
Table row:
<td>
<a data-target="#modalDetay" data-toggle="modal" data-id="#item.UserName">
<i class="glyphicon glyphicon-eye-open"></i>
<span class="sr-only">Details</span>
</a>
</td>
Modal at the bottom of page:
<div id="modalDetay" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-body">
#Html.Action("PartialDetay", "ActiveDirectory", new { id = "JohnSmith" })
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" data-dismiss="modal" class="btn blue">Continue</button>
</div>
</div>
I want to pass -row- data-id to id in #Html.Action. How can i do that?
Btw, i read lots of similar question but all answers include Jquery. I'm asking similar but looking for different answer. Isn't it possible without Jquery?