We Keep Coding

how to load dynamically generated table data into form inside modal?

I have a table which is dynamically generated. the table looks like:-
<table id="datatables" class="table table-striped table-no-bordered table-hover"
cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</tfoot>
<tbody>
<tr th:Each="b,iter : ${branches}">
<td th:text="${iter.index}+1"></td>
<td th:text="${b.branchName}"></td>
<td th:text="${b.branchLocation}"></td>
<td th:text="${b.status}"></td>
<td style="text-align: right;">
<button class="btn btn-warning" data-toggle="modal" data-target="#branchModal">Edit</button>
<button class="btn btn-warning">Deactivate</button>
</td>
</tr>
</tbody>
</table>
and i have bootstrap modal. now when i click edit button of the table i want to load the clicked table row data inside the form of modal.
<div class="modal fade" id="branchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="branch-name" class="col-form-label">Branch Name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch-location" class="col-form-label">Branch Location:</label>
<textarea class="form-control" id="branch-location"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button style="margin-right:10px;" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
how can i achieve it ?
note:- i am not using jquery so solution with plain javascript will be appreciated.

If you have a function loadDataOnModal to handle displaying your modal, add this to your edit button:
th:onclick="| loadDataOnModal('${b.branchName}', '${b.branchLocation}')|"
I see you only need branch name & location in your modal body.

Hi simply run this code on the click event that opens your modal for each value you wish to change:
document.getElementById('recipient-name').value = 'Value you wish to set'
You can also access the value of the element you are clicking by passing in the event variable like so:
document.getElementById('clicked').addEventListener('click', event => {
document.getElementById('recipient-name').value = event.target.value
})
This is basic concept you can take it further from there...
Hope this helps

Close current modal and open new modal using jquery

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');

How to populate a popup in Spring?

I do have a table. After clicking a row, I would like a popup to appear showing product details. I've tried a controller method with Bootstrap modal window, but that just does not work. Here's the method:
#RequestMapping("/{id}")
public String getNetworkInfo(Model model, #PathVariable String id){
model.addAttribute("poolHashrate", netService.getPoolHashrate(new Long(id)));
return "networkDetails";
}
And a view body:
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
It returns a view that was supposed to be a popup, but I feel like I don't get the idea. No data there. Just a sample popup.

You can use ajax to achieve it
First make the controller return to a jsp page,then use the content of
the jsp page to form a dialog and open it.
Suppose the jsp page for networkDetails is as below,it only include the detail info, if not you can create a jsp page for it:
<div id="networkDetail">
${poolHashrate}
<div>
Then we can put the content of it to the pop up window:
$.ajax({
url:url,
type:"get",
success:function(data){
$("#dialog").html(data);//data is the return page of "networkDetails"
$("#dialog").dialog({//open the dialog
//... other code to init a dialog
});
}
});

I used Jquery to open the modal popup and populate the values in modal popup as well.
Below is modal code:
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">EDIT</h4>
</div>
<div class="modal-body">
<p>
<input type="text" class="input-sm" id="txtfname" />
</p>
<p>
<input type="text" class="input-sm" id="txtlname" />
</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery code: It populates and open the modal - myModal as defined above
<script>
$(document)
.ready(
function () {
$('table tbody tr td')
.on(
'click',
function () {
$("#myModal").modal("show");
$("#txtfname")
.val(
$(this).closest(
'tr')
.children()[0].textContent);
$("#txtlname")
.val(
$(this).closest(
'tr')
.children()[1].textContent);
});
});
</script>
Table code:
<table id="example" class="table table-condensed table-hover table-bordered"
width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$3,120</td>
</tr>
<tr>
<td>Nixon Tiger</td>
<td>System Architect</td>
<td>London</td>
<td>61</td>
<td>$3,120</td>
</tr>
</tbody>
</table>

Preventing model window displaying on page refresh

I'm using the Bootstrap modal to display details on button click window.
Now facing a problem whenever the page loading or refreshing the Model is also showing up. How can I prevent this from happening.?
<script type="text/javascript">
function showPopup() {
$('#myModal').modal('show');
}
</script>
ASP
<section class="content">
<div class="row">
<div class="col-lg-12" style="margin: 20px 0 20px;">
<div class="box">
<div class="box-header">
<h3 class="box-title">Orders</h3>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive ">
<asp:ListView ID="lvCustomers" runat="server" >
<LayoutTemplate>
<table id="product-master" class="table table-bordered table-striped">
<tr>
<th>Order #</th>
<th></th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
<td>
<asp:Button ID="btnDetails" runat="server" Text="Products" class="btn btn-primary btn-flat" CommandName="ViewDetails" CommandArgument='<%# Eval("OrderNo") %>' OnCommand="btnDetails_Command" />
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
</div>
<div class="modal fade modal-primary" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">Products List</h4>
</div>
<div class="modal-body">
<div class="box-body table-responsive no-padding">
<%# Eval("OrderNo") %>
<asp:ListView ID="LvDetails" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table id="products" class="table">
<tr>
<th>Order #</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
</ItemTemplate>
</asp:ListView>
</div>
<!-- /.box-body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
</section>

Not sure where is calling .showPopup(). That detail is important. But if its being called in any sort of page_load or anything that gets called from page_load then that would cause that problem.
Also if you're calling .showPopup() from some javascript code, then all javascript code gets run when the page is loaded/reloaded. You'd want to include some kind of conditional to make it call .showPopup() only when you need it to.

Do you have something like this in your project?
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
If so it might be the root of your issue, as this js function will set the modal to show on page load. You'll be able to find a lot simply by googling this issue as well.

Meteor - template helpers argument (spacebars)

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");
});