Bootstrap Popovers not working in Popup modals (not z-index) - javascript

Okay, so I have created a popover to show users hints of what buttons are for etc, well, they work on my website but when I try to use one inside a popup modal it doesn't iniate.
None popup modal:
Popup modal
MY Javascript to iniate the popup modal:
$('[data-toggle="popover"]').popover({trigger: "hover", placement: 'auto left'});
To load my modals I am using $.ajax() (if that's any help) like so:
//$(document).off('click');
$(document).on('click', "a[data-target='#globalModal']", function (ev) {
ev.preventDefault();
$("#globalModal").modal("show");
var target = $(this).attr("href");
$.ajax({
url: target,
type: 'GET',
async: false,
}).done(function(data)
{
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
}) ;
});
How I am creating my popover tooltips:
<i class="fa fa-building" data-toggle="popover" title="Hint:" data-content="Get Driving directions"></i>
How can I fix this? It works but just not inside modals?

So you have to call popover after you load your icons.
}).done(function(data) {
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
$('[data-toggle="popover"]').popover({trigger: "hover", placement: 'auto left'});
});

Related

Bootstrap modal not closing second time from JS code

I have following code in a Partial View in an MVC project:
$(document).ready(function () {
$("##Html.IdFor(m => m.AanwezigheidChauffeurID)").change(function () {
setModalBody("busy", "Even geduld, de gegevens worden opgehaald...");
$("#modalDialog").modal({ keyboard: false, backdrop: "static" });
var chauffeurRequest = $.ajax({
url: '#Url.Action("GetAanwezigheid", "Invoer")',
data: { id: $("##Html.IdFor(m => m.AanwezigheidChauffeurID)").val() },
async: true,
cache: false,
type: "POST"
});
chauffeurRequest.done(function (data, textStatus, jqXHR) {
$("#entriesDiv").empty();
$("#entriesDiv").append(data);
$(".hoursInput:first").trigger("change");
$("#modalDialog").modal("hide");
});
chauffeurRequest.fail(function (request, textStatus, errorThrown) {
setModalBody("error");
});
});
});
This is the markup of the modal:
<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalDialogLabel">Xwift</h5>
<button type="button" class="close closeModalButton" data-dismiss="modal" aria-label="Sluiten">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modal-dialog-body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="closeModalButton" disabled class="btn btn-primary closeModalButton" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
The situation:
$("##Html.IdFor(m => m.AanwezigheidChauffeurID)") is referring to a select element. When I change the value of the drop-down, the AJAX request is launched and the modal dialog is shown. When the request is done, the modal is closed by calling $("#modalDialog").modal("hide");.
Now when I change the value of the drop-down again, the request is launched again and the modal is shown again. When the request is done, I can see the changes in the DOM through the backdrop from the modal, but the modal won't close anymore. When I call the line $("#modalDialog").modal("hide"); in the console to test it, the modal does close.
Is there some reason why it won't close the second, third or more time?
Too bad I already asked this question before finding following question here on StackOverflow: Bootstrap 4 Modal Not Closing Properly On Hide
Several comments and answers refer to the fact that the fade class disrupts the whole hiding of the modal. I have tried removing this class and it worked for me as well. Sadly, I didn't find a reason for this.

How to apply this html script in to jQuery?

