If I call the page with www.mydomain.com/gallery.php?id=40 (where id is the gallery id and it's a gallery which has pictures uploaded) the page displays just fine.
If I call the page with www.mydomain.com/gallery.php?id=70 (no pictures available for this gallery) the page just displays a white background.
However, if I check the source of gallery.php?id=70, it is completely fine and all the html is there. The php executes correctly.
I was able to trace the problem down to the jquery.mobile-1.0.min.css file which is included in the header. If I remove this file, everything works fine, php wise.
But here I am stuck. No idea how to get the problem fixed.
The HTML output for the gallery ID 40 (the one which displays correctly):
<!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>
The HTML output for the gallery ID 70 (the one which doesn't display anything except a white background):
<!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>
Besides that I noticed that jquery mobile seems to cache css files. If I link from one page which has the jquery mobile framework included to another page which has completely no jquery mobile framework included at all, it still shows the css style of the jquery mobile framework. Only after a manual page refresh will the new css styling show up.