jQWidgets Forums

Forum Replies Created

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

Author

Posts

June 21, 2012 at 9:10 pm in reply to: Setting inputValue does not work on IE9 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.

June 21, 2012 at 8:41 pm in reply to: Setting inputValue does not work on IE9 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 3:47 pm in reply to: Setting inputValue does not work on IE9 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>

Author

Posts

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