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');
Related
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>
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 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
I want to keep the state of my bootstrap.ui (OR ngdialog!!) modal window when it is closed. Any idea how I might ng-show/ng-hide a modal window?
Thanks.
Look this example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div ng-app>
<div ng-init="showModal=false">
<button class="btn btn-primary btn-lg" ng-click="showModal = !showModal">
Launch demo modal
</button>
<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="showModal">
<div class="modal-dialog">
<div class="modal-content">
MODAL
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="showModal=false">Ok</button>
</div>
</div>
</div>
</div>
</div>
</div>
I need some thoughts about how to solve my problem. I have the following html template with a table. It shows 5 rows and at the end of each row (in the last td) there is a button which triggers a bootstrap modal (popup window).
I am using spacebars {{#each}} to loop through all the cursors, but the problem is with the modal. It only shows the data for the first row, for every row-record the same data.
This is because the ID for the modal is the same for every record (it is the first one, #subsPopup). I need somehow to pass it different ID for every row, like #subsPopup{{var}}. Any idea how could I do this?
<!-- subscribers table -->
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Created</th>
<th>Modified</th>
<th>Mailing lists</th>
</tr>
</thead>
<tbody>
{{#each subsList}}
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{email}}</td>
<td>{{createdDate}}</td>
<td>{{modifiedDate}}</td>
<!-- Trigger the modal (popup window) with a button -->
<td>
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#subsPopup">Show</button>
<!-- Modal -->
<div id="subsPopup" 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">Mailing List for <b>{{firstName}} {{lastName}}</b> ({{email}})</h4>
</div>
<div class="modal-body">
<p>{{mailLists}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
Your subscriptions collection probably has the _id field, so you might try outputting {{_id}}
In case anyone else comes across this issue...
My method of solving this ... (not sure if this is the most elegant , but it did work for me )
Here is an example:
[Meteor Template File - "coolmodal.html" - containing a bootstrap modal component]
<template name="mymodal">
<!-- This button we can use to trigger the modal to display-->
<button class="btn btn-success btn-lg" type="button">
<div class="modal fade" id="mycoolmodal" tabindex="-1" role="dialog">
<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">{{modalDetails}}</h4>
</div>
<div class="modal-body">
<p>Cool stuff I like to write here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
[Meteor Client JS file - "cool.js" - containing template helpers, etc]
Template.mymodal.events({
'click .img-thumbnail'(event, instance) {
event.preventDefault(); // Stops the page from attempting a reload.
Session.set('myInfoForModal', this.my_data_you_want);
$('#coolmodal').modal('show');
}
});
Template.registerHelper('modalDetails',function(input){
return Session.get("myInfoForModal");
});