I have a button that attribute data-toggle and data-target. This is the full button script:
<button style="width:50%; float:left" type="button" class="btn btn-info" id="btn_report" data-toggle="modal" data-target="#myModal">Detail</button>
This button opens a simple modal. The modal can also be closed by clicking outside the modal box. However, I'd like to have some rules in the button using jQuery.
$('#btn_report').on('click',function(e){
var dataSend = "some_data";
$.ajax({
type: "POST",
url: "some_function",
cache: false,
dataType : "json",
data: dataSend,
success: function(response) {
if(response){
$('#myModal').show();
}else{
alert("There are no data to be displayed"); return false;
}
}
})
});
With data-toggle and data-target, the modal is always be opened whenever I click the button. If I remove data-toggle and data-target and add $('#myModal').show();, the modal is not show up.
What I'd like to do is to open the modal, if there are data returned from ajax. If there aren't, the alert is fired.
The modal is simple like this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" id="printMe">
<div class="modal-body"> Congrats, you have your data </div>
</div>
</div>
</div>
As you're using a Bootstrap modal you need to use modal('open'), not show(). Try this:
if (response) {
$('#myModal').modal('show');
} else {
alert("There are no data to be displayed");
}
Also note that the return is redundant as you can't return anything from within the asynchronous success handler function.
Add event.stopPropagation() in the click listener
$('#btn_report').on('click',function(e){
event.stopPropagation();
setTimeout(function() {
// ajax mock
$('#myModal').modal('show');
}, 2000);
});

jquery destroy modal dialog on close

I have a jquery modal dialog which is created as follows in a function:
function EditDialog(pk) {
$.ajax({
url: "{% url 'populatereviewform' %}",
method: 'GET',
data: {
pk: pk
},
success: function(formHtml){
//place the populated form HTML in the modal body
$('.modal-body').html(formHtml);
$( "#dialog" ).modal({width: 500, height: 500});
},
dataType: 'html'
});
return false;
}
How can I ensure that every time I call this function a fresh instance of the dialog is created? I wonder if somehow I can hook into the close event and ensure that the dialog is completely destroyed. I am trying to debug something and it seems that some of my variables do not get refreshed when this dialog is called a second time and I am trying to get to the bottom of it. The django template for creating the dialog is:
<div id="dialog" class="modal" title="Edit" style="display:none">
<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">Review Uploaded Image</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
You can use the bootstrap modal callback.
$('#dialog').on('hidden.bs.modal', function () {
$('.modal-body').html('');
});

Add Button to parent div statically

Definition: I am creating a project that manages interns. Currently I am working at employee side; employees can add/edit/delete interns. These actions are handled by modal popups.
Approach: In the purpose of avoiding unnecessary code, I created a layout modal.
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3><span class="glyphicon glyphicon-pencil"></span>Intern</h3>
</div>
<div id="myModalContent"></div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal"> Cancel
</button>
</div>
</div>
As you see, layout has CANCEL button. Because every modal should have cancel button, so best approach is placing it to layout.
<div id="myModalContent"></div>
This myModalContent part is filled by a javascript/ajax code. Script is putting partial views to myModalContent. Also "Save Changes", "Delete Intern" etc.. buttons are coming from partial views.
Problem: But myModalContent is at another div, Cancel buttons are at another div. That causes a problem:
Edit Button code:
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right">
<span class="glyphicon glyphicon-floppy-disk"></span> Edit Intern
</button>
</div>
I want these buttons at same row. As far as I know (from my researchs) I cant access parent div with css/html.
Any help would be appreciated. Thanks
Edit:
Jquery code is here:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
location.reload();
}
}
});
return false;
});
You can get edit button from myModalContent and append it in modal-footer after loading partial view using below jquery
else {
$('#progress').hide();
$('#myModalContent').html(result);
//move button from modal content to footer
$('div.modal-footer').append($('#myModalContent button.btn.btn-default.pull-right'));
bindForm();
location.reload();
}
If you want, edit button before cancel button then use prepend() instead of append()

How to enable bootstrap popover to open and close multiple times?

I want a popover using bootstrap that can be closed through clicking on a button within the popup. But I after closing, I have to click twice on the button to open the popover again.
I currently have the following implementation:
HTML:
<button type="button" id="example" class="btn btn-primary">example</button>
JAVASCRIPT:
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide");
">×</button>',
content : 'Content'
});
});
How can I implement a close-button in the popover without having to click twice on the button to re-open the popover?
You can fix this by adding click() event.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide").click();
">×</button>',
content : 'Content'
});
});

Categories