$.mobile.changePage problem

$.mobile.changePage problem

I have two pages index.html and main.htm
While I m trying to load main.htm from index.html by means of $.mobile.changePage("main.htm","slide"), its not working(main.htm is empty page).

if suppose I add <img> tag inside the page main.htm then its working. I can't guess wats the issue will be. Can anyone provide me a solution or explain me about the why problem occurs.

index.html

<!DOCTYPE html> 

<html> 

<head>

<meta charset="utf-8" ></meta> 

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache" ></META>

<META HTTP-EQUIV="Pragma" CONTENT="no-cache" ></META>

<title>SEAL UI Test Page</title> 

<link rel="stylesheet"  href="css/default.css"></title>

<script type="text/javascript" src="js/jquery-1.5.min.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.0a3.min.js"></script>

<script type="text/javascript">

function validate(){

$.mobile.changePage("main.htm", "slide");

}

</script>

</head> 

<body> 


<div data-role="page" id="page-content" name="page-content">

<div  data-role="header"> 

<h1>Page Title</h1> 

</div>

<div data-role="content">

<p align="center"><img border="0" src="images/seallogolg.png" width="100" height="100" ></img></p>

<table width="90%">

<tr>

<td>

<label for="name">Username:</label>

</td>

<td>

<input type="email" name="username" id="username" value="" placeholder="Username" title="Your name is required." required ></input>

</td>

</tr>

<tr>

<td>

<label for="name">Password:</label>

</td>

<td>

<input type="password" name="password" placeholder="Password" id="password" value="" ></input>

</td>

</tr>

<tr>

<td>

<input type="button" name="button" value="Login" class="ui-btn-hidden" onClick="validate();" ></input>

</td>

</tr>

</table>

<table width="99%">

<tr>

<td colspan="2"><label for="slider">Remember Username and Password:</label>

<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" align="center" id="remember"> 

<input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" ></input> 

<label for="radio-choice-a">On</label> 

<input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off" ></input> 

<label for="radio-choice-b">Off</label> 

</fieldset>

</td>

</tr>

<tr>

<td colspan="2" align="right"> </td>

</tr>

</table>

</div>

<div data-role="footer" data-position="fixed" data-id="1">

<div data-role="navbar">

<ul>

<li><a href="about.htm" data-icon="help">About</a></li>

<li><a href="setup.htm" data-icon="gear">Setup</a></li>

</ul>

</div><!-- /navbar -->

</div>

</div>

</body>

</html>



main.htm(without img tag)

<!DOCTYPE html> 

<html> 

<head>

</head> 

<body> 

<div data-role="page" id="mainpage">


</div> 

</body>

</html>


main.htm(with img tag) works perfectly

<!DOCTYPE html> 

<html> 

<head>

</head> 

<body> 

<div data-role="page" id="mainpage">

<img >

</div> 

</body>

</html>