I have come across an error while using ckeditor in bootstrap 5 modal and it looks like it's a very known error and many have given solution for it for different bootstrap versions but i am not able to figure out one for bootstrap 5, please have a look.
Here is the problem with solution:- https://stackoverflow.com/a/31679096
Other similar problems:-
CKEditor Plugin: text fields not editable
Bootstrap with CKEditor equals problems
Mainly what would be the alternative of below line for bootstrap 5. $.fn.modal.Constructor.prototype.enforceFocus
If I search for it in bootstrap 4 js file I'm able to find fn.modal.Constructor in there but not in bootstrap 5. Please if someone can recreate the verified solution in the above link according to bootstrap 5 it would be very appreciated. Thank you for your time.
image describing problem
Also few notes:-
All the other input types like checkboxes and dropdown works but not just text field.
I have also tried removing tabindex="-1" from bootstrap modal code but the problem remains.
Thanks for this. Saved me a lot of head scratching. As of Bootstrap 5.3, this requires a small tweak:
bootstrap.Modal.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };
Not sure if you figured out the answer to this yet, but I've had this same issue with a sweetalert2 modal. I scoured bootstrap's source code and found that you can remove the focus with this:
$.fn.modal.Constructor.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };
Works as of Bootstrap 5.1.3
Bootstrap does not support nesting modals disabling enforce focus will allow other modals to get focused: <Modal enforceFocus={false}>
I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});
Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});
I have a google map with popup alerts which used to work but for some reason isn't now.
It is supposed to be modal and have an x to close it. It ought to expand to include all text. This worked before but not any more.
It has a close button instead of the x. The text overflows the size of the window.
I copied the code from a working map but that did not help.
Here is the code:
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:200,
resizable: true,
modal : true,
close: function(ev, ui) {
$(this).remove();
}
}).css("background", "lightgrey");
}
What could have broken this code. (It is embedded in a Drupal 7 page.)
I resolved this by completely removing the various jquery libraries I had added to the Drupal configuration and using the explicit definitions in the code. I must have introduced something that conflicted with the behaviour of alerts.
I've gotten this to work on all my other pages, and I have copied the code from there, (other developers developed this) and it has worked no problem. I switched to a newer jQuery (1.10) and now the close is not closing the prompt.
function DialogPrompt(url, height, width, onload_method, complete_method) {
$("<div id=\"prompt\"><img src='/js/loadingAnimation.gif' /></div>")
.dialog({
modal: true, height: height, width: width,
buttons: {
"Close": function () {
// Close the dialog
$(this).dialog("close").remove();
}
}
});
}
Before the close button was pressed:
After the close button was pressed:
as you can see that the details of the prompt were closed but the prompt still remains
So before I get flagged for not asking a question:
How do I fix this? Is there something wrong with my syntax? is there something wrong with the close for the new jQuery?
Also, these are my updated jQuery files:
<link rel="Stylesheet" href="/css/ui/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
all updated from the .min files from their website
new error that I got in the console after changing the URL of the prompt being passed in..
"Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
this is baffling.. its the only page that this doesnt work on...
I'm creating an ASP.NET MVC3 app that uses jQuery Datepicker and Timepicker inside a dialog. The code is pretty simple, just localization:
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd/mm/yy",
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
dayNamesMin:['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
});
$('.timepicker').timepicker({
timeOnlyTitle: 'Titulo',
timeText: 'Tempo',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
currentText: 'Atual',
closeText: 'Fechar'
});
});
No secret here.
The datepicker works fine when used for the first time. When I used a second time, the browser (any browser) hangs and offers me to stop script execution of jquery-1.6.4.min.js. To reproduce the error, I just reload the whole page.
What am I missing here?
Update
Adding code for the modal:
First, I configure that everything with class='modal' will have some basic parameters:
$('.modal').dialog({
resizable: false,
draggable: false,
modal: true,
position: 'center',
autoOpen: false
});
Then, I extend jQuery with some functions. One of them sets the buttons and submits:
$.extend({
modalPopup: function (modal) {
var $modal = $('#' + modal);
var $form = $modal.find('form').first();
$modal.dialog({
buttons: {
"OK": function (e) {
$.validator.unobtrusive.parse($form);
if ($form.valid()) {
$('.ui-dialog button:contains("OK")').button('disable');
$.post($form.attr('action'),
$form.serialize(),
function (data) {
$modal.dialog('close');
$('#maindiv').load(telaAtual);
});
}
},
"Cancelar": function () { $(this).dialog("close"); }
},
open: function () {
$modal.unbind('submit');
$modal.submit(function () {
$modal.parents('.ui-dialog').first().find('.ui-button').first().click();
return false;
});
$(this).find('.ui-dialog :input').first().blur();
}
})
.dialog('open');
}
})
UPDATE
I did some research and found that the problem is with DatePicker and Ajax. Everytime Maybe the Datepicker is "double called" everytime an ajax call is made. Something very similar to this question. But the Datepicker hangs even if I just close the dialog, meaning that the problem starts when the first ajax call is made.
Anyone can help me to fix this? Maybe returning false somewhere or destroying the datepicker before creating a new one.
UPDATE 01/12/2012
Sorry for the delay, guys and thanks for the help.
None of the solutions posted here worked. But, again, I thank you all for the help.
I found a boolean property $.datepicker.initialized that returns false on the first time I load the dialog, and returns true the second time. Now I can avoid the crash the second time. First problem solved.
But I still don't know how to "reinitialize" the datepicker so it can be shown when the textbox is clicked.
Still looking for a way to reinitialize it.
Also, changed the OK button code to this and works fine:
"OK": function (e) {
$.validator.unobtrusive.parse($form);
if ($form.valid()) {
$modal.parents('.ui-dialog').find('button:contains("OK")').button('disable');
$.post($form.attr('action'),
$form.serialize(),
function (data) {
if (submodal) {
carregaParcial(titulo, id);
}
else {
$('#maindiv').html(data);
}
removeModal($modal);
});
}
The $form.serialize() function already returns the html in the data variable, so, I just need to get its content and set as HTML of the maindiv.
Try this jquery datetimepicker function when submit the dialog or cancel the dialog.
$('.datepicker').datepicker("destroy");
You are using the "load" method incorrectly for your purposes. jQuery default behavior for load method when no selector is passed is to go to the URL specified, execute the JavaScript that exists on that page then load in the DOM into the jQuery object calling it.
If you pass a selector into your load method, the jQuery load method will not execute the script and will only load the dom in you jQuery object.
Change it to:
$('#maindiv').load(telaAtual + ' #maindiv > *')
This assumes your "telaAtual" URL has #maindiv on the page and then gets all of its children and loads them into "#maindiv" jQuery object.
We can go further and find out the particulars of the hanging but solving the load issue will be the first thing to consider. If it continues hanging it is worth further investigation.
Just a guess, not an answer:
Try to remove the dialog, not just close it.
...
$modal.dialog('close');
$modal.remove();
...
Maybe that helps?
BTW: With this you are clicking on the "OK" button by opening the dialog, don't you?
$modal.parents('.ui-dialog').first().find('.ui-button').first().click();
And then you load some content, so that happens when the dialog is opening?
$('#maindiv').load(telaAtual);
And if the telaAtual returns content which will open the dialog again, you are maybe stucked in an endless loop?
In this code the only very minor syntax issue might be the last unnecessary comma after the dayNamesMin. Shouldn't cause any hanging, but remove it and give it a try. Other than that this code looks fine, so the issue is somewhere else.
I've the same issue here, and in my case, that solution worked:
http://forum.jquery.com/topic/datepicker-in-modal-dialog-problem-with-populating-a-date-field
I just assign a random string to datepicker's input ID.