I am facing this issue when using jQuery Mobile. When I land to the home page all the CSS and javascript works fine. When clicked on the links or buttons the events works as expected.
But after going to any page say About Us and then refresh that particular page, if we come back to home page some of the CSS are missing and also the javascript is not working anymore, though the links works fine.
simple alert also wont work after coming back to the home page. Any help is appreciated. Thanks
Standard Ajax navigation in jQuery Mobile will only retrieve the <body> of the page you are navigating to. This means that any CSS or scripts linked to/defined in the header of a subsequent page will simply be ignored.
This means that the header of the first page the user load must contain all the styles/scripts required on all subsequent pages.
If you refresh "about", this becomes your initial page, and apparently this page's header does not contain the same content as your homepage.
You can either update your headers or use rel="external" or data-ajax="false" attributes in your links to disable JQM ajax navigation and navigate to/from the "about" page in a more regular fashion, where the whole page will be loaded.
You can check this page for more details.
Going to the other page and refreshing is removing all of your inline styles in the <body>.
Try using an external style sheet to ensure that the styling is conserved.
Your <body> before refresh:
<body style="background: -moz-linear-gradient(top, #E7E7E7, #121212); background: -webkit-gradient(linear, center top, center bottom, from(#E7E7E7), to(#121212));" class="ui-mobile-viewport ui-overlay-d">
And your <body> after the refresh:
<body class="ui-mobile-viewport ui-overlay-c">
This in-page script is also disappearing, try to move it to an external script:
<script type="text/javascript">
$(document).ready(function(){
$(".second-tech").hide();
$(".third-tech").hide();
$("#mobileicon").click(function(){
if ($(".second-tech").is(':visible')) {
//... Lots more code...
});
});
</script>
class="main-page"