Goal:
Display the popup screen Search5 by clicking on the arrow icon in relation to the link textlink "test".
Firstly, click on the textlink test, then click on the displayed icon arrow and then the popup screen Search will appear.
Problem:
When you click on the linktext "test" the icon will appear. When you click on the icon, the content of the popup Search will not appear.
What code am I missing? I have tried with different solution but I failed.
Compare the the third row from the table, the icon works that you can show the content of the popup search.
Info:
*Im using bootstrap 3
Thank you!
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Search</th>
<th>Test</th>
</tr>
</thead>
<tbody id="datafromtbody">
<tr id="tr_row1">
<td id="tr_row1_td1"></td>
<td>test</td>
</tr>
<tr>
<td id="tr_row2_td2"></td>
<td>test</td>
</tr>
<tr id="tr_row3">
<td id="tr_row2_td3">
<a href="#myModal-search5" data-toggle="modal" data-target="#myModal-search5" class="showseconddata" id="data_3">
<img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png" width="15" height="15" />
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal-firstdata" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">First data</h4>
</div>
<div class="modal-body">
<div id="firstdata_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-search5" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search 5</h4>
</div>
<div class="modal-body">
<div id="showdatafor5"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('.firstdata').click(function () {
var alldata = $(this).attr("id");
var number = alldata.split('_')[1];
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>a</td><td><button onclick='createicon(" + number + ")'>add data in table</button></td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("firstdata_content");
anydata.innerHTML = display;
});
function createicon(data)
{
var idname = "tr_row" + data + "_td" + data;
var anydata = document.getElementById(idname);
if (anydata.innerHTML === "") {
var addData = document.getElementById(idname);
addData.innerHTML = "<a href='#myModal-search5' data-toggle='modal' data-target='#myModal-search5' class='showseconddata'><img src='https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png' width='15' height='15' /></a>";
}
}
$('.showseconddata').click(function () {
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>show data</td>";
display +="<td>show data</td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("showdatafor5");
anydata.innerHTML = display;
});
</script>
</body>
</html>
The new icons are created after you attached the click event handler to .showseconddata. Hence, you need to delegate this event, changing from:
$('.showseconddata').click(function () {
to:
$('.container').on('click', '.showseconddata', function () {
function createicon(data) {
var idname = "tr_row" + data + "_td" + data;
var anydata = document.getElementById(idname);
if (anydata.innerHTML === "") {
var addData = document.getElementById(idname);
addData.innerHTML = "<a href='#myModal-search5' data-toggle='modal' data-target='#myModal-search5' class='showseconddata'><img src='https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png' width='15' height='15' /></a>";
}
}
$('.firstdata').click(function () {
var alldata = $(this).attr("id");
var number = alldata.split('_')[1];
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>a</td><td><button onclick='createicon(" + number + ")'>add data in table</button></td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("firstdata_content");
anydata.innerHTML = display;
});
$('.container').on('click', '.showseconddata', function () {
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>show data</td>";
display +="<td>show data</td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("showdatafor5");
anydata.innerHTML = display;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Search</th>
<th>Test</th>
</tr>
</thead>
<tbody id="datafromtbody">
<tr id="tr_row1">
<td id="tr_row1_td1"></td>
<td>test</td>
</tr>
<tr>
<td id="tr_row2_td2"></td>
<td>test</td>
</tr>
<tr id="tr_row3">
<td id="tr_row2_td3">
<a href="#myModal-search5" data-toggle="modal" data-target="#myModal-search5" class="showseconddata" id="data_3">
<img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png" width="15" height="15" />
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal-firstdata" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">First data</h4>
</div>
<div class="modal-body">
<div id="firstdata_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-search5" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search 5</h4>
</div>
<div class="modal-body">
<div id="showdatafor5"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
Hi I have the same problem as this thread twitter bootstrap modal won't work on first call
I tried to follow the answer and replace $('#modal').modal('toggle') to $('#modal').modal('show'). It still only registers on the second click. (you have to click on the poster 2 times to show modal, and you have to click on 'Select' button 2 times to close it).
Here's my code: Javascript
var zipcode = 92660;
var showDate = '2018-06-10';
var selectedMovieTitles = [];
var selectedMoviePosters = [];
var selectState = false;
var tmsURL = 'http://data.tmsapi.com/v1.1/movies/showings?startDate=' + showDate + '&zip=' + zipcode + '&api_key=' + tmsAPIKey;
$('#button').on('click', function () {
getMovieList();
});
function litmitMovieSelect() {
$('#limitSelection').modal('show');
}
function selectMovie() {
$(this).on('click', function () {
$('#movieInfoModal').modal('hide');
if (selectedMovieTitles.length >= 3) {
litmitMovieSelect();
}
else {
selectState = true;
selectedMovieTitles.push($(this).attr('data-title'));
selectedMoviePosters.push($(this).attr('data-poster'));
$(`.posters[data-title='${$(this).attr('data-title')}']`).css('border', '3px solid #008000');
$(`.posters[data-title='${$(this).attr('data-title')}']`).attr('data-state-selected', selectState);
console.log('selected movie titles: ' + selectedMovieTitles);
}
});
}
function launchModal() {
$(this).on('click', function () {
selectState = false;
$(this).css('border', '');
var titleToBeRemove = $(this).attr('data-title');
if (selectedMovieTitles.indexOf(titleToBeRemove) !== -1) {
selectedMovieTitles.splice(selectedMovieTitles.indexOf(titleToBeRemove), 1);
}
$('.modal-title').text($(this).attr('data-title'));
var movieInfoDiv = $(`<div>
<p><strong>Actors:</strong> ${$(this).attr('data-actors')}</p>
<p><strong>Director:</strong> ${$(this).attr('data-director')}</p>
<p><strong>Genre:</strong> ${$(this).attr('data-genre')}</p>
<p><strong>Year:</strong> ${$(this).attr('data-year')}</p>
<p><strong>Duration:</strong> ${$(this).attr('data-runtime')}</p>
<p><strong>Rating:</strong> ${$(this).attr('data-rating')}</p>
<p><strong>Plot:</strong> ${$(this).attr('data-plot')}</p>
</div>`)
$('.modal-body').html(movieInfoDiv);
var selectButton = $(` <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-title="${$(this).attr('data-title')}" data-poster="${$(this).attr('data-poster')}">
Select
</button>`)
selectButton.on('click', selectMovie);
$('#movieInfoModalFooter').html(selectButton);
$('#movieInfoModal').modal('show');
});
}
function getMovieList() {
var movieTitles = [];
axios.get(tmsURL)
.then(function (tmsResp) {
console.log(tmsResp);
tmsResp.data.forEach(function (element) {
movieTitles.push(element.title);
});
console.log(movieTitles);
movieTitles.forEach(function (element) {
var omdbURL = 'https://omdbapi.com/?t=' + element + '&apikey={}';
axios.get(omdbURL)
.then(function (omdbResp) {
console.log(omdbResp);
var posterDiv = $(`<img class='posters m-3' id='${omdbResp.data.imdbID}'
data-title='${omdbResp.data.Title}'
data-actors='${omdbResp.data.Actors}'
data-director='${omdbResp.data.Director}'
data-genre='${omdbResp.data.Genre}'
data-plot='${omdbResp.data.Plot}'
data-year='${omdbResp.data.Year}'
data-runtime='${omdbResp.data.Runtime}'
data-rating='${omdbResp.data.imdbRating}'
data-poster='${omdbResp.data.Poster}'
src=${omdbResp.data.Poster}
>`);
posterDiv.on('click', launchModal);
$('#movie-display').append(posterDiv);
})
.catch(function (err) {
console.error(err);
});
});
}).catch(function (err) {
console.error(err);
});
}
Here's the HTML:
<div class="modal fade" id="litmitSelection" tabindex="-1" role="dialog" aria-labelledby="litmitSelection" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
Sorry, You Can Only Select Up To 3 Movies.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Movie Info Modal -->
<div class="modal fade" id="movieInfoModal" tabindex="-1" role="dialog" aria-labelledby="movieInfoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" 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">
</div>
<div class="modal-footer" id="movieInfoModalFooter">
<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<!-- <button type="button" class="btn btn-primary">Select</button> -->
</div>
</div>
</div>
</div>
Something like this would suffice.
Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs
$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
// on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); // See how its usefull right here?
/*
You now have a reference to which element caused the modal to showup , you can use this to do anything as shown below
*/
var row = el.closest(".data-row");
// get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
// fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->
I have two modals, one is View and other is Edit.
Issue is that when I open a view modal and click on edit button then edit modal is open but view modal is still open its will be disappear when edit modal is open.
I am doing like this
$("#editModal").click(function() {
var id = $("#editModal").val();
$('#' + id).modal('hide');
$('#' + id).modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
View
<div id="viewTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="pull-left">Code : <label class="modal_label">T-10-Yes</label></h6>
<h6 class="pull-right">Task Date : <label class="modal_label">17 May, 2018</label></h6>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Review system generated T&Cs for deploying to website</td>
<td>0%</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="editTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="pull-left">
<input type="button" class="btn btn-info" value="Update">
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I need that when I click on edit button then edit Modal is open and view modal is closed.
Here is an working example of how you can do it.
$("#editModal").click(function() {
var button = $(this);
var id = button.val();
button.closest(".modal").modal('hide');
$('#' + id).modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
View
<div id="viewTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="pull-left">Code : <label class="modal_label">T-10-Yes</label></h6>
<h6 class="pull-right">Task Date : <label class="modal_label">17 May, 2018</label></h6>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Review system generated T&Cs for deploying to website</td>
<td>0%</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="editTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="pull-left">
<input type="button" class="btn btn-info" value="Update">
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
What I would say is close all the modals that are opened and then open only the modal you want. Something like:
$("#editModal").click(function() {
var id = $("#editModal").val();
$('.modal').modal('hide');
$('#' + id).modal('show');
});
Since all modal have a common class 'modal' it will close all the
modal and show the modal you want.
Hope this helps!!
Cheers
This is a bit more dynamic.
let modals = [
{
'callToAction': 'toggleVisitorProfileModal',
'modalToToggle': 'visitorProfileModal'
}, {
'callToAction': 'toggleBuyTokensModal',
'modalToToggle': 'tokensModal'
},
];
$.each(modals, function (key, value) {
$('.' + value.callToAction).on('click', function () {
if ($('#' + value.modalToToggle).hasClass('in') === false) {
$('.modal').modal('hide');
$('.modal-backdrop').remove();
$('#' + value.modalToToggle).modal('show');
}
}
)
});
Whenever you click an element to activate a modal
Check if the current modal is open. An open modal has the IN class
associated. If this is false we know that the modal you try to open
is currently NOT open.
We then close all modals.
When there are multiple modals on the same page you might come across the black background not disappearing. To remove this we remove all elements containing the MODAL-BACKDROP class.
And last we show the modal that is toggled.
Closing all Modals in background
$('.modal').modal('hide');
Now, opening new Modal
$('#myModal').modal('show');
I know this post is too old but I spend a lot of time in this type of issues and it's a simple solution by hiding modals in the webpage and then show new modal
$('#mymodal').modal('hide');
it works correct,
If not closing modal then use below script
$('#mymodal').modal('hide');
$('div.modal-backdrop.fade.in').attr('class','none');
I am working with a datatable and added a remove button to remove a row from the table. Here is some HTML
My Modal:
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Confirm Remove</h4>
</div>
<div class="modal-body">
<label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" >Remove</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
My Remove button
<td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td>
I can open the modal but when I click Remove, nothing happens. Here is some code from my .js file
function removeRow(btn) {
var table = $('#Table').DataTable({"retrieve": true});
var row = $(btn).closest('tr');
if(row) {
table.row(row).remove().draw();
}
}
$('#myModal').on('show.bs.modal', function(e) {
var button = e.relatedTarget;
$('.btn-ok', this).data('button', button);
});
$('#myModal').on('click', '.btn-ok', function(e) {
var button = $(this).data('button');
removeRow(button);
});
what am I doing wrong?
You missed the . inside your jquery event code.
So instead of btn-ok do this .btn-ok
Also, I you can't put button object inside data attribute. You would have to put some sort of unique identifier.
So something like this could work
$('#myModal').on('show.bs.modal', function(e) {
var button = e.relatedTarget.attr("id");
$('.btn-ok').attr('data-target', id);
});
$('#myModal').on('click', '.btn-ok', function(e) {
var button = $(this).attr('data-target');
removeRow(target);
});
function removeRow(target) {
var table = $('#Table').DataTable({"retrieve": true});
var row = $("#"+target).closest('tr');
if(row) {
table.row(row).remove().draw();
}
}
Use Try and Catch statement instead of If.
You use:
table.row(row).remove().draw();
Instead of:
row.remove();
table.draw();
Hope it helps!
$(document).ready(function() {
$('#Table').DataTable();
} );
function removeRow(btn) {
var table = $('#Table').DataTable({
"retrieve": true
});
var row = $(btn).closest('tr');
try {
row.remove();
table.draw();
}
catch(e) {
console.log('Error Message: ' + e);
}
}
$('#myModal').on('show.bs.modal', function(e) {
var button = e.relatedTarget;
$('.btn-ok', this).data('button', button);
});
$('#myModal').on('click', '.btn-ok', function(e) {
var button = $(this).data('button');
removeRow(button);
$('#myModal').modal('hide');
});
table {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" >
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table id="Table">
<tr>
<td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td>
<td>First Row</td>
</tr>
<tr>
<td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td>
<td>Second Row</td>
</tr>
</table>
<div class="modal fade" id="myModal" 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">Confirm Remove</h4>
</div>
<div class="modal-body">
<label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" >Remove</button>
</div>
</div>
</div>
</div>
Here is my code of table. I want to get ID of each row in opened modal when press button "EDIT". How can I send ID of selected row to modal? In my case bellow i am getting only first row ID.
Thank you for attention.
JS for modal form
<script>
$(".btn[data-target='#myModal']").click(function() {
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
</script>
<table class="simple-little-table table" cellspacing='0'>
<tr>
<th><p>№</p></th>
<th><p>Name, Surname</p></th>
<th>Own number</th>
<th>Company Number</th>
</tr>
<?php
$result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
$id=$row["0"];
echo '<tr>
<td><p>'.$row[1].' '.$row[2].'</p></td>
<td><p>'.$row[4].'</p></td>
<td><p>'.$row[5].'</p></td>';
?>
<td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>
<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>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID-->
<h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>
</div>
<div class="modal-body"> sadasdas</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
}
?>
Here is picture of table
I need to get ID of row in modal
This is what you can do . i am not using your data but assuming that you have enough understanding to use this according to your need.
Basically I am just using a trick.
<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>
you will get something like this
<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>
<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>
now use this jquery
$('.myclass').click(function(){
var btn_id = $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});
function getValue(id){
$('#myModalLabel').text(id);
$('#myModal').modal('show');
}
and call this function on button click
instead of using this
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">
use
<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">
You shouldn't create html for modal for each row, but instead just create one modal, which will be used when every row is clicked.
Then, using jquery in click method you can set different fields for modal, such as id or something else, like this for example:
$("btn").click(function(event) {
id = event.target.id;
$(#myModalIdField).text = id;
});
use this :
first, give a table id="name",
use your own table and data and if ur using a database or normal table;
use button modal as -
<table id="table">
<thead>
<tr>
<th>Your data </th>
</thead>
<tbody>
<tr>
<td>Your Data </td>
<td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
<div class=" modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="myModalLabel">
<h4 class="modal-title">Enter Remarks:</h4>
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="comment">Remarks:</label>
<textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" name="msub" id="" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</button>
</td>
</tr>
</tbody>
</table>
Use this jquery :
var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function getValue(rindex) {
rindex = this.rowIndex;
$('#myModalLabel').text(rindex);
$('#myModal').modal('show');
}
}
I have a 3 rowed table and I want to click on each row and describe more about the content of each in a modal pop out . The problem is when I click on the row the screen will go a bit darker but no pop up shows up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#orderModal').modal({
keyboard : true,
backdrop : "static",
show : false,
}).on('show', function(){
var getIdFromRow = $(this).data('orderid');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
$(".table-striped").find('tr[data-target]').on('click', function(){
//or do your operations here instead of on show of modal to populate values to modal.
$('#orderModal').data('orderid',$(this).data('id'));
});
});
</script>
</head>
<body>
<div class="container">
<h1>Orders</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-id="1" data-target="#orderModal">
<td>1</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="2" data-target="#orderModal">
<td>2</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="3" data-target="#orderModal">
<td>3</td>
<td>24234234</td>
<td>A</td>
</tr>
</tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</body>
</html>
The reason is that you're probably using the newest bootstrap and an old HTML modal format.
Your modal should include <div class="modal-dialog"> and <div class="modal-content"> elements. Also, there's no more hide class in the actual version of bootstrap
<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" 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">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Another thing is the show event, which should be on('show.bs.modal'), not on.('show')
DEMO