0

Earlier I had a problem with jQuery it seems like I have the same problem only this time it's CSS not JavaScript: Why do I have to refresh my page for a javascript function to work?

When transitioning from one page to another, the custom css properties on the target page do not get applied. I have to refresh the page to get them applied.

I tried binding with pageinit but it won't work.

What do I have to do to make this nonsense stop so I don't come back here for the 3rd time. ?

I'm getting weary of this and it's slowing me down.

Thanks.

EDIT:

I used rel="external" in the originating page and it works. Can you explain why:

<a href="page2.php?c=x" rel="external">Page2</a>`

session.header.php (A template file)

<!DOCTYPE html> 
<html> 
<head> 
<title>{$TITLE}</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" media="all" />
<!-- Custom css -->
<link rel="stylesheet" href="jquery.mobile.custom/jqm-icon-pack-2.1.2-fa.css" media="all" />
<!-- Javascript includes -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="events.js" type="text/javascript"></script>
<style>
#td-menu
{
padding-left:75px;  
}
</style>
</head> 
<body> 
<div data-role="page" id="page1" style="background-color:#FFF">
<div align="center"><img src="images/logo.png" alt="logo" width="230" height="123" /></div>
<div data-role="header" data-position="inline">
<div data-role="navbar">
<ul>
<li><a href="index.php" data-role="button" data-ajax="false" data-theme="b">Home</a></li>
</ul>
</div>
</div>

The inlined CSS doesn't get applied if I visit a page that runs on this template file. If I type the URL in the address box or refresh the page (after originating from another page) it applies the CSS.

But for now it seems to work with the rel="external" and I have no clue how.

Community
  • 1
  • 1
TheRealChx101
  • 1,468
  • 21
  • 38
  • Tell us more what you have done explicitly. What css properties do you mean, how should they get applied (but don't)? Could you link to your earlier problem, if that helps to understand the question? – Bergi Sep 22 '12 at 09:47
  • http://stackoverflow.com/questions/12539974/why-do-i-have-to-refresh-my-page-for-a-javascript-function-to-work – TheRealChx101 Sep 22 '12 at 09:48
  • Maybe if you clear your browser cache will solve this problem – Mihai Matei Sep 22 '12 at 09:48

1 Answers1

0

Are you using the same file name? If so, it's probably cached, so it won't refresh.

You can "trick" the browser by adding some useless vars in url:

<link rel="stylesheet" href="/screen.css?v=001">

Then on page 2 you change ?v=001 to ?v=002 etc. You can also make it random (with php) to force the browser to never cache it:

<link rel="stylesheet" href="/screen.css?v=<?=rand(0,1000);?>">

But it will increase the loading time.

If it's not the case, please post your code ;-)

Giona
  • 20,734
  • 4
  • 56
  • 68