Solution and bug fix for Maximumcallstacksizeexceeded caused by timepicker. js twice

Most people may have used it. In the jqueryui component, there is a datepicker which is used to receive the date entered by the user. The disadvantage of this control is that the time and minute cannot be selected, for example, the input time, minute, and second required by the project is a bit regrettable. But fortunately there is... syntaxHighlighter. all (); may have been used by most people. In the jquery ui component, there is a datepicker that is used to receive the date entered by the user. The disadvantage of this control is that the time, minute, and second cannot be selected, for example, the input time, minute, and second required by the project is a bit regrettable. Fortunately, the following plug-in emerged, namely timepicker, which specifically targets this weakness of datepicker and adds the function of selecting time, minute, and second, as follows, you can enter a date with time, minute, and second. The question is: If you use timepicker twice or more times on the same page, an error is returned: Maximum call stack size exceeded. Meanwhile, the browser is stuck. The error is caused by memory overflow. That is to say, the browser is stuck because of the recursion or endless loop caused by inappropriate code. This is a fatal flaw. For example, if I have two pages on which I need to enter the date and time, wouldn't I have to watch my browser become stuck? So I made up my mind to find this problem. I decided to read the source code of timepicker in order to understand in principle where recursive or endless loops occur. (Fortunately, the source code is not complex, the amount of code is not large, and the variable naming rules )~ You can see the problem without looking at a few lines. The source code starts from line 1 and overwrites the datepicker function. The typical code is as follows: [javascript] $. datepicker. _ connectDatepickerOverride = $. datepicker. _ connectDatepicker; $. datepicker. _ connectDatepicker = function (target, inst) {$. datepicker. _ connectDatepickerOverride (target, inst); you can see that the author first saves the connectDatepicker of datepicker and then redefined this function. In the first sentence of redefinition, run the saved original function again. The problem is here. This $. datepicker. _ connectDatepicker is a global variable. During the first rewrite, the original function is executed first, that is, after the plug-in is called once, $. datepicker. _ connectDatepicker is not the original $. datepicker. _ connectDatepicker has been rewritten. The $. datepicker. _ connectDatepicker has changed, then the function is rewritten, and the changed $. datepicker. _ connectDatepicker: If you run it again, the problem occurs. If you understand the cause, the solution will naturally be: If you have redefined $. datepicker. _ connectDatepicker, don't let him rewrite it again. Add the judgment statement. After modification: [javascript] if (! $. Datepicker. _ connectDatepickerOverride) {$. datepicker. _ connectDatepickerOverride = $. datepicker. _ connectDatepicker; $. datepicker. _ connectDatepicker = function (target, inst) {$. datepicker. _ connectDatepickerOverride (target, inst); both $. datepicker. whether the _ connectDatepickerOverride already exists. If not, rewrite the function. Serious reminder: there are a series of rewriting operations under this function, and the same judgment should be made !!! After modification, run the code to make the world better ~ ----------------------------------------------------------------------- In addition, I found two bugs when using timepicker, which are also proposed here for your reference. First: the z-index problem in the pop-up layer of timepicker. The z-index of the datepicker pop-up layer of jquery ui is calculated dynamically, because the values displayed each time are different. The value of timepicker is fixed and not calculated with datepicker. In this way, when other layers are displayed on the page, the timepicker layer is blocked and is not at the same height as datepicker. (This can happen very often. Unfortunately, I met it --!) The solution is also very simple. In the resize () function of timepicker, add the code about z-index. The modified code is as follows: [javascript] this.tpDiv.css ({'height': dpDiv. height (), 'top': dpDivPos. top, 'left': dpDivPos. left + dpDiv. outerWidth () + 'px ', 'z-Index': dpDiv.css ('z-Index')}); Make sure that its z-index is consistent with that of datepicker. The second is the case where one page is used multiple times. In the _ generateHtml () function of timepicker, the following sentence is provided: [javascript] $ ('body '). append (this. tpDiv); that is, place the spliced html code on the page. The author has some omissions here. No detection has been done before append. If there is a timepicker displayed on the page, and then append one, there will be two. The previous one is hidden and invisible, but when you set the value, your jquery selector selects two timepickers for you. (If three times are used on the page, there are three ...), Take a picture that has been used twice: we can see that there are two repeated times in the hour, minute, and second (it should be 12:32:00). So we should also judge whether there is a timepicker on the page. The modified code is as follows: [javascript] if ($ ('#' + this. _ mainDivId ). length = 0) {$ ('body '). append (this. tpDiv );}--------------------------------------------------