I need to have multiple modal's on the same page. Right now I just have two. One that loads content dynamically, and another the shows a loading gif when a file is being deleted. The loading gif modal works fine as it opens and closes on its own as it should. But the main modal that loads its content dynamically looses the ability to close. When I hover over the close button or link it does not change to the pointer, it is like it does not recognize the button is there.
If I remove the loading gif modal, the dynamic modal works fine. I have tried to do different modals, but they all have the same problem.
<div class="container-fluid">
<div class="page-header">
<h1 class="text-center">Link Details</h1>
</div>
<div id="linkDetailsWrapper">
<!-- Note - This content is loaded dynamically -->
<div class="col-lg-6 uploadFiles" id="uploadFiles-right">
<h3 class="text-center">Uploaded By Customer</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>File Name</th>
<th class="hidden-xs">Date Added</th>
<th>Notes</th>
<th class="hidden-xs">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>someFile.ext</td>
<td class="hidden-xs">2016-02-26 17:01:16</td>
<td><span class="glyphicon glyphicon-open-file"></span></td>
<td class="hidden-xs"><a title="Delete File" class="delete-file-link" data-fileid="130" data-tooltip="tooltip"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of dynamic content -->
</div>
</div>
<div class="modal fade" id="modal">
<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>File Notes:</h4>
</div>
<div class="modal-body">
<p>The Body</p>
</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="loadingModal">
<div class="modal-dialog">
<img src="/source/img/loader.gif" alt="loading..." class="loadingModal" />
</div>
</div>
<script src="/source/js/uploadLinks.js"></script>
<script>
$('#linkDetailsWrapper').load('/_links/details/45');
</script>
Content of uploadLinks.js:
$('body').tooltip({
selector: '[data-tooltip="tooltip"]',
trigger: 'hover'
});
$('#modal').on('show.bs.modal', function(e)
{
var link = $(e.relatedTarget);
var noteID = link.data('noteid');
$(this).find('.modal-body').load('/_links/loadNote/'+noteID);
});
$(document).on('click', '.delete-file-link', function(e)
{
var el = $(this);
if(confirm('Are You Sure?\nThis Cannot Be Undone.'))
{
$('#loadingModal').modal('show');
$.get('/_links/deleteNote/'+$(this).data('fileid'), function(data)
{
if(data == 'success')
{
el.closest('tr').remove();
$('#loadingModal').modal('hide');
}
else
{
alert('There was a problem deleting the file.\nAn error log has been generated.');
$('#loadingModal').modal('hide');
}
});
}
});
Edit: I found the solution. I was using some CSS I found in another forum to center the modal on the page vertically. This was causing my problem. I removed the CSS and I am good to go now.
CSS Removed:
body.modal-open .modal {
display: flex !important;
height: 100%;
}
Related
Guys i'm generating a set of data in a table after som set of calculation.. as soon as user clicks save button excel file with that data must be generated for downloading..
What is the php code for that ..
guys the data is not retrieved from database...its being displayed after a set of calculation as been performed.
Since i dont have any idea ive not posted any related code...sry for that..
below is how my table looks like
https://ibb.co/mUMOrQ
below is my table code
<div id="myModal" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
<div class="table-title">
<h3>CUF Table</h3>
</div>
<table class="table-fill" id="tabid">
<thead>
</div>
<div class="modal-body">
<tr>
<th class="text-left">TimeStamp</th>
<th class="text-left">CUF</th>
</tr>
</thead>
<tbody class="table-hover">
<!--tr>
<td class="text-left" id="data"></td>
<td class="text-left" id="data1"></td>
</tr-->
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="btn-group">
<button id="change-chart" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Below is jquery that ive included to download the file
$("#BUTTON").click(function(){
$("#TABLE").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Data",
filename: "Data" //do not include extension
});
});
You can use one of the following
https://stackoverflow.com/a/38761185/5350773
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
Node express app using EJS.
I'm creating a table - each cell has a button to trigger a modal. This code is inside a for loop:
<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">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body">
<% for(var j = 0; j < user.notifications.length; j++) { %>
<%= user.notifications[j] %>
<% } %>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products </button><br><br>
</div>
</td>
Every thing loads fine, the rendered html shows that each cell has it's own modal with it's own data but every button triggers myModal and they're all called myModal so every button loads the modal from the first cell.
Is there a way to dynamically create the div id like myModal1, myModal2, etc.?
I've tried
<div class="modal fade" id="<%=user.id%> ...>
Should I be doing this another way?
One such would be to use a single modal, but then vary the modal content based on the trigger button.
What happens is that an event is bound to the modal, which is triggered when the button opens the target modal. You can still hide the modal content inside the table, which the event will find and populate the modal body with.
Here is a simple example which you'll need to adapt to your code:
$(function() {
// when the modal is shown
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this);
// find the trigger button
var $button = $(e.relatedTarget);
// find the hidden div next to trigger button
var $notifications = $button.siblings('div.hidden');
// transfer content to modal body
$modal.find('.modal-body').html($notifications.html());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Notifications</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div class="hidden">
<ul>
<li>Product one</li>
<li>Product two</li>
<li>Product three</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
<tr>
<td>Maria</td>
<td>
<div class="hidden">
<ul>
<li>Product three</li>
<li>Product four</li>
<li>Product five</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body"></div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Well propably the title isn't that clear, i will try to explain the problem better.
i've got this modal:
<div id="modalFinestraErogazione" class="modal fade" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog higherWider">
<div class="modal-content">
<div class="modal-header">
<form:input path="codicePrescrizioneRiferimento" id="codicePrescrizione" type="hidden"/>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="chiudiErogazione()">×</button>
<h4 class="modal-title">Erogazione farmaci</h4>
</div>
<div class="modal-body">
<table class="table" id = "tabellaFarmaciPresccritti">
<tr><th>Farmaci prescritti</th><th>Dosaggi (die)</th><th>Durata confezione (Giorni)</th></tr>
</table>
<table class="table" id="tabellaErogati" bgcolor="#F8F8F8">
<tr><th class="col-sm-6">Farmaco</th><th class="col-sm-2">AIC</th><th class="col-sm-2">Targatura</th><th class="col-sm-1">Giorni</th><th class="col-sm-1"></th></tr>
</table>
<span class='col-sm-12 label-grande label-primary'>Note erogazione (a cura della farmacia)</span>
<div class='form-group'><textarea class='form-control' rows='3' id='nota'></textarea></div>
<div class='form-group'>
<span class="label-grande label-default">Durata complessiva terapia erogata (in giorni):</span>
<span class="label-grande label-default" id='durataComplessiva'></span>
<button type= "button" class="btn btn-primary pull-right" id="bottoneMessaggioMedico" style="width: auto;">Mostra messaggio del medico</button>
</div>
<div class='form-group'>
<table class="table">
<tr><th style="white-space:nowrap;">Tipo presidio: </th><td><select id="tipoPresidio" class="form-control"></select></td>
<th style="white-space:nowrap;">Tipo erogazione: </th><td><select id="tipoErogazione" class="form-control"></select></td></tr>
</table>
</div>
</div>
<div class="modal-footer">
<div class = "col-sm-offset-6 col-sm-6">
<div class = "col-sm-6">
<button type="button" class="btn btn-primary" onclick="salvaErogazione()">Eroga</button>
</div>
<div class = "col-sm-6">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="chiudiErogazione()">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
that at some point i show using:
$("#modalFinestraErogazione").modal('show');
Everything works fine, i add and delete works from the tables etc, and when the window becomes too long i can sroll it down.
Sometimes when the user does someting wrong i show-up a warning pop-up using this code.
function finestraWarning(messaggio)
{
BootstrapDialog.show({
type : BootstrapDialog.TYPE_WARNING,
title : "Attenzione",
message : messaggio,
size: BootstrapDialog.SIZE_NORMAL,
buttons : [ {
label : 'OK',
cssClass : 'btn-warning',
action : function(dialog) {
dialog.close();
}
} ]
});
}
and everything still works fine, but when i close the warning dialog something goes wrong.
Suddenly i can scroll down the modal window anymore, instead when i use the scrollwheel the page in the background moves.
I can't figure out why.
What should i do so that when i close the warning window i can still scroll down the modal window?
I am displaying a list of Topics on a modal popup window, where on the modal I have two Buttons next and previous.I want When i click on the previous button it shows the previous 10 topics and when i click on the next button it shows the next 10 topics. My Template code is this
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="topic_selector_label">Quiz Settings</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-condensed table-hover " >
<tbody>
{{#each topics}}
<tr>
<td>
{{name}}
</td>
</tr>
{{/each}}
</tbody>
</table>
<button type="button" class="btn btn-default" id="previous_topics">Previous Topics</button>
<button type="button" class="btn btn-default pull-right" id="next_topics">Next Topics</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div>
and my js code is
'click #next_topics':function(){
var LIMIT=2;
skip_topics=skip_topics+2;
var syllabus = Meteor.syllabi.findOne(Session.get("currentSyllabusId"));
topics= Meteor.topics.find({subject_id: syllabus.subject_id, level_id: syllabus.level_id},{skip:skip_topics,limit:1})
return Template.syllabus_design({topics:topics})
},
I want to change the list of topics on next and previous button click
If I understand correctly your problem is due to the template not refreshing on click,
see this: https://github.com/meteor/meteor/issues/1172#issuecomment-19832727
try making skip_topics a Session variable and print that variable in your template - the same way that awatson1978 suggests in the github issue using his/her form_changed session variable.
For deeper understanding of what went wrong in your code see http://docs.meteor.com/#reactivity
I am using Twitter Bootstrap Modal as a search box.There are 3-4 divs from where User can call the modal and do the search. Search results are shown in table format on modal itself. When user clicks a row from search result, I have to take the selected row data and populate the parent div fields.How would I determine the respective parent div which called search modal?
Code
//initiates the modal
$('#searchClient').click(function() {
clearTable();
$('#searchModal').modal('toggle');
});
//reads data from clicked row
$("#clientSearchResult").delegate("tr", "click", function(){
alert($(this).html());
//??Find out the parent div and populate selected data
});
HTML
<div class="modal fade" id="clientSearchModal">
<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">Client Search</h4>
</div>
<div class="modal-body">
<div class="form-inline">
<input type="text" id="searchClientName" placeholder="Client Name">
<input type="text" id="searchNumber" placeholder="Number">
<button type="button" class="btn btn-primary" id="doClientSearch">Search</button>
</div>
</div>
<div class="modal-footer">
<table class="table table-hover table-bordered" id="clientSearchResult">
<thead>
<tr>
<th>Name</th>
<th>Tax Id</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Not entirely sure what you're doing, but it sounds like you are trying to figure the source of the click event. If "searchClient" is the "parent divs" you are talking about, you should change their IDs to classes (e.g. <div class="searchClient">)
You could then do something like:
var parentClicked; //i'm global!
$('.searchClient').click(function(e) {
parentClicked = e.target;
///etc....
});