Topic: display Timepicker on Datepicker close
Hello,
I've got an issue. I'm having a modal and the content of this modal is displaying by an ajax call. In the content, I've got a datepicker and a timepicker. I want the timepicker to display when the user click on the "validate" button of the datepicker. It almost works !
The timepicker is displaying well on the click, I can change the time, but I can't close nor validate the timepicker. When I'm clicking, nothing is happening and I've no error in console. I can't reproduce the issue in a snippet, but here's a snippet of something I would like to do. My code is pretty the same instead I realize an ajax call to fill the modal with my inputs : https://mdbootstrap.com/snippets/standard/o1ivier/2573144
The JS is like there :
$(document).on('click', '.datepicker-ok-btn', function(){
console.log('oooo');
$('#mytimepicker').click();
});
How can I detect my error if my code is the same and if there's no error in console ? Why the timepicker buttons are not doing anything ?
Thanks a lot
I found the solution !
I was calling the jQuery $(document).on('click') function one time for each DateTimepicker I wanted to display. I had 2 DateTimepicker so the event was firing twice...
I just did some tricky things to made this thing work but anyway it's a pity that you don't include some DateTimepicker in your plugins. It would be very useful.
Thanks anyway for your help.
Best.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 4 years ago
I have no idea why is not working correctly with ajax calls. Can you show me your ajax requests?
O1ivier pro premium priority commented 4 years ago
This is my ajax request :
$.ajax({ type: 'POST', url: 'modal/edit.php', dataType: 'jsonp', cache: false, async: false, data : { id: info.id }, success: function(data) { $('#edit').html(data.content); var modal = new mdb.Modal(document.querySelector('#edit')); modal.show(); eval(data.js); document.querySelectorAll('.form-outline').forEach((formOutline) =>
{ new mdb.Input(formOutline).init(); }); } });
Also, the eval(data.js) is here to execute the script stored in my ajax call, this script is the one posted previously. Everything is working very well except the fact that I can't validate the timepicker (it displays but can't do nothing to validate) only when it's called by the Jquery .click() function...