Develop Reference

Display Data on Dialogbox without reloading page

am trying to display bootstrap dialog box with ID + Name + Price on it.
Then if user choose YES on the dialog, it must hit the Action method where there’s delete function and refresh the data on the page to see the change without reloading the page.
Also I don’t want after it hits the Delete user action method, it must not display its View.
I tried to use ViewBag from the below code but it doesn’t show me the ID + Name + Price on the Bootstrap Dialogbox, and doesn’t redirect to delete action method, and doesn’t refresh the page
#model IEnumerable<School.Models.ApplicationUser>
<hr>
<table class="table table-responsive table-hover">
<tbody>
#foreach (var item in Model.OrderBy(x => x.DateTime))
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
<span style="color: #ff0000;">
<a class="btn btn-warning btn-sm disclaimer-dialog">
<i class="fa fa-unlock"> </i>Delete
ViewBag.MyId = #item.Id;
</a>
</span>
</td>
#ViewBag.MyId
</tr>
}
</tbody>
</table>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/Views/SchoolAccounts/Delete.js")
}
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="disclaimerModalDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalScrollableTitle">Confirmation Deletion</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to reset password for user ? #ViewBag.MyId </strong></p>
#using (Html.BeginForm("DeleteProduct", "SchoolAccounts",
FormMethod.Post, new
{
#id = "delete-form",
role = "form"
}))
{
#*#Html.HiddenFor(m => m.Id)
#Html.AntiForgeryToken()*#
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
onclick="$('#delete-form').submit();">
Yes
</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">
No
</button>
</div>
</div>
</div>
</div>
Content of Delete.js
$(function () {
$('.disclaimer-dialog').click(function () {
$('#disclaimerModalDialog').modal('show');
});
});

ViewBag can't be used like that. Once ViewBag is rendered on a page, you can't update its value. All razor variables are static once the page has finished loading.
What we need to do is assign those values on the html attributes.
Modify the link in your loop to have data-properties. I used data-id, data-name, data-price;
#foreach (var item in Model.OrderBy(x => x.DateTime))
{
<tr>
#*just modify the link in the last column*#
<td>
<span style="color: #ff0000;">
<a data-id="#item.Id" data-name="#item.Name" data-price="#item.Price" class="btn btn-warning btn-sm disclaimer-dialog">
<i class="fa fa-unlock"> </i>
Delete
</a>
</span>
</td>
</tr>
}
Modify your Delete.js to access those attributes and replace the content of the modal.
$(function () {
$('.disclaimer-dialog').click(function () {
// get attributes from the button
var id = $(this).data("id");
var name = $(this).data("name");
var price = $(this).data("price");
// Assign value to delete-id
$(".delete-id").val(id);
// update the first paragraph in modal-body
$('#disclaimerModalDialog').find(".modal-body p").eq(0).html("Are you sure you want to delete "+id+"-"+name+"-"+price+"?");
$('#disclaimerModalDialog').modal('show');
});
});
In your modal body, use this for the input field. We need to add a class so we can easily access it;
#Html.HiddenFor(m => m.Id, new { #class="delete-id" });
Add this function to your Delete.js
$(function(){
$("#delete-form").submit(function(e){
// this will stop the page from refreshing or redirecting
e.PreventDefault();
var deleteId = $(".delete-id").val();
var passData = { id:deleteId };
// ajax call here
$.ajax({
type: "POST",
url: "/ControllerName/DeleteAjax",
data: JSON.stringify(passData),
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(result){
alert(result);
// find the link with data-id == deleteid
// .parent() = span
// .parent().parent() = td
// .parent().parent().parent() = tr
// .remove() = remove that row
$("table a[data-id='"+deleteId+"']").parent().parent().parent().remove();
},
error: function(err){
alert(err);
}
});
});
});
In your controller, add this function. DeleteAjax;
[HttpPost]
public ActionResult DeleteAjax(string id)
{
var product = context.Products.FirstOrDefault(p=>p.Id == id);
if(product == null){
return Content("error, cant find Id")
}else{
context.Products.Remove(product);
context.SaveChanges();
return Content("successfully deleted");
}
}

Send an event to another function

Problem
Is there a way to send 'event' to another function with jQuery?
I have this code to prevent remove of row of my table to execute certain treatments, then remove the row.
I want to add a modal window between. But I do not know how to proceed.
Actually, I do like this
$('#delete-row').on('click', '.tr-special .remove-line-exceptionnel', function (event) {
event.preventDefault();
var $row = $(event.target).closest('.tr-special');
console.log($row);
var elementSortable = $row.find('ul').attr('id');
items = $row.find('li');
$( items ).each(function( index ) {
//function out of purpose
});
$row.remove();
});
Output of console.log is
r.fn.init [tr.tr-special, prevObject: r.fn.init(1)]
I want to call my modal, after click on Delete button with class .remove-line, so in normal times I do like this
$('.remove-line').on('click', function (event) {
$('#custom-width-modal').modal('show');
});
And what I would like is : when I press the button Confirm in my modal, the code of $('#delete-row').on('click', '.tr-special .remove-line', function (event) {.. execute.
$('.modal-footer').on('click', '.validDelete', function(e) {
var $row = $(e.target).closest('.tr-special');
console.log($row);
});
Output of console.log is
r.fn.init [prevObject: r.fn.init(1)]
I hope you understand me

If you simply declare the $row variable globally...
In the .remove-line-exceptionnel click handler, store the element to possibly delete. Then in the .validDelete click handler, you remove the element.
So there is no send an event anywhere. There is two events... One to know which element to delete and one to actually do it.
// Declare a variable globally
var $row;
// Button (or whatever) in the row
$('#delete-row').on('click', '.tr-special .remove-line-exceptionnel', function (event) {
// Store the row element to delete
$row = $(event.target).closest('.tr-special');
// Show modal
$('#custom-width-modal').modal('show');
});
// Modal button
$('.modal-footer').on('click', '.validDelete', function(e) {
// Remove the row
$row.remove();
// Hide modal
$('#custom-width-modal').modal('hide');
});
table{
margin: 0 auto;
}
td{
padding: 1em;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="delete-row">
<tr class="tr-special">
<td>Row 1</td>
<td><button class="remove-line-exceptionnel">Remove</button></td>
</tr>
<tr class="tr-special">
<td>Row 2</td>
<td><button class="remove-line-exceptionnel">Remove</button></td>
</tr>
<tr class="tr-special">
<td>Row 3</td>
<td><button class="remove-line-exceptionnel">Remove</button></td>
</tr>
</table>
<div id="custom-width-modal" class="modal" 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>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary validDelete">Yes, I'm sure.</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap Modal Confirmation

I've got a table that displays user details per row along with a Remove button that launches a Bootstrap modal confirmation dialog box.
My goal is to have the confirmation button trigger an event which will delete that particular user.
How would I pass jsmith22 from the table row into my Javascript function?
HTML Table
<tr>
<td>jsmith22</td>
<td>John Smith</td>
<td>555-555-5555</td>
<td>test#gmail.com</td>
<td><button type="button" class="btn btn-default btn-lg btn-block roster-button active" data-toggle="modal" data-target="#removeUser">Remove</button></td>
</tr>
Modal dialog
<div aria-labelledby="myModalLabel" class="modal fade" id="removeUser"
role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Remove Employee</h4>
</div>
<div class="modal-body">
<p>Are you sure you wish to remove this user?</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-danger" id="remove-button" type="submit">Remove</button>
</div>
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end modal -->
Javascript
// Remove button event trigger
$('#remove-button').click(function() {
$.post('/API/removeUser', {} );
});

Can do it with Bootstrap Modal event listener
Add data attribute data-id to modal trigger button
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
Add input type="hidden" to modal and pass the id value to modal hidden input when shown
Hidden Input
<input type="hidden" id="RowId" value="">
Modal event show script
$(document).ready(function(){
$('#removeUser').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
$('#RowId').val(id);
});
});
Now with click event
$('#remove-button').click(function() {
var delid = $('#RowId').val();
//Do what ever you like to do
$.post('/API/removeUser', {} );
});
Fiddle Example
Alternate Solution
You can skip the hidden input and create a global variable
Modal trigger button with data attribute data-id to modal trigger button
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
Modal Event, Click function with Global variable script
$(document).ready(function() {
var delid = ''; //global variable
$('#removeUser').on('show.bs.modal', function(e) {
delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable
alert(delid);
});
$('#remove-button').click(function() {
alert(delid); //Use the global variable here to del the record
//Do what ever you like to do
//$.post('/API/removeUser', {} );
});
});
Alternate Solution Example

You can get the contents of the first td of the button's row with getting this:
var person = $(this).closest('tr').find('td').eq(0).html()
fiddle: https://jsfiddle.net/7j4bmgbv/

Carry the id of a row to modal

I have a table that is being populated dynamically from the database, In it there is a button on whose click i wish to display a modal, as the work is done in bootstrap so its not difficult to create a modal.
<table id="report" class="table table-bordered" >
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<?
$sql="SELECT * from `request` ";
$result= mysqli_query($con, $sql);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_assoc($result))
{
$requestid = $row['requestid'];
?>
<tr>
<td><? echo $requestid; ?> </td>
<td><div href="javascript:;" class="btn btn-drank mb-10" data-toggle="modal" data-target="#myModal2">Detail</div></td>
<td> </td>
<td> </td>
</tr>
<?}
}
</table>
Table will look similar to this
Now the part where i am stuck is that i also wish to carry the requestid of the row whose corresponding detail button user has clicked to the modal, so that if user clicks on detail of first row, modal displays the data of first row, and when the user clicks on detail of second row, modal displays the data of second row and so on..
Code for modal is
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
// wish to get the request id and once i have it i can use it to fetch data
</div>
</div>
</div>

