Javascript / JQuery pop-up message question

AeonBlue

System: Visual Studio 2010 .Net 4.0 JQuery 1.4.2 I will start this off with a caveat that I am by no-means a javascript guy and am pretty new to JQuery. I'm writing a page that has a several-step process to scheduling an appointment. We are accomplishing this using a multi-view control to navigate through the several step process. Like any good user-friendly site, I have set up a pop-up message in javascript that alerts the user if they try to navigate away from the page or refresh the page, close their browser, etc. before they finish scheduling their appointment that they will lose any unsaved data (much like the person who posted just before myself). To get around the navigation buttons for the multiview triggering the onbeforeunload event, I use the following, triggered by the onClientClick event of the buttons:

LinkBit = true;

window.onbeforeunload = function () {

    if (LinkBit) {
        return "Leaving this page will cause all unsaved data to be lost";
    }

    LinkBit = true;
}

function TurnOffMessage() {
    LinkBit = false;
}

The next problem we ran into is that one of our controls within the multiview, an ASP:Calendar was triggering the onbeforeunload event, causing the popup to occur when the user was trying to select a date. To get around this we used the following JQuery within the control with the calendar wrapped in a div tag with the ID of "calendar":

This solution is dangerously close to solving my problem. My issue that I'm coming to you all for help is that the above JQuery does not affect the month navigation on the calendar control so the popup still pops-up when the user tries to change which month they're viewing. If I use the above on the main page and wrap the control in the same div it ends up killing all pop-up functionality. I appreciate any help you all can provide.

"The shortest distance between two points is under construction" -Noelie Altito

Not Active

The first question would be is $("#calendar a") finding the elements and applying the click event?

No comment

Dennis E White

AeonBlue wrote:

<script type="text/jscript"> $("#calendar a").bind('click', function () { TurnOffMessage(); return true; }); </script>

I am guessing that the above code is located in the head of your html document. The bind won't work because the document (html) has not been loaded yet. Simple solution - move your javascript code down towards the end of the file. In general I place jQuery script right before the closing of the body tag. while it is permitted to put javascript in the head of your document best practices generally dictate that you place code for working with the document at the end prior to closing the body. this will assure that "most" everything is currently in the document. the exception being any html generated code from jQuery (plugins, etc.).

as if the facebook, twitter and message boards weren't enough - blogged

AeonBlue

Thanks, that was indeed a very good guess. I did, however, notice my error shortly after posting this and moved it to the bottom of the main page and achieved the same results as I had before: Clicking the days doesn't affect the pop-up but clicking the months does.

"The shortest distance between two points is under construction" -Noelie Altito

Dennis E White

the reason being is because the asp:Calendar is a server rendered control. so changing the month causes the need for the control to be re-rendered. personally I have never been a big fan for many of the asp controls. since you are using jQuery might I recommend you use a jQuery plugin and just eliminate the need for a server rendered control?? here is one that I use - http://trentrichardson.com/[^]

as if the facebook, twitter and message boards weren't enough - blogged