I know that IE 7-9 are Grade A supported. But with my site it is not working, I can’t figure out for the life of me why. Here is the link: http://www.fuelingminds.com/userpages.cfm I’ve done previous projects using alpha 4 and everything looked just fine, but I switched to beta 1 now. are there any known issues that are out there or am I just missing something obvious in my code?
Note: I tried disabling ajax to see if that was the cause, but still the same skewed look, I’ve tried on IE 7 and 9 on multiple computers, tried using jquery mobile from a local source instead as well.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<link href="css/loginandError.css" type="text/css" />
</head>
<body>
<div data-role="page" data-theme="c" id="login" data-ajax="false">
<div data-role="header">
<a onClick="window.history.back()" data-icon="back" data-direction="reverse" >back</a>
home
<h1>Fueling The Future - Login</h1>
</div>
<div data-role="content" align="center">
<form action="loginAct.cfm" method="post" data-ajax="false">
<input type="text" value="youremail#email.com" name="email">
<input type="password" value="password" name="pass">
<br>
<input type="submit" value="login" name="login" data-inline="true">
<br>
Register To Apply Today!
</form>
</div>
</div>
<!--- <div data-role="page" data-theme="c" id="register" data-ajax="false">
<div data-role="header">
<h1>Fueling The Future</h1>
<!--<div data-role="navbar">
<ul data-inset="true" style="margin-top: 0px; margin-bottom: 0px;">
<li>Home</li>
<li>The Program</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Contact</li>
</ul>
</div>-->
</div>
<div data-role="content">
<cfform action="regAction.cfm" method="post" data-ajax="false">
<label for="email">E-mail</label>
<cfinput type="text" label="E-mail" name="email" >
<label for="pass">password</label>
<cfinput type="password" name="pass" >
<label for="passChk">enter password again</label>
<cfinput type="password" name="passChk" >
<label for="fName">First Name</label>
<cfinput type="text" name="fName">
<label for="lName">Last Name</label>
<cfinput type="text" name="lName">
<br>
<cfinput type="submit" name="submit" value="register" data-inline="true">
</cfform>
</div>
<div data-role="footer">
</div>
</div>--->
</body>
</html>
Is this page working with your IE9?
If yes, it is unfortunately Alpha3 of jQuery Mobile, but perhaps these fixes will work for you:
// Fix for IE9 and experimental jQuery Mobile Datepicker
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
//reset type=date inputs to text
$.mobile.page.prototype.options.degradeInputs.date = true;
$.extend($.mobile, {
//extend gradeA qualifier to include IE7+
gradeA: function() {
//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
var ie = (function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '<!--[if gt IE '+(++v)+']><br><![endif]-->', a[0]);
return v > 4 ? v : !v;
}());
//must either support media queries or be IE7+
return $.support.mediaquery || (ie && ie >= 7);
}
});
});
You have to put these lines of code between query.js and query.mobile.js.
You need to have <!DOCTYPE html> or else it wont read the html5 correctly.
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.clear {
zoom: 1;
display: none;
}
</style>
<![endif]-->
paste this to your layout page
Related
OMG I am tired of trying to figure this out myself. I am using the developer tools in Chrome and in Firefox and I keep getting the SyntaxError: Unexpected Token <. It keeps flagging the first line . Please tell me what I am doing wrong here, thank you! I have tried YouTube videos and W3schools.com and still unable to figure out why it continues to be thrown.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script>
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference
// id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName
// reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
</script>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
<br/>
<br/>
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>
It seems to be rendering perfectly fine to me. I would not recommend putting a script take outside of the body tag. I would put it at the very end of the tag so that it doesn't hold up the loading of the page. In addition, I'd use "Brackets" as my code editor for projects like this. It's super useful, and you can download "Beautify" as an extension to make your code format out nicely.
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!
Trying to implement panel event without success
using this code in
$(document).on("panelbeforeopen", "#leftpane", function(event, ui ){ //
alert("panelbeforeopen");
var disableForm = "<?php echo ($_SESSION['user'] == '' ? 'true' : 'false') ?>";
if(disableForm){
alert("form disabled");
}else{
alert("form enabled");
}
});
This will result in just working if i refresh the page totally.
If i put it in my included .js file it works without refreshing the page but PHP function to get user in session will be trick.. I dont want to solve it that way.
my header looks like this:
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile- 1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="_js/javascript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
html
<body>
<div data-role="page" id="menu">
<!-- Panels begins here -------------------------------------------------------------------------->
<div data-role="panel" id="leftpane" data-position="left" data-swipe-close="true" data-display="overlay" data-theme="a">
<h4 id="loginTitel">Login</h4>
<p id="output"></p>
<div id="formDiv">
<form id="loginForm" >
<label for="usn" class="ui-hidden-accessible">Username : </label>
<input type="text" maxlength="25" placeholder="username" data-mini="true" required autofocus name="username" />
<label for="passwd" class="ui-hidden-accessible">Password : </label>
<input type="password" maxlength="25" placeholder="password" data-mini="true" required autofocus name="password" />
<input name="action" type="hidden" value="login" />
<button data-theme="b" id="submit" data-mini="true" type="submit">Login</button>
</form>
</div>
<p />
</div>
<!-- /leftpanel -->
<div data-role="panel" id="infoPanel" data-display="overlay" data-position="right" data-theme="b">
<h2>Information</h2>
<p>content</p>
</div>
<!-- /rightpanel -->
<!-- Panels end here -------------------------------------------------------------------------->
<div data-role="header" position="inline"><img src="_pic/globe.png" alt="Low resolution logo" class="align-right"/>
<h1>JQM Site</h1>
</header>
</div>
<div data-role="content" id="content">
<h4>Titel</h4>
<p>
content
</p>
</div>
<footer data-role="footer" class="ui-body-c" data-position="fixed"> </footer>
</div>
Main function I´m trying to reach here is to make a check if user session exist and show content in leftpanel depending on result of Session.
maby I´m approaching this all wrong? an example would be much helpful
I have tried to get this work for hours.
Both test pageinit and pageshow on row 1 in login.js with no response at all, but the page is still being loaded and I not getting any javascript error when I run it in FF.
From index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PSForum Notiser</title>
<link rel="stylesheet" href="js/jquery.mobile/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/jquery.mobile/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/login.js"></script>
</head>
From login.html
<div id="loginPage" data-role="page">
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
</div>
From login.js (the part wish not running)
$("#loginPage").on('pageinit', function(){
alert("Hello world!");
console.log("loginPage is loaded");
checkPreAuth();
var form = $("#loginForm");
$(form).on("submit",handleLogin);
if(window.localStorage["username"] != undefined) {
$("#username", form).val(window.localStorage["username"]);
}
});
I hope the wisdom of stackoverflow can help me find why $("#loginPage").on('pageinit') not firing?
Best regards
I am learning to write web apps at the moment and have built a small calculator. The problem is that the page refreshes after I press one of the form buttons.
I have tried the data-ajax="false" in several of the tags to no avail. I have tried it in the and tags but no luck.
Any ideas? Below is my code:
<html>
<head>
<title>GST Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- jQueryMobileCSS - original without styling -->
<link rel="stylesheet" href="css/jquerymobile.css" />
<!-- nativeDroid core CSS -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
<!-- nativeDroid: Light/Dark -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
<!-- nativeDroid: Color Schemes -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.color.blue.css" id='jQMnDColor' />
<!-- jQuery / jQueryMobile Scripts -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script language="javascript" type="text/javascript">
// GST Calculator Script
function addgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var subtotal = new Number(dollarAmount);
var gst = new Number(dollarAmount * 0.1);
var total = new Number(dollarAmount * 1.1);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
function subtractgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var gst = new Number(dollarAmount / 11);
var subtotal = new Number(dollarAmount - gst);
var total = new Number(dollarAmount);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
</script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<i class='icon-ellipsis-vertical'></i>
<h1>GST Calculator</h1>
</div>
<div data-role="content">
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="dollarAmount2">Amount:</label>
<input type="tel" name="dollarAmount" id="dollarAmount2" value="" data-clear-btn="true" placeholder="">
</li>
<li>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b" onclick="subtractgst(this.form)" name="subtractGst" value="Subtract GST" >- GST</button></div>
</fieldset>
</li>
<li data-role="fieldcontain">
<label for="subtotal2">Sub Total:</label>
<input type="text" name="subtotal" id="subtotal2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="gst2">GST:</label>
<input type="text" name="gst" id="gst2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="total2">Total:</label>
<input type="text" name="total" id="total2" value="" data-clear- btn="true" placeholder="">
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
Try adding return false; to your onClick event:
onclick="addgst(this.form); return false"
The <input type="submit"> buttons will always submit the form to the server to be processed. Because you're not doing any server-side processing you can just use <input type="button"> elements
see here for more info on the different types of input available.
So your example would be
<input type="button" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</input>
As a side note, it's strongly discouraged to add your click handlers inline like this: onclick="addgst(this.form)" It's usually preferred to do this in the script itself to properly separate your display code and your processor code. Here's a link to Event Listeners