jQuery Mobile Not Loading Page
Question
My page doesn't seem to load when I include jQuery Mobile. I only receive a loading message that continues endlessly. I separated my main PHP from my main HTML and I found that my editor can format the HTML correctly. I have a feeling this has to do with HTML formatting, but I cannot find the problem.
<html class="ui-mobile ui-loading"><head><base href="http://luvbid.com/admin/editauction.php?id=192&offset=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.luvbid.com/admin/themes/default/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css">
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
// Navigation
$.mobile.page.prototype.options.backBtnTheme = "d";
// Page
$.mobile.page.prototype.options.headerTheme = "b";
// Page header only
$.mobile.page.prototype.options.contentTheme = "c";
$.mobile.page.prototype.options.footerTheme = "b";
// Listviews
$.mobile.listview.prototype.options.headerTheme = "b";
// Header for nested lists
$.mobile.listview.prototype.options.theme = "c";
// List items / content
$.mobile.listview.prototype.options.dividerTheme = "d";
// List divider
$.mobile.listview.prototype.options.splitTheme = "c";
$.mobile.listview.prototype.options.countTheme = "c";
$.mobile.listview.prototype.options.filterTheme = "c";
$.mobile.listview.prototype.options.filterPlaceholder = "Filter data...";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
<script type="text/javascript" src="scripts/wysiwyg.js"></script><link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="http://www.luvbid.com/markitup/markitup/images/style.css">
<link rel="stylesheet" type="text/css" href="http://www.luvbid.com/admin/markitup/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="http://www.luvbid.com/admin/markitup/markitup/sets/default/style.css">
<script type="text/javascript" src="markitup/markitup/jquery.markitup.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.luvbid.com/admin/markitup/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="http://www.luvbid.com/admin/markitup/markitup/sets/default/style.css">
<script type="text/javascript" src="markitup/markitup/sets/default/set.js"></script>
<script>
$(document).ready(function() {
$(".markItUp").markItUp(mySettings);
});
</script>
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script></head>
<body class="ui-mobile-viewport" screen_capture_injected="true">
<div data-role="page" data-url="/admin/editauction.php?id=192&offset=0" tabindex="0" class="ui-page ui-body-c">
<div data-role="header" class="ui-header ui-bar-b" role="banner">
<a data-role="button" data-icon="home" data-iconpos="notext" href="index.php" class="ui-btn-left ui-btn ui-btn-up-b ui-btn-icon-notext ui-btn-corner-all ui-shadow" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span" title="Home"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Home</span><span class="ui-icon ui-icon-home ui-icon-shadow"></span></span></a>
<div class="ui-title">
Luv Bid - Admin
</div>
<a href="#menu" data-role="button" data-icon="grid" data-iconpos="notext" class="ui-btn-right ui-btn ui-btn-up-b ui-btn-icon-notext ui-btn-corner-all ui-shadow" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span" title="Menu"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Menu</span><span class="ui-icon ui-icon-grid ui-icon-shadow"></span></span></a>
</div>
<div data-role="content" class="ui-content ui-body-c" role="main">
<div>
<form name="details" action="editauction.php" method="POST" enctype="multipart/form-data">
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<p>
TITLE * </p>
<input type="text" name="title" size="40" maxlength="255" value="8GB iTouch">
<input type="hidden" name="userid" value="0">
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<p>
DESCRIPTION * </p>
<textarea class="markItUp" name="description" id="description">For information about the 8GB iTouch; visit the <a href="http://www.apple.com">Apple Website</a>.</textarea>
</div>
<!------------------------- item variants ------------------>
<h3>Main Image</h3>
<div>
<a><img height="100px" width="100px" src="../uploaded/c88dfbd6733cc9fb31918c095cbbd380.jpg"></a>
<div class="ui-checkbox"><input type="checkbox" name="delete_img" id="delete_img" value="delete"></div>
<label for="delete">Delete</label>
Max. 1024000000 bytes <input type="hidden" name="MAX_FILE_SIZE" value="1024000000">
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<p>
Worth </p>
<input type="text" name="item_value" size="40" maxlength="40" value="229.00">
<label>USD</label>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<p>
Bid Price </p>
<input type="text" name="bid_value" size="40" maxlength="40" value="1.00">
USD <input type="hidden" readonly="" name="min_bid" size="40" value="0.01">
<input type="hidden" name="min_bid" size="40" maxlength="40" value="1">
<input type="hidden" name="min_bid" size="40" maxlength="40" value="0.0000">
<input type="hidden" name="min_bid" size="40" maxlength="40" value="0.0000">
<input type="hidden" name="quantity" size="40" maxlength="40" value="1">
<input readonly="" type="hidden" name="current_bid" size="15" maxlength="15" value="0.0000">
</div>
<input type="submit" onclick="updateTextArea('description');" name="act" value="Process changes">
<input type="hidden" name="id" value="192">
<input type="hidden" name="offset" value="0">
<input type="hidden" name="action" value="update">
</form>
</div>
</div>
</div> <div id="menu" data-role="page" data-url="menu">
<div data-role="header">
<div class="ui-title">
Menu
</div>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<div class="ui-title">
Settings </div>
<ul data-role="listview">
<li>
<a href="settings.php">General Settings</a>
</li>
<li>
<a href="batch.php">Batch Procedures Settings</a>
</li>
<li>
<a href="picturesupload.php">Pictures Upload</a>
</li>
<li>
<a href="errorhandling.php">Error Handling</a>
</li>
<li>
<a href="countries.php">Countries Table</a>
</li>
<li>
<a href="languages.php">Languages</a>
</li>
<li>
<a href="durations.php">Auctions Duration</a>
</li>
<li>
<a href="categories.php">Categories Table</a>
</li>
</ul>
</li>
<li>
<div class="ui-title">
Preferences </div>
<ul data-role="listview">
<li>
<a href="currency.php">Currencies Settings</a>
</li>
<li>
<a href="time.php">Time Settings</a>
</li>
<li>
<a href="dates.php">Dates Format</a>
</li>
<li>
<a href="defaultcountry.php">Default country</a>
</li>
<li>
<a href="metatags.php">HTML meta Tags</a>
</li>
</ul>
</li>
<li>
<div class="ui-title">
Users </div>
<ul data-role="listview">
<li>
<a href="newadminuser.php">New admin user</a>
</li>
<li>
<a href="adminusers.php">Admin users management</a>
</li>
<li>
<a href="acceptancetext.php">Acceptance Text</a>
</li>
<li>
<a href="listusers.php">Users management</a>
</li>
<li>
<a href="activatenewsletter.php">Newsletter</a>
</li>
<li>
<a href="newsletter.php">Newsletter Submission</a>
</li>
<li>
<a href="banips.php">IP Addresses</a>
</li>
<li>
<a href="news.php">News Management</a>
</li>
</ul>
</li>
<li>
<div class="ui-title">
Auctions </div>
<ul data-role="listview">
<li>
<a href="sell.php">Add new auction</a>
</li>
<li>
<a href="listallauctions.php">All auctions</a>
</li>
<li>
<a href="listauctions.php">View Open Auctions</a>
</li>
<li>
<a href="listclosedauctions.php">View Closed Auctions</a>
</li>
<li>
<a href="listsuspendedauctions.php">View Suspended Auctions</a>
</li>
</ul>
</li>
<li>
<a href="../webim/operator/index.php" target="_new">Live Support</a>
</li>
<li>
<a href="logout.php">Logout</a>
</li>
</ul>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
UPDATE: Showing rendered HTML instead.
2 answers
solution1
3 2012-03-09 21:37:26
Not sure if its your problem at all, but <!------------------------- item variants ------------------> is a bad way to put in html comments.
I dont have a ref right now, but I think the logic is something like this:
the actual 'comment' code is "--" so you are essentially comment/uncommenting over and over.
use <!--==================================--> or something else instead
EDIT : Found an article: http://weblog.200ok.com.au/2008/01/dashing-into-trouble-why-html-comments.html
solution2
1 ACCPTED 2012-03-09 22:01:35
The error was a label tag that had a for attribute that was not correct:
<label for="delete">Delete</label>
Should be:
<label for="delete_img">Delete</label>
Here is a demo: http://jsfiddle.net/zcUs2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jquery mobile multi - page loading twice
Jquery Mobile - form submission - Error Loading Page
JQuery Mobile “Error Loading Page” on 404 and 500
Jquery Mobile: New Ajax Loaded Page not Loading new JS
JQuery Mobile Login Page
Jquery mobile page structure
Loading a page using jQuery
jQuery Mobile page not showing up on mobile devices
Jquery mobile ajax load page
Page templates: jQuery Mobile or PHP?
Related Tags