jQuery UI Widgets Forums Editors MaskedInput Setting inputValue does not work on IE9

This topic contains 5 replies, has 2 voices, and was last updated by  mperez 8 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • mperez
    Member

    Setting the inputValue does not work in IE9 version 9.0.8112.16421. I am using jqWidgets version 2.2.1 with JQuery 1.7.1. Here is the code i used:

    $(‘#phoneInput’).jqxMaskedInput(‘inputValue’,’3333333333′);

    This work on FireFox version 13.0


    Peter Stoev
    Keymaster

    Hi mperez,

    Could you please provide the full initialization code including the HTML markup? For formatting of the code in the Forum, you can select the code and press the button.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mperez
    Member

    Here is the html for the page:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/js/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="/js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/js/jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="/js/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/js/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/js/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="/js/jqwidgets/globalization/jquery.global.js"></script>
    <style type="text/css">
    body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding:0px;
    margin:0px;
    }
    .title {
    font-size:24px;
    font-weight:bold;
    padding-bottom:25px;
    background-color:#CCCCCC;
    padding:8px;
    color:#2C2C29;
    }
    .required{
    color:#990000;
    font-size:14px;
    font-weight:bold;
    padding-right:5px;
    padding-left:5px;
    }
    .error{
    color:#990000;
    display:none;
    font-size:12px;
    }
    .two{width:130px;}
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxProgressBar
    var theme = $.data(document.body, 'theme');
    $("#txtFirstName").focus();
    if (theme == null || theme == undefined) theme = '';
    // Create jqxMaskedInputs
    $("#phoneInput").jqxMaskedInput({ width: 153, height: 20, mask: '(###)###-####', theme: theme });
    $("#faxInput").jqxMaskedInput({ width: 153, height: 20, mask: '(###)###-####', theme: theme });
    $("#birthdateInput").jqxMaskedInput({ width: 153, height: 20, mask: '##/##/####', theme: theme });
    });
    </script>
    </head>
    <body>
    <form id="form1" enctype="multipart/form-data">
    <div class="title">New Referral</div><div style="float:right;margin-top:-20px;font-size:12px; padding-right:5px;">Referral #:
    </div>
    <div style="text-align:center;">
    <div style="width:550px;padding-top:15px;padding-right:40px;">
    <table cellpadding="4" cellspacing="0" border="0" style="text-align:left;">
    <tr>
    <td class="two">
    First Name:
    </td>
    <td>
    <input type="text" id="txtFirstName" /><span class="required">*</span><br /><div id="firstnameMsg" class="error">Please enter a first name.</div>
    </td>
    </tr>
    <tr>
    <td class="two">
    Last Name:
    </td>
    <td>
    <input type="text" id="txtLastName" /><span class="required">*</span><br /><div id="lastnameMsg" class="error">Please enter a last name.</div>
    </td>
    </tr>
    <tr>
    <td class="two">
    Home Phone:
    </td>
    <td>
    <div style='margin-top: 3px;' id='phoneInput'></div><div id="phoneMsg" class="error">Please enter a valid phone number.</div>
    </td>
    </tr>
    <tr>
    <td class="two">
    Birthdate:
    </td>
    <td>
    <div><div id="birthdateInput" style="float:left;"></div><div style="float:right;width:20px;padding-right:230px;padding-top:4px;" class="required">*</div></div><br><div id="birthdateMsg" class="error">Please enter a valid date.</div>
    </td>
    </tr>
    <tr>
    <td class="two">
    Fax Number:
    </td>
    <td>
    <div style='margin-top: 3px;' id='faxInput'></div><div id="faxMsg" class="error">Please enter a valid fax number.</div>
    </td>
    </tr>
    </table>
    </div></div>
    <div style="text-align:right;padding-right:20px;padding-top:20px;"><input type="button" onclick="$('#phoneInput').jqxMaskedInput('inputValue','3333333333');" value="Set Phone Number Test" />
    <input type="submit" id="btnSubmit" value="Submit" /><span style="padding-left:20px;" /><input type="button" id="btnCancel" name="btnCancel" value="Cancel" title="Cancel" onclick="window.frameElement.cancelPopUp();return false;" />
    </div>
    </form>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi mperez,

    This works fine with IE8 and IE9, but it does not work with IE7 on my side.

    and

    .

    Thank you for the feedback. The issue is going to be resolved for the next release of jQWidgets.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mperez
    Member

    ok, I did some further testing… that page is part of a SharePoint 2010 site and it looks like it just doesn’t work within the SharePoint evironment on IE9 (it does, however, work on FireFox and Safari). I took the same page and ran it localy as you did and it works on IE9. I will continue to test to see if I can find a solution. Thanks Peter.


    mperez
    Member

    Ok, problem solved. When testing the page on my local site IE defaults to “Document Mode: IE9 Standards”. When running the page from within SharePoint IE was defaulting to “Document Mode: IE7 Standards”. I added the following to the head tag and it’s working now:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9">

    When you fix it so that your code works with IE7 this will not be needed.

    Thanks again for your help Peter.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.