javascript - jQuery UI datepicker within jquery-confirm dialog -
i'm using jquery-confirm script link below. has capability include form field within dialog box. can see clicking on "act prompt" blue button @ link below.
i've got form (a single field) set up, want input datepicker, , don't know should put javascript make happen since form doesn't exist until dialog generated.
https://craftpip.github.io/jquery-confirm/
my dialog javascript:
$('.deal_edit').on('click', function () { var id = $(this).attr('data-id'); $.confirm({ title: 'change end date', content: 'url:form.txt', confirm: function () { var input = this.$b.find('input#new_end_date').val(); var errortext = this.$b.find('.text-danger'); if (input.val() == '') { errortext.show(); return false; } else { var data = {action: 'edit_deal', id: id, new_date: new_date}; $.post('ajax.php', data, function(response) { $.alert({ title: "updated", content: "ok, record has been updated - page reload.", confirm: function() { location.reload(); } }); }); } } }); return false; });
contents of form.txt:
<p>the editable field 'deal end date'. (this may change soon)</p> <div class="form-group"> <label>new end date</label> <input autofocus type="text" id="new_end_date" name="new_end_date" class="form-control"> </div> <p class="text-danger" style="display:none">please enter end date, or click 'close'.</p>
thank you!!!
i had same issue, how fix it.
you need add events onopen , onclose confirm dialog add
$.confirm({ onopen: function(){ $( ".datepicker" ).datepicker(); }, onclose: function(){ $(".datepicker").datepicker("destroy"); }, title: 'change end date', content: 'url:form.txt', confirm: function () { var input = this.$b.find('input#new_end_date').val(); var errortext = this.$b.find('.text-danger'); if (input.val() == '') { errortext.show(); return false; } else { var data = {action: 'edit_deal', id: id, new_date: new_date}; $.post('ajax.php', data, function(response) { $.alert({ title: "updated", content: "ok, record has been updated - page reload.", confirm: function() { location.reload(); } }); }); } } });
Comments
Post a Comment