多个jquery或javascript和datepicker无法正常工作

Question

I am working on a web application in which I need multiple popups/warning message in multiple cases. These are three scenario's in which I need warning messages or popups.

1. A pop-up should be displayed when a user navigates to a different tab inside the application
2. A pop-up should be displayed when a user closes the tab or the browser window
3. When a user navigates to some other tab in the browser or when the user minimizes the browser, a warning message will be shown at the nth minute and user will be automatically taken to the application tab with a popup confirming the session timeout

I am using the below code to do all this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="idle_timer.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script language="JavaScript">
$.noConflict();
$(".header v, .drop v").click(function(){
       window.onbeforeunload = null;
       return confirm("Are you sure you want to leave this page?");
});

</script>

<script language="javascript" type="text/javascript">          
$.noConflict();
$(window).on('mouseover', (function () {
           window.onbeforeunload = null;
       }));
       $(window).on('mouseout', (function () {
           window.onbeforeunload = ConfirmLeave;
       }));
       function ConfirmLeave() {
           return "";
       }
       var prevKey="";
       $(document).keydown(function (e) {       
                     if(window.onbeforeunload != null)
                           {
           if (e.key=="F5") {
               window.onbeforeunload = ConfirmLeave;
           }
           else if (e.key.toUpperCase() == "W" &amp; prevKey == "CONTROL") {
              if(y!=1)
               window.onbeforeunload = ConfirmLeave;   
           }
           else if (e.key.toUpperCase() == "R" &amp; prevKey == "CONTROL") {
               window.onbeforeunload = ConfirmLeave;
           }
           else if (e.key.toUpperCase() == "F4" &amp; (prevKey == "ALT" || prevKey == "CONTROL")) {
               window.onbeforeunload = ConfirmLeave;
           }
           prevKey = e.key.toUpperCase();
                           }
       });</script>

<script>
$.noConflict();
var IDLE_TIMEOUT = 10; //seconds
var _localStorageKey = 'global_countdown_last_reset_timestamp';
var _idleSecondsTimer = null;
var _lastResetTimeStamp = (new Date()).getTime();
var _localStorage = null;
var url      = window.location.href;
AttachEvent(document, 'click', ResetTime);
AttachEvent(document, 'mousemove', ResetTime);
AttachEvent(document, 'keypress', ResetTime);
AttachEvent(window, 'load', ResetTime);

try {
    _localStorage = window.localStorage;
}
catch (ex) {
}

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function GetLastResetTimeStamp() {
    var lastResetTimeStamp = 0;
    if (_localStorage) {
        lastResetTimeStamp = parseInt(_localStorage[_localStorageKey], 10);
        if (isNaN(lastResetTimeStamp) || lastResetTimeStamp &lt; 0)
            lastResetTimeStamp = (new Date()).getTime();
    } else {
        lastResetTimeStamp = _lastResetTimeStamp;
    }

    return lastResetTimeStamp;
}

function SetLastResetTimeStamp(timeStamp) {
    if (_localStorage) {
        _localStorage[_localStorageKey] = timeStamp;
    } else {
        _lastResetTimeStamp = timeStamp;
    }
}

function ResetTime() {
    SetLastResetTimeStamp((new Date()).getTime());
}

function AttachEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
        return true;
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, eventHandler);
        return true;
    } else {
        //nothing to do, browser too old or non standard anyway
        return false;
    }
}

function WriteProgress(msg) {
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
         oPanel.innerHTML = msg;
    else if (console)
        console.log(msg);
}

function CheckIdleTime() {
    var currentTimeStamp = (new Date()).getTime();
    var lastResetTimeStamp = GetLastResetTimeStamp();
    var secondsDiff = Math.floor((currentTimeStamp - lastResetTimeStamp) / 1000);
    if (secondsDiff &lt; 1) {
        ResetTime();
        secondsDiff = 0;
    }
    WriteProgress((IDLE_TIMEOUT - secondsDiff) + "");
    if (secondsDiff &gt; IDLE_TIMEOUT-6) {
//             window.clearInterval(_idleSecondsTimer);
        var r=alert("Your session expires in 5 minutes \nPlease click \'OK\' to extend your session");

        if (r==true)
              {document.location.href = window.location.href;}

        ResetTime();
        //document.location.href = "logout.html";
    }
}
</script>

All these pop=ups are working fine but the problem is that I am using datepicker.js on the same page and if I use these scripts, I am not able to use datepicker or datewidget. Earlier, the datepicker was behaving perfectly. I don't why these scripts are causing problem. Is there any other script I can use or any other datepicker which will work fine with these scripts?

Answer 1

What i can see you don't have included a jquery ui library but another version of jquery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>

i guess you need this add libraries before your custom code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>

<script src="idle_timer.js" type="text/javascript"></script>

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="idle_timer.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

can you try replacing the above code as below,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="idle_timer.js" type="text/javascript"></script>