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>
Related
Hey I am new to js and I was trying to open a bootstrap modal with a click on a button (I set the id to the value of the button because the id comes from a database) and if you click on "yes" in that modal a click function should be triggered which should then delete the selected row.
I am able to open the modal and setting the id also works but if I click the yes button in the modal there is no alert...
This is the modal located in content.html:
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
Please make sure you return the device.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
This is my JS located in main.js:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus');
});
$('#booked').click(function () {
$('#changestuff').load('content.html #booked', function () {
register();
change();
$('.ret').click(function () {
var id = $(this).val();
var tr = $(this).closest('tr');
})
returnOne(id, tr);
});
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
});
function returnOne(id, tr)
{
$('.delBtn').click(function () {
alert("you returned" +id);
})
}
Where is my error? I think it might be because the modal hasn't been loaded when I try to get the click event but I'm not sure. Thanks in advance!
click event handler is not attaching may be it is getting called before yes button dom get created.
Try below code where you can store row to be deleted in a variable and set row-id data attribute on Yes button. In click handler of Yes button, read the id and you can delete row from variable rowToDelete
$(document).ready(function(){
var rowToDelete;
$('#myModal').on('shown.bs.modal', function(){
$('#myInput').trigger('focus');
});
/*$('#changestuff').load('content.html #book', function(){
register();
change();
getChosenDevices();
});*/
$('#changestuff').on('load','content.html #book', function(){
register();
change();
getChosenDevices();
});
$('#booked').click(function() {
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on('click','.ret',function() {
var id = $(this).val();
$('#deleteModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
});
$(document).on("click", '#deleteModal button.delBtn', function(e) {
e.preventDefault();
var rowId = $(this).data('row-id');
alert("you returned" + rowId);
$('#deleteModal').modal('toggle');
});
});
JSFiddle Demo
i have create a bootstrap modal but i need the content to be dynamic. Each time i select a different table row, the content of that row should popup. The content inside bootstrap modal is a dynamic table. Is possible to show a simple sample of how by selecting from the row of a table, i can get a dynamic table in the popup modal. Please help. Thanks
while($row = $results->fetch_assoc()): ?>
<tr>
<td class="list-answer"
data-toggle="modal"
href="#content-confirmation">
<?= $row["name"]; ?>
</td>
</tr>
<?php endwhile ?>
<div class="control-popup modal fade" id="content-confirmation"
tabindex="-1" role="dialog">
<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">Are you sure you wanna do
that?</h4>
</div>
<div class="modal-body">
load dynamic table content.......
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Save</button>
</div>
</div>
</div>
Are you trying to give your table column a link with href ? because it would not work like that.
To your question, there are multiple ways of doing this. I would give the table's row an id and handle the row click or column click event in js code. after that i would get that rows content either with an ajax request or directly from the table's columns.
So your code would look like:
while($row = $results->fetch_assoc()): ?>
<tr data-id="<?= $row["id"]; ?>">
<td class="list-answer">
<?= $row["name"]; ?>
</td>
</tr>
your javascript code:
$(function(){
$(".list-answer").click(function() {
var row_id = $(this).parents('tr').attr('data-id');
get_data(row_id);
$('#my-modal').modal();
});
});
function get_data(row_id) {
//either get data with ajax request or row
//fill modals content with $('#input-field-id').val('vlaue') or .html()
}
$.ajax({
url : 'url',
method : 'post',
data: {
},
success : function(response)
{
$('#my-modal').html(response);
// put your html response in the popup div
$('#my-modal').modal();
}
});
<div id="my-modal"></div>
I don't know if i understand well, but i think you need something like me :
$("table").on('click', 'tr', function() {
var json_data = {
"controller": "NameOfController",
"action": "action",
"contentofRow": $(this).text()
};
$.post('ajax_handler.php', json_data, function (res) {
if (res.indexOf('ERREUR') != -1) {
alert(res);
return false;
}
else {
$('#mymodalID').modal();
$("#myModalLabel").html("Content of the row : " + res[0]);
$.each(res[1], function (index, valeur) {
$("#bodySupp").append($('<tr>')
.css("text-align", "center")
.css("fontSize", "12px")
.append($('<th>')
.html(valeur['indexOfValue'])
)
.append($('<th>')
.html(index)
)
.append($('<th>')
.html(valeur['indexOfValue2'])
)
.append($('<th>')
.html(valeur['indexOfValue3'])
)
)
});
}
}, 'json');
});
$("table").on('click', 'tr', function()
You open the modal on the click on the row of the table,
"contentofRow": $(this).text()
You take the content of the current row, this is what you will display :)
And then you have the controller :
class NameOfController implements AjaxControler {
public function execute($data)
{
switch($data['action']){
default :
$contentRow= $data['yourcontent'];
$res = array();
$res[] = $contentRow
return json_encode($res);
}
}
}
You can do that in OctoberCMS backend. I'll give you a quick example.
I put that in a controller _list_toolbar.htm
<button
href="javascript:;"
data-control="popup"
data-size="large"
disabled="disabled"
data-trigger-action="enable"
data-trigger=".control-list input[type=checkbox]"
data-trigger-condition="checked"
onClick="$(this).popup({ handler: 'onAssignTechnical', extraData: { checked: $('.control-list').listWidget('getChecked') } })"
href="javascript:;"
class="btn btn-default oc-icon-plus">
<?= e(trans('lilessam.maintenancesystem::lang.work_orders.assigntechnical_button')) ?>
</button>
And in the onAssignTechnical() in the controller I'll make a bootstrap modal.
public function onAssignTechnical() {
/** Check if this is even set **/
if (($checkedIds = post('checked')) && is_array($checkedIds) && count($checkedIds)) {
foreach($checkedIds as $workorder_checked_id) {
$check_work_order = \Lilessam\Maintenancesystem\Models\WorkOrder::where(['id' => $workorder_checked_id, 'assigned_to_id' => null])->count();
}
/** Check if there's more than one record checked */
if(count($checkedIds) == 1 && $check_work_order != 0):
/**Labels **/
$modal_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_title');
$assign_label = Lang::get('lilessam.maintenancesystem::lang.assign_label');
$name_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_name_label');
$action_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_action_label');
/** Getting all workers IDS by their group id 2 **/
$allWorkers_ids = DB::table('backend_users_groups')->where('user_group_id', 2)->get();
/** Workers Array **/
$workers_array = [];
// Looping to get all workers
foreach($allWorkers_ids as $worker_id) {
//Fetching the user
$worker = User::find($worker_id->user_id);
//Pushing the worker to workers' array
array_push($workers_array, [
'login' => $worker->login,
'first_name' => $worker->first_name,
'last_name' => $worker->last_name,
'id' => $worker->id,
]);
}
#setting the table header
$workers_code = '<div class="control-list list-unresponsive">
<table class="table data" data-control="rowlink">
<thead>
<tr>
<th>'.$name_label.'</th>
<th style="width: 150px"><span>'.$action_label.'</span></th>
</tr>
</thead>
<tbody>';
#Adding workers to the table
foreach($workers_array as $worker_row) {
foreach($checkedIds as $workorder_id):
$workers_code .= '<tr>
<td>
<a href="javascript:;">
'.$worker_row['first_name']." ".$worker_row['last_name'].'
</a>
</td>
<td>
<form method="post" data-request="onAssignNow">
<input type="hidden" name="workorder_id" value="'.$workorder_id.'">
<input type="hidden" name="id" value="'.$worker_row['id'].'">
<button type="submit" class="btn btn-info">'.$assign_label.'</button>
</form>
</td>
</tr>';
endforeach;
}
#Adding Table Fotter
$workers_code .= "</tbody>
</table>
</div>";
#Returning all modal
return '
<div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">'.$modal_title.'</h4>
</div>
<div class="modal-body">
<div class="form-group textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
overflow-x: hidden;
margin-bottom: 20px;
overflow-y: scroll;">
<div class="qa-message-list" id="wallmessages">
'.$workers_code.'
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
';
else:
/** Labels **/
$warning_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning_title');
$warning_body = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning');
#Returning all modal
return '
<div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">'.$warning_title.'</h4>
</div>
<div class="modal-body">
<div class="form-group textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
overflow-x: hidden;
margin-bottom: 20px;
overflow-y: scroll;">
<div class="qa-message-list" id="wallmessages">
'.$warning_body.'
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">✖</button>
</div>
</div>
</div>
</div>
';
endif;
}
}
Excuse me for the long code but I'm sure It will help you.
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/
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 );
});
I am developing ASP.NET MVC application.
I have used boostrap for it.
I have shown a modal popup dialog box when user click on the the link called 'Show Stock'
(You can see it in image.)
I have shown OK and cancel button on box.
The Problem is , When I click on cancel button it box get close, but only at first time.
If I again open dialog and click on cancel button box disappears and plain black screen appears not the parent screen.
I just want to close the modal box. without mentioning the URL to the cancel button.
Is that possible ?
Here is my code...
<script type="text/javascript">
$(document).ready(function () {
$('#closeA').live('click', function(){
alert("asd");
$("body").remove( "div.modal-backdrop in");
});
$('#lnkAddProduct').click(function () {
// alert("Infuction");
var rIndex = $("select.clsProductId").length;
var ndate = new Date();
var time = ndate.getMilliseconds();
var IDD = rIndex + time;
$('#ProductList').append("<div class='span12' style='margin-left:0px' ><div class='span3'><select class='clsProductId ' name='ProductId' id='ddProductList_"+IDD+"' style = 'font-size:12px;width:200px;margin-right:10px;margin-left:20px;' onchange='get("+IDD+")'/> </div><div id='ProductCode_"+IDD+"' class='span1' style=' margin-left:30px;'></div><div id='Weight_"+IDD+"' class='span1' style=' margin-left:90px;'> </div><input type='text' id='Quantity_"+IDD+"' class='clsQuantity' name='Quantities' style='width:50px; margin-left:35px;' onblur='StockLinkVisible("+IDD+");' /> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color :#ee8929; margin-left:20px;' id='lnkRemove_"+IDD+"' class='clsRemove' onclick='removeElement(" + IDD+");'>X</a><a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color:White; margin-left:20px' id='lnkStockInfo_"+IDD+"' class='clsStockInfo' data-container='body' data-toggle='popover' data-placement='left' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.' onclick='ShowStockInformation("+IDD+");'>Check Stock</a></div>");
getProductList(IDD);
});
});
function StockLinkVisible(cnt) {
$('#lnkStockInfo_'+ cnt).show();
$('#lnkStockInfo_'+ cnt).css("color", "#ee8929");
}
function DisplayAmendAdvancedPaidAmountAlert()
{
$('div').remove('#dataConfirmModal');
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose1"> × </button> <h5 id="dataConfirmLabel">Stock Availability at different locations.</h5> </div><div class="modal-body" > <table style="width:530px"><tr> <th style="width:120px">Bhivandi </th><th>Worli</th><th>Santacruze</th> <th> Saki-Naka</th> </tr> <tr> <td><div >60 </div></td> <td><div>3</div></td> <td><div >60 </div></td> <td><div>3</div></td> </tr> </table> </div> <div class="modal-footer"> <button type="button" id="btnOk1" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> <button type="button" id="closeA" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancel</button> </div></div> ');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
}
</script>
Here is the image...
When I open the dialog box , every time Div with "modal-backdrop in" class get added and I cant remove it... I have checked this in Inspect Element window of Google chrome...
Check the below image...
You should read carefully the modal documentation.
If a remote url is provided, content will be loaded via jQuery's load
method and injected into the .modal-body
Edited Section:
try this:
<script type="text/javascript">
function DisplayAmendAdvancedPaidAmountAlert()
{
$( "div.modal-backdrop.in" ).remove();
$('div').remove('#dataConfirmModal');
// Cal();
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id= "container" ><div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true" style="width: 500px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h6 id="dataConfirmLabel">Stock Availibility at diffrent locations</h6></div><div class="modal-body "><h4>Stocks</h4><br/> <table> <thead> <tr> <td>Bhivandi</td> <td>Santacruze</td> <td>Worli</td> </tr> </thead> <tbody> <tr> <td>12</td> <td>122</td> <td>54</td> </tr> </tbody> </table></div> <div class="alert alert-info" style="display:none;margin:5px" id="alertMessage"> </div><div class="modal-footer"><button id="closeA" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div></div> ');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
}
$(document).ready(function(){
$('#closeA').live('click', function(){
$('#container').hide();
});
});
</script>
Try using the following:
$('#dataConfirmModal').dialog('close');
Try using the following on click of Cancel:
$('#dataConfirmModal').remove();
or
$('#dataConfirmModal').parent().remove();
You should have dismiss="modal" as attribute on your cancel button or try the following:
$("#yourHideCloseButton").on('click', function(){
$(this).closest(".modal").modal('hide');
});
Try that, it should close the modal, don't try to remove/delete the actual div