UPDATE
Adding this update on top because I feel this would be more elegant and easiest way.
No need of having Step 1 and Step 2 i.e. a global variable and click event for modal invoker. You can just have shown.bs.modal method and get the sourceElement i.e. element that invoked modal, and fetch id corresponding to that row as below:
$("#myModal2").on('shown.bs.modal',function(e){
var sourceElement=e.relatedTarget;
/*e.relatedTarget gives you which element invoked modal*/
var id=$(sourceElement).closest('tr').find("td:first").text();
/*using sourceElement you can easily fetch id
alert(id);
})
Updated DEMO
DEMO
3 steps:
Have a global variable to store id
Click event to all div whose data-target="#myModal" to fetch clicked row's id
Make use of modal's shown.bs.modal to get id obtained during click event
Step 1
var id=0; /*a global variable*/
Step 2
$("div[data-target=#myModal2]").on('click',function(){
id=$(this).closest('tr').find("td:first").text();
/*get the closest tr of clicked div and find first td which has id value and store it in
id variable*/
})
Step 3
$("#myModal2").on('shown.bs.modal',function(e){
alert(id);
/*since id is a global variable and it will get value as soon as click occurs
Fetch the data with above id*/
})

Add data-id="id of the row" in button
<button data-id="id of the row" class="btn btn-drank mb-10" data-toggle="modal" data-target="#myModal2">Detail</button >
Put a form tag and input type hidden in that form.
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<form >
<input type="hidden" id="id">
<button type="submit" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
Then in script do it with event show.bs.modal
$(document).ready(function () {
$('#myModal12').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);//Button which is clicked
var clickedButtonId= button.data('Id');//Get id of the button
// set id to the hidden input field in the form.
$("input #id").val(clickedButtonId);
});

You can add a listener for show.bs.modal so you have a reference to the componet clicked by the user and to the modal, as stated in the documentation.
$('#myModal2').on('show.bs.modal', function (e) {
var modal = $(this);
var rowBtn = $(e.relatedTarget);
var row = rowBtn.closest('tr');
// Here you id for the clicked row
var rowId = row.find('td:first').text();
row.find('td').each(function(){
// Here you can iterate between each row cell
var cellCont = $(this).text();
// e.g. use cellCont to create modal content
});
// Here you can update modal content
// e.g. modal.find('.modal-body').html( your dynamic content );
});

Reload content in modal (twitter bootstrap)

I'm using twitter bootstrap's modal popup.
<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
I can load content using ajax with this a-element:
<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>
Now I have to open the same modal but using a different url. I'm using this modal to edit an entity from my database. So when I click edit on an entity I need to load the modal with an ID.
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>
If I click on link number 1, it works fine. But if I then click on link number 2 the modal content is already loaded and therefor it will show the content from link number 1.
How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?

I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links.
Something in the lines of:
$("a[data-target=#myModal]").click(function(ev) {
ev.preventDefault();
var target = $(this).attr("href");
// load the url and show modal on success
$("#myModal .modal-body").load(target, function() {
$("#myModal").modal("show");
});
});

To unload the data when the modal is closed you can use this with Bootstrap 2.x:
$('#myModal').on('hidden', function() {
$(this).removeData('modal');
});
And in Bootstrap 3 (https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516):
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
$(e.target).removeData('bs.modal');
});

