In the index.php I use href to send value to another php file;
<a href="orderinfo.php?type=11" class="ui-btn ui-shadow">order</a>
and the orderinfo.php is like below.
<html>
<head>
<script type="text/javascript">
function disableOption()
{
console.log("hello");
}
</script>
</head>
<body onload="disableOption()">
</body>
</html>
When I click the href in the main.php. it direct me to the orderinfo.php. but the function disableOption() will not excute till I refresh the website by myself. What's the problem here.
I don't know why . but is I don't add the type=11.It works fine.
<a href="orderinfo.php?" class="ui-btn ui-shadow">order</a>
try to clear the cache.and also add
<!-- no cache-->
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
still not work. I need to refresh the page manually, and the console will show the log info.. It's weird.should I put the whole web page here. because It's too big..
below is the whole webpage.
<!DOCTYPE html>
<head>
<title>index</title>
<!--prevent from become to big on desktop-->
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<!--import the JQuery JSlib-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<!--Custom CSS-->
<style>
#ad{
text-align:center;
}
.pic{
margin-left:0;
}
.price{
}
.discount{
color:red;
}
.order{
float:left;
margin-left:40px;
}
.custom-corners .ui-bar {
margin-top:10px;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.custom-corners .ui-body {
border-top-width: 0;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
</style>
</head>
<body>
<div data-role="page" class="page">
<div data-role="header" style="overflow:hidden;" data-position="fixed">
<h1>deal</h1>
<a href="#" data-icon="gear" class="ui-btn-right">option</a>
</div><!-- /header -->
<div role="main" class="ui-content" class="jqm-main">
<div data-role="tabs" id="tabs" class="jqm-tab">
<div data-role="navbar">
<ul>
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
</ul>
</div><!-- /navbar -->
<div id="one">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>1</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/1.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=11" class="ui-btn ui-shadow">order</a>
</div>
</div>
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>2</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/2.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=12" class="ui-btn ui-shadow">order</a>
</div>
</div>
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>3</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/3.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=13" class="ui-btn ui-shadow">order</a>
</div>
</div>
</div>
<div id="two">
<h3 class="ui-bar ui-bar-a ui-corner-all">1</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">2</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">3</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Powered by ATekNetwork</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Below is the orderinfo.php
<!DOCTYPE html>
<head>
<title>info</title>
<!--prevent from become to big on desktop-->
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<!--import the JQuery JSlib-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<!--Custom JavaScript-->
<script type="text/javascript">
function disableOption()
{
//using flag to determin the selected options
var flag;
var objToday = new Date();
//curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours());
//get the time from the client device NOTICE bug: if the time from the device is wrong may cause problem.
curHour = objToday.getHours();
if(curHour < 11){
flag = 0;
console.log("hello");
}
else if(curHour >= 11 && curHour < 12){
flag = 1;
}
else if(curHour >= 12 && curHour < 13){
flag = 2;
}
else{
flag= 3;
}
console.log(curHour);
var select = document.getElementById('select-choice-1');
if(flag == 0){
for (var i=0, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 1){
for (var i=1, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 2){
for (var i=2, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 3){
for (var i=0, option; option = select.options[i]; i++)
{
option.disabled = true;
}
//emulate(select);
}
}
</script>
<!--Custom CSS-->
<style>
</style>
</head>
<body onload="disableOption()">
<div data-role="page" class="page">
<div data-role="header" style="overflow:hidden;" data-position="fixed">
<h1>info</h1>
<a href="#" data-icon="gear" class="ui-btn-right">option</a>
</div><!-- /header -->
<div role="main" class="ui-content" class="jqm-main">
<?php
$type = $_GET['type'];
$info = "";
if($type == 11){
$info = "1";
}
if($type == 12){
$info = "2";
}
if($type == 13){
$info = "3";
}
?>
<h3 class="ui-bar ui-bar-a ui-corner-all">info</h3>
<form action="sendmail.php" method="get">
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="name">name</label>
<input type="text" name="name" id="name" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<div class="ui-field-contain">
<label for="textinput-disabled">type</label>
<input readonly="readonly" type="text" name="textinput-disabled" id="textinput-disabled" placeholder="Text input" value="<?php echo $info;?>">
</div>
</li>
<li class="ui-field-contain">
<label for="phone">phone</label>
<input type="text" name="phone" id="phone" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<label for="address">adress</label>
<input type="text" name="address" id="address" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<label for="slider-2">num</label>
<input type="range" name="slider-2" id="slider-2" data-mini="true" data-highlight="true" min="0" max="40" value="1" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">time</label>
<select name="select-choice-1" id="select-choice-1">
<option disabled="disabled" value="11-12">11-12</option>
<option disabled="disabled" value="12-1">12-1</option>
<option disabled="disabled" value="1-2">1-2</option>
</select>
</div>
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="reset" class="ui-btn ui-corner-all ui-btn-a">reset</div>
<div class="ui-block-b"><button type="submit" class="ui-btn ui-corner-all ui-btn-a" data-ajax="false">submit</div>
<fieldset>
</li>
</ul>
</form><!--end form-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Powered by ATekNetwork</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Finaly I find the problem, the problem is that weird problem in JQuery mobile. if you Put Your script code in the head element .It will not load into the dom till the web refresh.
So we can put the scripts into the tag below.
<div data-role="page" class="page">
<script>
//your javascirpt code goes here
</script>
</div>
and it works..
