I have a modal popup above a Jquery datatable .I need to add an item to table using the modal text fields.
I use "enter key" key down event to add item to grid; I don't want to dismiss modal after "enter keydown".Every time a item added to datatable by pressing enter on textfield.
Problem here is after I use
window.location.reload(true);
to refresh grid - the modal pop up dismisses. I need modal closed only after the "OK" is clicked. How to reload background grid without dismissing modal popup?
success: function (data) {
if (data == 'Updated') {
window.location.reload(true);
}
}
You should not be reloading your page at all. On your success event append the row to datatable dynamically.
If you would like to see how, please put your tables html here so we can help you with that too.
Related
Okay so I use bootstrap 4, and I have two different modal types in a single page. I use Ajax to fill up the body of these modals. Both of these forms that each modal opens are different from each other but they have certain ID tags that are similar.
This is how I fire up my modals.
$('#modalForm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
ajaxLoad(button.data('href'), 'modal_content');
});
$('#modalFormLG').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
ajaxLoad(button.data('href'), 'modal_content_lg');
});
The problem is when I open one modal, and then when I open the second one, I get the following error in the browser console.
[DOM] Found 2 elements with non-unique id #cashpaid: (More info: goo...)
However, I don't have any duplicates of IDs, it's just so that cashpaid ID is being used in both of those forms that each of these modals calls up into its body.
If I refresh the page and open the modal again, then I don't see this problem.
I have tried the following but it didn't have any effect on it
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).removeData("bs.modal");
});
When I run the following two, then my modals becomes unresponsive for future use because they essentially delete that particular html data.
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).empty();
});
AND
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).remove();
});
After opening and submitting the first modal, in the browser console when I type, "cashpaid" for example, I see the following.
<input type="number" id="cashpaid" name="cashpaid" min="0">
However, when I open the second modal and submit that form and when I type "cashpaid" in the browser console, I see the following.
HTMLCollection(2) [input#cashpaid.valid, input#cashpaid, cashpaid: input#cashpaid.valid]
So is there any method for bootstrap 4 modals to purge the remote url form's data when it closes down?
Any help would be greatly appreciated. Thanks in advance.
$(document).on('hidden.bs.modal', '#modalForm', function (event) {
$('.modal-body', this).empty();
});
...will remove all child elements of #modalForm .modal-body after the closing modal animation ends.
Note 1: you only need to bind this once, not every time you open the modal.
Note 2: If you want this functionality on every modal (not only #modalForm), replace #modalForm with .modal. But keep in mind you can only do this with modals that get their contents generated upon reopening. A static modal will remain empty when reopened.
UPDATED
I need some fresh eyes on my problem. I have done a lot of research and have tried everything I can think of, but for some reason I simply cannot get my modals to behave in the way I want them to.
My issue:
After opening modal one (which has a Google map and Google auto complete address field), I trigger via a button click the close of modal one, and opening modal two. But modal two does not open, or you only see the modal-backdrop.
My code:
(1) The first modal is opened via this click event:
<a class="shop-btn" id="5G router-32" (click)="startFivegJourney()">buy</a>
(2) The click event fires this method which opens the #five-g-product-modal. The reason for the additional shown.bs.modal code is simply for setting the z-index of the modal, making sure that the Google autocomplete address field does not display behind the opened modal.
startFivegJourney() {
if (this.cartService.simsInCart.length > 0) {
$('#modal-clear-cart').modal('show');
} else {
$('#five-g-product-modal').modal('show');
$('#five-g-product-modal').on('shown.bs.modal', () => {
$('.pac-container').css('z-index', $('#five-g-product-modal').css('z-index'));
});
}
}
(3) A button click event fired from modal one that is now open, triggers the method below, which hides modal one.
checkFiveGCoverage() {
$('#five-g-product-modal').modal('hide');
$('#five-g-product-modal').on('hidden.bs.modal', () => {
$('#five-g-coverage-modal').modal('show');
this.openModal();
});
}
(4) After modal one has completely closed, a simple method is called to open the new modal:
openModal() {
$('#five-g-coverage-modal').modal('show');
}
I have tried various ways of opening the modal (the modal does open on top of the first modal if I do not close the first modal), but it is as if it does not fire, or opens the modal-backdrop only. Thank you in advance!
I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?
You can not prevent user clicking the refresh button.
Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.
If so, just show the modal again. There's no any other way.
//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
localStorage.setItem("IS_SET", true);
});
$("#modal-dialog").on("hidden.bs.modal", function(){
localStorage.setItem("IS_SET", false);
});
$(document).ready(function(){
if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
//Which means the user was in the form process.
//And show the modal again on page refresh.
$("#modal-dialog").modal("show");
}
});
If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.
I have been developing form which has resize and crop got tutorial here in modal bootstrap all working fine, but I need to remove old images in modal bootstrap after successful uploads. I use jQuery to remove them, but nothing happened
Here is my JS:
success: function(data) {
$('#forminfo').trigger("reset"); //reset form
$('#myModalinformation').find('form')[0].reset();
}
The form still keep old images so after debug and think all command in above is remove all input type, textarea, radio button and checkbox so i debug by inspect elemen so i got this
here is my inspect elemen
Then here is my modal
Thanks for some help so i can solved by digging issue in github
success: function(data) {
$('#forminfo').trigger("reset"); //reset form
$('#myModalinformation').find('form')[0].reset();
$('.cropit-image-preview').css('background-image', ''); //remove preview-images
$('.cropit-image-background').removeAttr('src'); //remove background images
}
I have a filter function implemented on "panel" in jQuery Mobile:
I call filter by clicking on any button, the panel slides from left and there are filter options to set up current filter.
If multiple select box contains a lot of options, it shows on a black background covering the whole page and it closes the panel.
I need to reopen the panel with filter after this dialog of multi-select is closed...
I am using this:
$('#filter select').bind('change',function(){
$('#filter').panel('open');
});
This is OK if the user does any change in opened dialog (select)...
But what if he just closes this dialog using the X-button without any change? Dialog disappears, but panel is not reopened.
Thank you very much for any help.
jQuery Mobile custom selectmenu are either converted into popup or a dialog depending on screen size and options length.
When the selectmenu is dialog, it navigates to a new dialog-page. In that case, you can listen to pagecontainer events to retrieve previous prevPage and next page toPage.
If previous page is a dialog/selectmenu, open panel in next page.
$(document).on("pagecontainershow", function (e, data) {
var previousPage = data.prevPage,
nextPage = data.toPage;
if (previousPage.hasClass("ui-selectmenu")) { /* or ui-dialog */
$(".ui-panel", nextPage).panel("open");
}
});
Demo