You can force Modal to refresh the popup by adding this line at the end of the hide method of the Modal plugin (If you are using bootstrap-transition.js v2.1.1, it should be at line 836)
this.$element.removeData()
Or with an event listener
$('#modal').on('hidden', function() {
$(this).data('modal').$element.removeData();
})

With Bootstrap 3 you can use 'hidden.bs.modal' event handler to delete any modal-related data, forcing the popup to reload next time:
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});

Based on other answers (thanks everyone).
I needed to adjust the code to work, as simply calling .html wiped the whole content out and the modal would not load with any content after i did it. So i simply looked for the content area of the modal and applied the resetting of the HTML there.
$(document).on('hidden.bs.modal', function (e) {
var target = $(e.target);
target.removeData('bs.modal')
.find(".modal-content").html('');
});
Still may go with the accepted answer as i am getting some ugly jump just before the modal loads as the control is with Bootstrap.

A little more compressed than the above accepted example. Grabs the target from the data-target of the current clicked anything with data-toggle=modal on. This makes it so you don't have to know what the id of the target modal is, just reuse the same one! less code = win! You could also modify this to load title, labels and buttons for your modal should you want to.
$("[data-toggle=modal]").click(function(ev) {
ev.preventDefault();
// load the url and show modal on success
$( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() {
$($(this).attr('data-target')).modal("show");
});
});
Example Links:
<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

