www.mydomain.com/gallery.php?id=40 (ここで id はギャラリー ID で、写真がアップロードされたギャラリーです) でページを呼び出すと、ページは問題なく表示されます。
www.mydomain.com/gallery.php?id=70 (このギャラリーで使用できる画像はありません) でページを呼び出すと、ページの背景が白く表示されます。
ただし、gallery.php?id=70 のソースを確認すると、まったく問題なく、すべての html がそこにあります。PHPは正しく実行されます。
ヘッダーに含まれている jquery.mobile-1.0.min.css ファイルまで問題を追跡することができました。このファイルを削除すると、php に関してはすべて正常に動作します。
しかし、ここで私は立ち往生しています。問題を解決する方法がわかりません。
ギャラリー ID 40 の HTML 出力 (正しく表示されるもの):
<!DOCTYPE html>
<html>
<head>
<title>fdgsdfgsdfg</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div data-role="page" class="page gallery-page">
<div data-role="header" data-theme="b">
<a href="gallery-list.php" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a href="index.php" data-icon="home" data-direction="reverse">Home</a>
<h1>fdgsdfgsdfg</h1>
</div><!--/header-->
<div data-role="content"> <!-- <div data-role="content full-width"> -->
<ul class="gallery four-column-gallery" id="gallery">
<li><a href="galleries/41/3899dfe821816fbcb3db3e3b23f81585_XL.jpg" rel="external"><img src="ubergallery/cache/114-4ce29e49cff542cd885c04359d9c795c.jpg" /></a></li>
<li><a href="galleries/41/alex.png" rel="external"><img src="ubergallery/cache/114-69e8934ae4332cae000fde07804d2665.png" /></a></li>
<li><a href="galleries/41/board.jpg" rel="external"><img src="ubergallery/cache/114-6a0e6c37b8b05b3f4d2efe2c54bd9ef5.jpg" /></a></li>
<li><a href="galleries/41/board2.png" rel="external"><img src="ubergallery/cache/114-2dd2928bec5b17942d651c40f7333776.png" /></a></li>
<li><a href="galleries/41/icon-erfolg.png" rel="external"><img src="ubergallery/cache/114-dc95199136b5493f2d3aea76556e3b00.png" /></a></li>
<li><a href="galleries/41/icon-fehler.png" rel="external"><img src="ubergallery/cache/114-c817fc1df5faed158531efdfe3d526cb.png" /></a></li>
<li><a href="galleries/41/IMAG0010.jpg" rel="external"><img src="ubergallery/cache/114-d863cc43dd98747be69c4d63b4841751.jpg" /></a></li>
<li><a href="galleries/41/img1.jpg" rel="external"><img src="ubergallery/cache/114-b183cf7a0a3576b8b78af43591b203bd.jpg" /></a></li>
<li><a href="galleries/41/img2.jpg" rel="external"><img src="ubergallery/cache/114-e7e8a237a3bedfe17cb1415586782beb.jpg" /></a></li>
<li><a href="galleries/41/img3.jpg" rel="external"><img src="ubergallery/cache/114-c0482edf6f290b2106dd6a8c77bda62d.jpg" /></a></li>
<li><a href="galleries/41/img4.jpg" rel="external"><img src="ubergallery/cache/114-6d136ff32b3eeedb9da5807f93f0a59b.jpg" /></a></li>
<li><a href="galleries/41/Tshirt-Android-VS-Apple-500x500.png" rel="external"><img src="ubergallery/cache/114-6c49890265d9a5f7df5650d293f6b747.png" /></a></li>
<li><a href="galleries/41/tshirt-configurator-mockup.jpg" rel="external"><img src="ubergallery/cache/114-d0b896c10001d385fcaa0364cac28f12.jpg" /></a></li>
</ul>
<div style="clear:both"></div>
<!-- Uploader -->
<link href="uploader/ajaxuploader.css" rel="stylesheet" />
<script type="text/javascript" src="uploader/ajaxuploader-min.js"></script>
<script type="text/javascript">
var uploader = null;
$().ready(function(){
uploader = new Uploader();
uploader.setOptions(1024 * 1024 * 15, ["jpeg", "jpg", "png", "gif"]);
});
</script>
<style type="text/css">
#wrapper { margin: 10px 0 10px 6px; padding:0; overflow: hidden; }
</style>
<div class="message" style="margin-top:10px">
<div id="wrapper">
<div id="uploadspace"></div>
<div id="buttons">
<div id="addbutton" >
<form enctype="multipart/form-data" method="post" action="uploader/ajaxuploader.php?uid=41">
<input type="file" id="filechooser" onchange="uploader.enqueue();" name="filedata"/>
</form>
</div>
<a id="startbutton" class="hidden" onclick="uploader.start(); return false;"></a>
<a id="clearbutton" class="hidden" onclick="uploader.clear(); return false;"></a>
</div>
</div>
</div>
<select name="select-choice-a" id="select-choice-a" data-mini="true" data-native-menu="false">
<option>Choose theme</option>
<option value="1" />Polaroids on cord</option>
<option>Choose theme</option>
<option value="2" />City silhouette</option>
<option>Choose theme</option>
<option value="3" />Brickwall</option>
<option>Choose theme</option>
<option value="4" />Clouds</option>
<option>Choose theme</option>
<option value="5" />Nostalgic</option>
<option>Choose theme</option>
<option value="6" />Party time</option>
<option>Choose theme</option>
<option value="7" />Natural harmony</option>
</select>
<a href="themes/polaroids-on-wood/index.php?id=41" data-role="button" data-theme="b">Visualize it!</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="gallery-delete-pics.php?id=41" data-role="button" data-icon="delete">Delete images</a>
</div>
</div><!-- /page -->
</body>
</html>
ギャラリー ID 70 (白い背景以外は何も表示されないもの) の HTML 出力:
<!DOCTYPE html>
<html>
<head>
<title>auto gal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div data-role="page" class="page gallery-page">
<div data-role="header" data-theme="b">
<a href="gallery-list.php" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a href="index.php" data-icon="home" data-direction="reverse">Home</a>
<h1>auto gal</h1>
</div><!--/header-->
<div data-role="content"> <!-- <div data-role="content full-width"> -->
<div class="error">There are no images in this gallery. Click on the Add button to add pictures manually from your device.</div>
<!-- Uploader -->
<link href="uploader/ajaxuploader.css" rel="stylesheet" />
<script type="text/javascript" src="uploader/ajaxuploader-min.js"></script>
<script type="text/javascript">
var uploader = null;
$().ready(function(){
uploader = new Uploader();
uploader.setOptions(1024 * 1024 * 15, ["jpeg", "jpg", "png", "gif"]);
});
</script>
<style type="text/css">
#wrapper { margin: 10px 0 10px 6px; padding:0; overflow: hidden; }
</style>
<div class="message" style="margin-top:10px">
<div id="wrapper">
<div id="uploadspace"></div>
<div id="buttons">
<div id="addbutton" >
<form enctype="multipart/form-data" method="post" action="uploader/ajaxuploader.php?uid=69">
<input type="file" id="filechooser" onchange="uploader.enqueue();" name="filedata"/>
</form>
</div>
<a id="startbutton" class="hidden" onclick="uploader.start(); return false;"></a>
<a id="clearbutton" class="hidden" onclick="uploader.clear(); return false;"></a>
</div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="gallery-delete-pics.php?id=69" data-role="button" data-icon="delete">Delete images</a>
</div>
</div><!-- /page -->
</body>
</html>
それに加えて、jquery mobile が css ファイルをキャッシュしているように見えることに気付きました。jquery モバイル フレームワークが含まれているページから、jquery モバイル フレームワークがまったく含まれていない別のページにリンクすると、jquery モバイル フレームワークの css スタイルが表示されます。手動でページを更新した後にのみ、新しい css スタイルが表示されます。