I'm developing an application using phonegap and query mobile.

the app targets both iOS and android.

i'm loading content to a page using ajax

the following is the code:

1.  function sendto(url)

           {

               $.mobile.showPageLoadingMsg();

               console.log("url=="+url);

               setTimeout($.unblockUI, 1000); 

               $request = $.ajax({

                                 'type': "GET",

                                 'url': url,

                                 'cache': true,

                                 'success': function(data, status, xhr) {

                                 var page = '#container';                                                         $(page).html(data).page();

                                 $( "div[data-role=page]" ).page( "destroy").page();

                                 $.mobile.hidePageLoadingMsg();

                                 },

                                 'error': function(e, status, error) { console.log("Unexpected failure (error: " + status + " " + error + ')'); }

                                 });

               

               return false;

               

           }

What happens is the css for the header get loaded in some pages but in some pages it doesn't.

I'm uploading the screenshots of the header.

below is the header with no css being loaded for the header.The white part above the arrows"<" ">" should show the header.

Below is how the header should look.

I'm facing this issues only in android version.

I'm Using the following files of jquery mobile      

 jquery-1.8.2.min.js

jquery.mobile-1.2.0.min.js

jquery.mobile-1.2.0.min.css

Please Help.

Thanks

Shruti