device orientation

device orientation

Hi , 

I am kinda new to jquery . I am making an application in which the second screen has two different UI depending upon device orientation. 

Device- IPAD ,Language - jquery/jquery-mobile


How do i dynamically repaint the screen with new UI upon device orientation.

My  jquery code is as follows :

<div data-role="page" id="calendar" >
<div data-role="content" id="calendar_content">
<script> generateCalendarView();</script>
</div>
</div>

Above, I am calling my function generateCalendarView() from my content datarole.



This is my function :

var generateCalendarView = function() { 
if(window.orientation == 90 || window.orientation == -90) {
document.write( "<div>"+
                   "<p style=\"text-align: center;\">"+
                       "<span style=\"font-size: x-large;\" data-mce-style=\"font-size: x-large;\">"+
                           "<label class=\"empName\" style=\"font-size:65%\"></label>"+
               "<p style=\"text-align: center;\" data-mce-style=\"text-align: center;\">"+
                       "<span style=\"font-size: small; \">"+
                     
"</div>");}


 else {
document.write(
"<br>"+
"<div class=\"ui-grid-b\">"+
"<div class=\"ui-block-a\">"+
"<a data-role=\"button\" data-direction=\"reverse\" data-transition=\"slide\" data-theme=\"c\" href=\"#balance\">Balances</a>"+
"</div>"+
"<div class=\"ui-block-b\">"+
"<div>");
}
event.stopPropagation();
}


$(document).ready(function(){
 $(window).bind(orientationEvent, generateCalendarView);
}).bind('load', generateCalendarView);


This is not rerendering the page , because I think in the Data-Role the function is being called only once. 
How do i re-render the particular screen on orientation 

Please guide.
Thanks a lot.

P.s - Please dont bother about what is inside the document.write as i have deleted the divs before publishing it here as it was a lot of code.