Timepicker is not working when I open modal pop up second time #62

Open
ShriwasAshwin007 opened this Issue Nov 21, 2014 · 1 comment

Projects

None yet

1 participant

@ShriwasAshwin007

Issue: I have MVC webgrid in that I have one link on click of that I open one Modal Pop using below code
$(".openPlanScreenDialog").live("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
$('

')
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.effect("slide", {}, 2000)
.dialog({
title: $(this).attr("data-dialog-title"),
modal: true,
height: 950,
width: 1100,
center: 0,
hide: {
effect: "explode",
duration: 1000
},
close: function (event, ui) {
$(this).empty();
$(this).dialog("destroy");
}
})
.load(this.href);
});

First time when modal pop up open the timepicker plugin works fine and show the times. After that I close my modal popup and re-open the modal popup timepicker plugin is not working i.e. it does not show me the times in textbox when i click.

After analyzing I came to conclusion somehow the plugin is not getting destroyed or re-initialized to its initial stage. I tried below things on document ready function of jquery but still no luck :

$('#StartTime').timepicker('destroy');
$(document).ready(function(){
$('input.timepicker').timepicker({});
});

When I inspect the element second time I get below error message in console:

Uncaught TypeError: Cannot read property 'children' of undefined
$.TimePicker.open
$.extend.open
(anonymous function)
c.event.handle
h.handle.o

Below is the image:
image

Below is the Timepicker Jquery code which I am using in my partial view:

<script type="text/javascript"> $(document).ready(function () { jQuery(function ($) { $('#StartTime').timepicker({ scrollbar: true, change: function (time) { setTimeout(function () { var startdate = $("#StartDate").datepicker('getDate'); startdate.setHours(time.getHours()); startdate.setMinutes(time.getMinutes()); $("#StartDate").datepicker("option", "minDate", startdate) var endtime = $('#EndTime'), instance = endtime.timepicker(); instance.setTime(time); // select (as in highlight) next time entry after time instance.next(); // set this field time to the time entry highlighted in the previous step instance.setTime(instance.selected().text()); // focus on the #endtime field to allow user to adjust the selected time, // by typing another time entriy or selecting a new one with the UP and DOWN // keys. endtime.focus(); }, 10); } }); }); jQuery(function ($) { $('#EndTime').timepicker({ scrollbar: true, change: function (time) { var endtime = $('#StartTime'), instance = endtime.timepicker(); var startdate = $("#StartDate").datepicker('getDate'); if ((time - instance.getTime()) < 0) { var enddate = $("#EndDate").datepicker('getDate'); enddate.setHours(time.getHours()); enddate.setMinutes(time.getMinutes()); enddate.setDate(enddate.getDate() + 1); $("#EndDate").datepicker("setDate", enddate); } else { $("#EndDate").datepicker("setDate", startdate); } } }); }); }); </script>

Note : #StartDate and #EndDate are two text boxes in my HTML form

@ShriwasAshwin007

In jquery.timepicker.js line number 394

widget.viewport.children().detach();

Here it is giving error below error:

Uncaught TypeError: Cannot read property 'children' of undefined
$.TimePicker.open
$.extend.open
(anonymous function)
c.event.handle
h.handle.o

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment