1
當我點擊彈出鏈接它變成藍色，但沒有彈出。我想知道我做錯了什麼。我需要刷新導航欄嗎？我知道jquery移動事件需要刷新。我應該使用listview（'刷新'）嗎？jquery移動彈出不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customer Chooses Beer Quantity</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script>
$(document).on('pagebeforeshow','#index', function(){
start_beer_quantity_from_0();
//hide the ui loader
$("#index").loader().loader("option", "disabled", true);
//ajax call to beers
function start_beer_quantity_from_0(){
//form variables
var beer_count = 0;
var formData = {beer_count:beer_count};
ajax_update_content_when_page_is_loaded_beer_quantity(formData);
}
function ajax_update_content_when_page_is_loaded_beer_quantity(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
//alert($.trim(data));
$('.display_beer_count').html(data);
},
error: function (jqXHR, textStatus, errorThrown){
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
$(document).on('click','.beers', function (event){
var beer_quantity = $(this).find(".beer_quantity").val();
var beer = $(this).find(".beer").val();
//form variables
var formData = {
beer_quantity:beer_quantity,beer:beer
};
submit_ajax_form_add_beer(formData);
event.preventDefault();
function submit_ajax_form_add_beer(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
// alert("Beer posted");
$('.display_beer_count').html($.trim(data));
},
error: function (jqXHR, textStatus, errorThrown){
alert("There is not internet connection. Please check your internet connection");
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
</script>
</head>
<body >
<div data-role="page" id="index" >
<div data-role="popup" id="settings_popup_beer_quantity" data-position="right">
<ul data-inset="true" data-role="listview" data-theme="a" data-divider-theme="b" style="min-width:210px;">
<li data-role="list-divider">Settings</li>
<li data-icon="false"><?php echo anchor('login/logout/','Logout', array('title'=>"Logout", "rel" =>"external"));?></li>
<li data-icon="false"><?php echo anchor('customer_settings/','Settings',array('title'=>"Settings","rel" =>"external"));?></li></ul></div>
<div style="float:left;">
<img class="small_logo" border="0" src="<?php echo $this->config->base_url();?>images/small_logo.png" alt="cup Bar Express" />
</div>
<div data-role="header" style="width:100px;float:right;" data-position="right">
<div class="settings_button_quantity" data-role="navbar">
<ul>
<li><a href="#settings_popup_beer_quantity" data-rel="popup" data-transition="pop" class="settings_popup_link_quantity ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn-icon-right ui-icon-bars">Settings</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div role="main" class="ui-content" id="index">
<div class="background_image">
<div class="ui-grid-solo" id="title">QUANTITY</div>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<?php
if(isset($beer_quantity_button)){
echo $beer_quantity_button;
}
?>
</ul>
</div>
</div>
<style type="text/css">
.ui-listview>li h1, .ui-listview>li h2, .ui-listview>li h3, .ui-listview>li h4, .ui-listview>li h5, .ui-listview>li h6{
font-family:'RNS Camelia';
text-shadow: none;
color : black !important;
font-weight: 700;
font-size : 33px;
}
li h1 .display_beer_count{
color:white;
}
.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn{
padding-right:18px;
padding-left :18px;
text-align :center;
background :transparent !important;
}
button.ui-btn.beer_quantity_button{
border :none;
color : black !important;
background: #D6DE23 !important;
}
.ui-listview>li h1.add_beer_to_cart_letters {
color:white !important;
}
button.add_beer_to_cart {
background: transparent !important;
}
@font-face {
font-family:'RNS Camelia';
font-style : normal;
font-weight: 900;
src : local('RNS Camelia'), url(<?php echo $this->config->base_url();?>fonts/RNS_Camelia.otf);
}
@font-face{
font-family:'Simply City Light';
font-style : normal;
font-weight: normal;
src : local('Simply City Light'), url(<?php echo $this->config->base_url();?>fonts/siml023.ttf);
}
.settings_button_quantity{
width :100px;
height :22px;
float :right;
}
a .settings_popup_link_quantity{
height:22px;
}
.ui-content .ui-listview-inset, .ui-panel-inner>.ui-listview-inset{
margin:0;
}
#title{
text-shadow : none!important;
margin-bottom: 11px;
width : 100%;
font-size : 52px !important;
font-family :'RNS Camelia' !important;
color : #D6DE23 !important;
padding-left : 5%;
}
.background_image{
width :100% !important;
padding-bottom:160px !important;
margin-left :auto !important;
margin-right :auto !important;
display :block;
background :url(<?php echo $this->config->base_url();?>images/beer_cup.png) no-repeat;
z-index :-21;
}
.ui-page{
background-image :url('<?php echo $this->config->base_url();?>images/background.png') !important;
width :100%;
background-size :100% 100%;
background-repeat:no-repeat;
}
.small_logo{
padding-top: 4px;
width : 138px;
height : 52px;
}
#settings_popup_beer_quantity li a,#settings_popup_beer_quantity,.ui-navbar li:last-child .ui-btn {
color :black !important;
font-family:'Simply City Light'!important;
}
#settings_popup_beer_quantity .ui-li-divider{
background:black!important;
}
</style>
</div>
</body>
</html>
我認爲AJAX功能 「start_beer_quantity_from_0（）;」凍結了DOM –