Conditionally receive user confirmation

[Peppi]

Hi,

I have a CheckboxList on my page. I keep track of which checkboxes have been changed from their original values. When the user clicks to save, and there are some checkboxes that are now unselected where before they were selected, I need to receive confirmation from the user as their changes will have serious consequences. How can I do this? I essentially need to call the Javascript 'confirm' function and receive a return value, but I need to do this conditionally and on-demand (e.g. not on page load etc.) How can I do this?

Thx.

 

[KDavie]

What version of the .NET framework are you using? If you are using 2.0 or later you can take advantage of the OnClientClick even of your save button. Below is an example of how I've achieved this in the past. Note that I am using the _doPostBack method in javascript to post the selected button back to the server. _doPostBack is not the most desirable option here... An Ajax call would probably be better..

Markup:

<asp:Button ID="btnComplete" runat="server" Text="Complete" OnClientClick="AreYouSure('Confirm', 'Are you sure you wish to mark this change item as complete?'); return false;" />

JavaScript:

function AreYouSureCancel()
        {
            var container = document.getElementById("loadContainer");
            var content = document.getElementById("divAreYouSure");
            if(content != null)
                container.removeChild(content);
        }
        
        function AreYouSureYes()
        {
            var target = "SetChangeItemComplete";
            var args = null;
            __doPostBack(target,args);
        }
        function AreYouSure(h, m)
        {
            var container = document.getElementById("loadContainer")
            var content = document.getElementById("divAreYouSure");
            if(content != null)
                container.removeChild(content);
            var confirm = document.createElement("div");
            var table = document.createElement("table");
            var tbody = document.createElement("tbody");
            var header = document.createElement("tr");
            var headerBody = document.createElement("td");
            var headerText = document.createElement("span");
            var content = document.createElement("tr");
            var imageBody = document.createElement("td");
            var imageSource = document.createElement("img");
            var message = document.createElement("td");
            var messageText = document.createElement("span"); 
            var footer = document.createElement("tr");
            var footerBody = document.createElement("td");
            var yes = document.createElement("input");
            var cancel = document.createElement("input");
            
            var screenHeight = document.body.offsetHeight;
            var screenWidth = document.body.offsetWidth;
            var left = (screenWidth - 200)/2;
            var top = (screenHeight - 50)/2;
            

            confirm.id = "divAreYouSure";
            confirm.style.border = "solid 1px #4C535C";
            confirm.style.width = "250px";
            confirm.style.height= "125px";
            confirm.style.backgroundColor= "#B7BEC8";     
            confirm.style.position = "absolute";
            confirm.style.left = left + "px";
            confirm.style.top = top + "px";
            confirm.style.zIndex = "100";            
            table.cellPadding = "0";
            table.cellSpacing = "0";
            table.style.width= "100%";  
            imageSource.src = "Images/Warning.gif";
            headerBody.style.height = "26px";
            headerBody.style.borderBottom = "solid 1px #4C535C";
            headerBody.style.backgroundImage =  "url('Images/GridHeader.gif')";
            headerBody.colSpan = "2";
            headerBody.style.padding = "4px";
            headerText.innerText = h;  
            messageText.innerText = m;              
            footerBody.colSpan = "2";
            footerBody.align = "right";
            
            yes.type = "button";
            yes.value = "Yes";
            yes.style.marginRight = "2px";
            yes.onclick = function(){AreYouSureYes();}
            cancel.type = "button";
            cancel.value = "Cancel";
            cancel.style.marginRight = "4px";
            cancel.onclick = function(){AreYouSureCancel();}
            footerBody.appendChild(yes);
            footerBody.appendChild(cancel);
            footer.appendChild(footerBody);
            message.appendChild(messageText);
            imageBody.appendChild(imageSource);
            content.appendChild(imageBody);
            content.appendChild(message);
            headerBody.appendChild(headerText);
            header.appendChild(headerBody);
            tbody.appendChild(header);
            tbody.appendChild(content);
            tbody.appendChild(footer);
            table.appendChild(tbody);
            confirm.appendChild(table);
            
            container.appendChild(confirm);
           
        }

Code-Behind:

if (passedTarget == "SetChangeItemComplete")
         {
           //Do Some Stuff
         }

Let me know if you have any questions