Javascript issue in RadWindow

[DogBizPro]

We have recently updated all of our poups to RadWindows. We have a JavaScript file that parses phone number as they are entered and adds the dashes, etc. This worked fine in the ModalPopupExtender we were using and it still works fine on the pages that are not RadWindows. It also works fine on the RadWindow in IE and Chrome, but not in FireFox. I cannot for the life of me figure out why it does not work on the RadWindows only in FireFox. Any Ideas?

Here is the JS code:

var zChar = new Array(' ', '(', ')', '-', '.');
var maxphonelength = 12;
var phonevalue1;
var phonevalue2;
var cursorposition;

function ParseForNumber1(object) {
    phonevalue1 = ParseChar(object.value, zChar);
}
function ParseForNumber2(object) {
    phonevalue2 = ParseChar(object.value, zChar);
}

function backspacerUP(object, e) {
    if (e) {
        e = e
    }
    else {
        e = window.event
    }
    if (e.which) {
        var keycode = e.which
    }
    else {
        var keycode = e.keyCode
    }

    ParseForNumber1(object)

    if (keycode >= 48) {
        ValidatePhone(object)
    }
}

function backspacerDOWN(object, e) {
    if (e) {
        e = e
    }
    else {
        e = window.event
    }
    if (e.which) {
        var keycode = e.which
    }
    else {
        var keycode = e.keyCode
    }
    ParseForNumber2(object)
}

function GetCursorPosition() {

    var t1 = phonevalue1;
    var t2 = phonevalue2;
    var bool = false
    for (i = 0; i < t1.length; i++) {
        if (t1.substring(i, 1) != t2.substring(i, 1)) {
            if (!bool) {
                cursorposition = i
                bool = true
            }
        }
    }
}

function ValidatePhone(object) {

    var p = phonevalue1

    p = p.replace(/[^\d]*/gi, "")

    if (p.length < 3) {
        object.value = p
    }
    else if (p.length == 3) {
        pp = p;
        d5 = p.indexOf('-')
        if (d5 == -1) {
            pp = pp + "-";
        }
        object.value = pp;
    }
    else if (p.length > 3 && p.length < 6) {
        l30 = p.length;
        p30 = p.substring(0, 3);
        p30 = p30 + "-"
        p31 = p.substring(3, l30);
        pp = p30 + p31;
        object.value = pp;
    }
    else if (p.length >= 6) {
        l30 = p.length;
        p30 = p.substring(0, 3);
        p30 = p30 + "-"
        p31 = p.substring(3, l30);
        pp = p30 + p31;
        l40 = pp.length;
        p40 = pp.substring(0, 7);
        p40 = p40 + "-"
        p41 = pp.substring(7, l40);
        ppp = p40 + p41;
        object.value = ppp.substring(0, maxphonelength);
    }

    GetCursorPosition()

    if (cursorposition >= 0) {
        if (cursorposition == 0) {
            cursorposition = 2
        } else if (cursorposition <= 2) {
            cursorposition = cursorposition + 1
        } else if (cursorposition <= 5) {
            cursorposition = cursorposition + 2
        } else if (cursorposition == 6) {
            cursorposition = cursorposition + 2
        } else if (cursorposition == 7) {
            cursorposition = cursorposition + 4
            e1 = object.value.indexOf(')')
            e2 = object.value.indexOf('-')
            if (e1 > -1 && e2 > -1) {
                if (e2 - e1 == 4) {
                    cursorposition = cursorposition - 1
                }
            }
        } else if (cursorposition < 11) {
            cursorposition = cursorposition + 3
        } else if (cursorposition == 11) {
            cursorposition = cursorposition + 1
        } else if (cursorposition >= 12) {
            cursorposition = cursorposition
        }

        var txtRange = object.createTextRange();
        txtRange.moveStart("character", cursorposition);
        txtRange.moveEnd("character", cursorposition - object.value.length);
        txtRange.select();
    }

}

function ParseChar(sStr, sChar) {
    if (sChar.length == null) {
        zChar = new Array(sChar);
    }
    else zChar = sChar;

    for (i = 0; i < zChar.length; i++) {
        sNewStr = "";

        var iStart = 0;
        var iEnd = sStr.indexOf(sChar[i]);

        while (iEnd != -1) {
            sNewStr += sStr.substring(iStart, iEnd);
            iStart = iEnd + 1;
            iEnd = sStr.indexOf(sChar[i], iStart);
        }
        sNewStr += sStr.substring(sStr.lastIndexOf(sChar[i]) + 1, sStr.length);

        sStr = sNewStr;
    }

    return sNewStr;
}

[Marin Bratanov]

Hello Stephanie,

I am not sure how this is invoked and what is the exact issue, but can you confirm the following:
- it works in a regular iframe in Firefox
- there are no errors thrown in FF (e.g., due to the use of the textRange object - FIrefox uses the Range object instead)
- do you have any plugins (e.g., GreaseMonkey) in FF that may interfere with the page? Does removing them help?

If the issue is observable only in a RadWindow control and not in a standard environment, could you send us a small sample that we can run and debug, so that we can offer a more concrete response?


Also, I can suggest trying the RadMaskedTextBox for such validation, as it has built-in masks that may suit your needs. The following resources should help you get started with it:
- http://demos.telerik.com/aspnet-ajax/input/examples/radmaskedtextbox/firstlook/defaultcs.aspx - to see how it works live
- http://www.telerik.com/help/aspnet-ajax/input-maskedtextbox-basics.html - the basics of the control
- http://www.telerik.com/help/aspnet-ajax/input-input-mask-dialog.html - using the visual designed to build the mask you need.

Regards,
Marin Bratanov
Telerik

[DogBizPro]

Thanks for the reply. I was just trying to reproduce in an iFrame and now it is working in the RadWindow also. Apparently FireFox was on a vacation for a bit… I also restarted the computer since then. Maybe clearing the cache wasn’t enough…Weird, but thanks!