为什么此JavaScript不显示确认框？

Question

I am trying to fix some bugs in a product I inherited, and I have this snippet of javascript that is supposed to hilight a couple of boxes and pop up a confirm box. What currently happens is I see the boxes change color and there is a 5 or so second delay, then it's as if the missing confirm just accepts itself. Does anyone smarter than I see anything amiss in this code?

function lastCheckInv() {

    document.getElementById("ctl00$ContentPlaceHolderMain$INDet$txtInvNumber").style.background = "yellow";
    document.getElementById("ctl00$ContentPlaceHolderMain$INDet$txtInvNumber").focus();
    document.getElementById("ctl00_ContentPlaceHolderMain_INDet_AddCharges").style.background = "yellow";
    document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow";
    bRetVal = confirm("Are you sure the information associated with this invoice is correct?");

    return bRetVal;

}

Answer 1

The only thing I can think of is if one of the lines before the confirm is throwing an exception and you're never actually getting to the confirm.

If you're using IE, make sure script debugging is enabled. If you're using Firefox, install the Firebug add-on and enable it for your website.

Or, for very primitive debugging, just put alerts after each statement and figure out where it's bombing.

Answer 2

You should use the following method to reference your controls from JavaScript:

document.getElementById(<%= txtInvNumber.ClientID %>).style.background = "yellow"

If that doesn't help, try setting a breakpoint in your JavaScript and stepping through it to see where it's failing.

Answer 3

This test script ran fine for me in IE, Firefox, and Opera. So there doesn't seem to be anything wrong with your basic syntax. The problem is either in the ID's (which doesn't fit with the fact that it acts as if confirmed after 5 seconds) or in some other conflicting JavaScript on the page. It will be difficult to help you without seeing more of the page.

<script language="javascript">
function lastCheckInv() {

    document.getElementById("test1").style.background = "yellow";
    document.getElementById("test1").focus();
    document.getElementById("test2").style.background = "yellow";
    document.getElementById("test3").style.background = "yellow";
    bRetVal = confirm("Are you sure?");

    return bRetVal;

}
</script>

<form method="get" onsubmit="return lastCheckInv();">
    <input id="test1" name="test1" value="Hello">
    <input id="test2" name="test2" value="Hi">
    <input id="test3" name="test3" value="Bye">
    <input type="submit" name="Save" value="Save">
</form>

Answer 4

A few thoughts: Could be the .focus() call is hiding your confirm behind the page? Or could it be that one of your control id's is not correct causing, the .style.background references to fail?

1. You should set the focus after showing the confirm box, otherwise the confirm box will grab focus away, making that line meaningless.
2. Don't hard-code ASP.Net id's like that. While they typically are consistent, a future version of ASP.net won't guarantee the same scheme, meaning your setting yourself up for pain when it comes time to update this code at some point in the future. Use the server-side .ClientID property for the controls to write those values into the javascript somewhere as variables that you can reference.

Update:
Based on your comment to another response, this code will result in a postback if the function returns true. In that case, there's not point in running the .focus() line at all unless you are going to return false.

Answer 5

I do not like accesing objects directly by

document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow"; 

If the object is not returned JavaScript will error out. I prefer the method of

var obj = document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight");

if(obj)
{
    obj.style.background = "yellow";
}

My guess is you are trying to access an object that is not on the DOM, so it never gets to the confirm call.

Answer 6

It might be worth checking that the elements actually exist. Also,try delaying the focus until after the confirm():

function lastCheckInv() {

    var myObjs,bRetVal;

    myObjs=[
        "ctl00_ContentPlaceHolderMain_INDet_AddCharges",
        "ctl00_ContentPlaceHolderMain_INDet_lblFreight",
        "ctl00$ContentPlaceHolderMain$INDet$txtInvNumber"
    ];


    bRetVal = confirm("Are you sure the information associated with this invoice is correct?");

    for (var i=0, j=myObjs.length, myElement; i<j; i++){

        myElement=document.getElementById(myObjs[i]);

        if (!myElement){
        // this element is missing
        continue;
        }

        else {

        // apply colour
        myElement.style.background = "yellow";

       // focus the last object in the array

            if (i == (j-1) ){
            myObj.focus();
            }


        }

    }


    return bRetVal;

}

Answer 7

Is bRetVal actually declared anywhere?

If not, " var bRetVal = confirm ...." is a friendly way of telling jscript that it is a variable.

Answer 8

function lastCheckInv()

{    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_txtInvNumber").style.background = "yellow";    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_txtInvNumber").focus();    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_AddCharges").style.background = "yellow";    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow";    
   return confirm("Are you sure the information associated with this invoice is correct?");    
}

The first two lines in your function are wrong, $ are in the UniqueID of an ASP.Net Control.

On Clientside you have to use the ClientID, replace $ with _ .

If you are sure that the Controls exists, the code above might work.