1

I am using this time picker.

Problem is, when I navigate to another page while the time picker is shown, it will still be shown on the next screen when it loads. How do I destroy the timepicker?

Have tried the below but to no avail.

tp.timepicker('destroy');
tp.timepicker('remove');
tp = null;
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
chongzixin
  • 1,951
  • 4
  • 28
  • 55

2 Answers2

2

Here is the working JSFIDDLE HTML:

<input type="text" style="width: 70px;" id="timepicker" value="" />
<input type="button" value="Destroy it !" id="destroy">

JS:

$(document).ready(function(){
    $('#timepicker').timepicker();
    $('#destroy').click(function(){
       $('#timepicker').timepicker('destroy'); 
       $('#timepicker').timepicker('hide');
    });
});
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • How can I see that the timepicker is actually destroyed? clicking the input field or the button didnt show anything. – chongzixin Jun 23 '14 at 11:44
  • First click on the input field, you would be able to see the timepicker. After that click on the button to destroy it. Then after again click on the input field. This tim you would not be able to see the timepicker as it is destroyed. – Rahul Gupta Jun 23 '14 at 11:47
  • clicking the input field doesnt show the time picker on my end. – chongzixin Jun 23 '14 at 11:48
  • Clicking means shift your focus to type something in the input box – Rahul Gupta Jun 23 '14 at 11:50
  • looking at my console it is returning a 403 Forbidden while trying to access the CSS and JS files. – chongzixin Jun 23 '14 at 11:51
  • Which one are those ? Can you please give me names of those files so that I can update it ? – Rahul Gupta Jun 23 '14 at 11:52
  • only timepicker.js is giving `Refused to execute script from 'https://raw.githubusercontent.com/fgelinas/timepicker/master/jquery.ui.timepicker.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.`. the rest are `403 Forbidden`. – chongzixin Jun 23 '14 at 11:56
  • actually, I did try doing `tp.timepicker('destroy');` but that didnt work for me. – chongzixin Jun 23 '14 at 11:57
  • It should be the id of your timepicker input field, refer my code for analogy ! Try to understand my code and implement that into your code. It would certainly work ! – Rahul Gupta Jun 23 '14 at 12:00
  • If you are still unable to get it working initialize a chat between both of us. We will chat and I shall try to help you out. – Rahul Gupta Jun 23 '14 at 12:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56107/discussion-between-user1258600-and-rahul-gupta). – chongzixin Jun 23 '14 at 12:11
1

It is not well documented, but there is a destroy method : 

$($elem).timepicker('destroy');

Calling the destroy method should unbind events from the input and remove most of what was instatiated for the timepicker.

Francois Gelinas
  • 611
  • 6
  • 5
  • thanks for replying to my problem. your time picker is great btw. my main issue apparently is that the timepicker was still displayed even after I destroyed it. so I called hide on it as well after destroying. – chongzixin Jun 30 '14 at 03:19