I made a small change to Softlion answer, so all my modals won't refresh on hide.
The modals with data-refresh='true' attribute are only refreshed, others work as usual.
Here is the modified version.
$(document).on('hidden.bs.modal', function (e) {
if ($(e.target).attr('data-refresh') == 'true') {
// Remove modal data
$(e.target).removeData('bs.modal');
// Empty the HTML of modal
$(e.target).html('');
}
});
Now use the attribute as shown below,
<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>
This will make sure only the modals with data-refresh='true' are refreshed. And i'm also resetting the modal html because the old values are shown until new ones get loaded, making html empty fixes that one.

Here is a coffeescript version that worked for me.
$(document).on 'hidden.bs.modal', (e) ->
target = $(e.target)
target.removeData('bs.modal').find(".modal-content").html('')

It will works for all version of twitterbootstrap
Javascript code :
<script type="text/javascript">
/* <![CDATA[ */
(function(){
var bsModal = null;
$("[data-toggle=modal]").click(function(e) {
e.preventDefault();
var trgId = $(this).attr('data-target');
if ( bsModal == null )
bsModal = $(trgId).modal;
$.fn.bsModal = bsModal;
$(trgId + " .modal-body").load($(this).attr("href"));
$(trgId).bsModal('show');
});
})();
/* <![CDATA[ */
</script>
links to modal are
<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>
pop up modal
<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>

I was also stuck on this problem then I saw that the ids of the modal are the same. You need different ids of modals if you want multiple modals. I used dynamic id. Here is my code in haml:
.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
you can do this
<div id="<%= some.id %>" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save" />
</div>
</div>
and your links to modal will be
<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
I hope this will work for you.

You can try this:
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});

I wanted the AJAX loaded content removed when the modal closed, so I adjusted the line suggested by others (coffeescript syntax):
$('#my-modal').on 'hidden.bs.modal', (event) ->
$(this).removeData('bs.modal').children().remove()

var $table = $('#myTable2');
$table.bootstrapTable('destroy');
Worked for me

step 1 : Create a wrapper for the modal called clone-modal-wrapper.
step 2 : Create a blank div called modal-wrapper.
Step 3 : Copy the modal element from clone-modal-wrapper to modal-wrapper.
step 4 : Toggle the modal of modal-wrapper.
<a data-toggle="modal" class='my-modal'>Open modal</a>
<div class="clone-modal-wrapper">
<div class='my-modal' class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
</div>
</div>
</div>
<div class="modal-wrapper"></div>
$("a[data-target=#myModal]").click(function (e) {
e.preventDefault();
$(".modal-wrapper").html($(".clone-modal-wrapper").html());
$('.modal-wrapper').find('.my-modal').modal('toggle');
});