jQWidgets Forums

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

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

Author

Setting inputValue does not work on IE9 Posts

June 20, 2012 at 6:57 pm Setting inputValue does not work on IE9 #5170

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

June 20, 2012 at 7:13 pm Setting inputValue does not work on IE9 #5171

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

June 21, 2012 at 3:47 pm Setting inputValue does not work on IE9 #5209

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>

June 21, 2012 at 4:16 pm Setting inputValue does not work on IE9 #5210

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

June 21, 2012 at 8:41 pm Setting inputValue does not work on IE9 #5214

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.

June 21, 2012 at 9:10 pm Setting inputValue does not work on IE9 #5217

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.

Author

Posts

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

You must be logged in to reply to this topic.