Background: I'm displaying a list on a website. Each row in the list has an edit button that opens a Materialize CSS modal. Inside the modal is an HTML form that pulls the current values from that specific row in the list, which can be edited with new values.
Issue: Once the edits in the modal form are submitted, the modal will retain the values of that specific row, even when selecting a different row. This does not happen when the modal form is not submitted.
Temporary Solution: I reload the entire page when the modal is submitted. This way the modal contents are also refreshed, but the user experience suffers since the user needs to always wait for the page to reload.
Question: Is there a way to reload or refresh the contents of the modal or the modal form without reloading the whole webpage? Ideally, the modal would refresh and load the correct values for each row after submitting an edit. I am open to other ideas/solutions.
Code:
auth.onAuthStateChanged(user => {
if (user) {
const editForm = document.querySelector('#edit-form');
editForm.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('users').doc(user.uid).collection('items').doc(editForm.itemID.value).collection('transactions').doc(editForm.transactionID.value).update({
amount_edit: (parseFloat(editForm.amountEdit.value)*-1).toFixed(2),
name_edit: editForm.nameEdit.value,
}).then(() => {
// close the edit-modal
const modaledit = document.querySelector('#modal-edit');
M.Modal.getInstance(modaledit).close();
editForm.reset();
location.reload()
}).catch(err => {
console.log(err.message);
});
})
} else {
}
});
A bit late to the party. You could reset and then dispatch a focus event for each field.
editForm.reset()
editForm.querySelectorAll(`[name]`).forEach(i => i.dispatchEvent(new Event('focus')));
Related
I am working in a project where I show some modals under certain conditions, after some work I realized that if I try to refresh the page while a modal is showing up, the modal vanishes.
I would like to know if there is a method that would let me render the modal when refreshing the page.
I tried this java script code:
// Get the modal
var modalBtn = document.getElementById("modalBtn");
// // Get the button that opens the modal
// var buttonModal = document.getElementById("buttonModal");
window.onbeforeunload = function (evt) {
buttonModal.click();
console.log("refresh")
}
// //hold modal
buttonModal.addEventListener('click', () => {
// //show error modal
$("#modal_error").modal()
})
In the case I click on buttonModal, I can see the modal, but when I refresh it vanishes.
If I refresh the page I can see the modal for an short period of time, but it does not hold itself.
would there be a way that let me hold the modal, if its being display, inclusive after refreshing?
Luis
I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});
I have the standard tabs setup using Bootstrap 3. Each tab is a form into which the user inputs information. Now there is a save button at the bottom of each form which will save the information in the current tab, but what I'm looking to do is enable the user to click a different tab at the top of the page, and be given a warning of
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
with an OK or Cancel button. If they click OK then they go to the tab they clicked, and if they hit cancel, they stay on the current tab. Anybody any idea how I can do this? I've been trying to get this all day, but with no luck. Should I even be using Bootstrap tabs or would it be easier to build my own tabs functionality instead of over-riding bootstrap's tabs?
Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})
You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
https://api.jquery.com/click/
http://bootboxjs.com/examples.html
I followed this tutorial to dynamically auto populate a form created with contact form 7.
To auto fill the form I am making use of the plugin Contact Form 7 Dynamic Text Extension.
First I appended the following function to the function.php
// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
$qvars[] = 'chalet';
return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );
function echo_chalet() {
global $wp_query;
if (isset($wp_query->query_vars['chalet']))
{
print $wp_query->query_vars['chalet'];
}
}
The contact 7 form has a dynamic field for the subject:
[dynamictext enquiry-chalet "CF7_GET key='chalet'"]
With this I can for example use the same form with different subjects, which are automatically filled in depending on which link was clicked.
The link only has to contain a query for chalet.
www.mysitexyz.com/link/to/page/with/form.php?chalet=request
www.mysitexyz.com/link/to/page/with/form.php?chalet=cancellation
The form's subject is filled with "request" or "cancellation".
This works fine.
Now I want to auto populate a form on the same page as the link.
The link contains an anchor now:
www.mysitexyz.com/link/to/page/with/form.php?chalet=chaletname#myFormDownHere
Clicking the link, the page is scrolled down to the anchor. My wordpress theme smoothly scrolls down. But the field is not auto filled. Clicking the page with the browsers function to open in new tab works. Then the page is scrolled down to the anchor and the form field is correctly filled in. But this is not what people normally do.
How can I achieve the same result with a normal click on the link?
With jQuery you can do this way:
Click here
and then
$('.chalet-choser').on('click', function(e) {
e.preventDefault();
$('input[name="enquiry-chalet"]').val( $(this).data('chalet') );
return false;
})
I have a gridview displayed in a page which also has a link. When I click on the link, a showModalDialog() will open up where I can edit the value.
After that when pressing Update button the value is getting updated in the database and my child form closes perfectly.
But I need to update my parent page table as well. So that the new value gets reflected in the parent form. I tried the following in the child window.
<body onunload="window.opener.document.forms[0].submit();">
But that is not working. Suggest me a good solution.
You do not have onUnload in a modal dialog
var res = showModalDialog(...); // execution is blocked until modal is closed
if (res) location.reload(1); // res contains what dialog set returnValue to
and in modal dialog you do
window.returnValue=true; // if ok submission
window.close(); // will return control to opening window
Anyway, did you look to the right? there are many duplicate questions about gridviews and modal dialogues
I guess you have a function on Update button click, which updates the database and close the form, can you place that code (the one that you have in unload) in that function before closing the window