Javascript issue in RadWindow

3 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 10 Jan 2014 Link to this post

    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;
    }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 13 Jan 2014 Link to this post

    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!

Back to Top