Search jQuery

jQuery Forum

jQuery Mobile

Glenn Pie..

Transitions not refreshing css ?

in jQuery Mobile • 7 years ago

I have a site with a top level menu and on each link of the menu I use a different css to change the theme.

Ie the first link shows green colors the second blue etc.

I have started to use jQuery mobile transitions by adding to each link data-transition="slide" .

This seemed to work great apart from the css colours never change as the css seems cached.

(I can do a browser reload after the transition to update)

I also have a page with a block like

<style>

.info {

display: none;

}

</style>

which also does not get called. Unless I reload the page explicitly after the transition ?

Has anyone seen this before ?

I am running the latest stable version.

I have turn of page pre-fetching in case it was that.

This is on mobile and the desktop (Chrome)

Thanks for any help.

Example

Goto

https://shimmybicester.carnegosystems.net/pages/your_community/whos_who/

First time it works.

The go to

https://shimmybicester.carnegosystems.net/pages/your_community/community_news/

The alerts still show ?

Do a refresh on this page and then go back to the first url to see the issue.

Replies(11)

watusiware

Re: Transitions not refreshing css ?

7 years ago

Impossible to give a specific answer with such little information. You didn't say where you put the style tag. Is it in <head> ? In <body> ?

It's always best to provide a link to your site or set-up a jsFiddle, so that we know exactly what you tried.

Scripts and styles inside of <head> are ignored except on the first page loaded. Everything inside <head> except <title> is discarded.

Glenn Pie..

Re: Re: Transitions not refreshing css ?

7 years ago

hmm they were in head.

I have move the js out now but have the same issue still.

Will see if I can get an example going on jsfiddle

Glenn Pie..

Re: Re: Transitions not refreshing css ?

7 years ago

I have updated the question with an example now.

Thanks

Glenn Pie..

Re: Transitions not refreshing css ?

7 years ago

Also I have added

$(document).on('pageinit pagechange pageshow',

function() {

alert('here');

}

});

on one page. If I hit the refresh button on that page the code runs. It also seems to run on all the other pages

that don't have this code.

If I refresh one of the other pages the alerts disappear but then don't run on the page where the code is.

I sure this is a related problem I I a misunderstanding something about jQuery.mobile.

thanks

watusiware

Re: Transitions not refreshing css ?

7 years ago

$(document).on('pageinit pagechange pageshow',

function() {

alert('here');

}

});

This will fire on ANY pageinit , pagechage or pageshow . Did you want to do something different?

For example, you can use delegation to do something when a particular page (or pages) are initialized:

$(document).on('pageinit', '.some-page-selector', function() {

var $page = $(this); // handy variable to have

// Do something when any page with class some-page-selector is initialized

});

Please read the documentation on jQuery Mobile Ajax page loading. It's useful to observe the DOM using your browser's inspection features. (Web Inspector, Chrome Dev Tools, etc.)

So much of conventional web front-end programming depends on the fact that the document is normally reloaded when you load a "page".) (HTML really has no such thing as a "page"!) Everything starts fresh every time a document is loaded.

jQuery Mobile doesn't re-load the document. It loads "pages" (a foreign concept for HTML) into a single document that is always retained.

You have to think differently. It's best, I think to load all of your code in <head>. That code needs to anticipate what pages *might* be loaded, and the code should act when/if those pages are loaded.

You can also include JS on individual pages. You need to put it inside the page div, at the bottom of the page.

Glenn Pie..

Re: Transitions not refreshing css ?

7 years ago

Thanks .

In the end I did this

//$(document).on('pagecreate', '.info', function() {

$(document).on('pageshow', function() {

var page = $(this); // handy variable to have

// Do something when any page with class some-page-selector is initialized

if(page[0].title == "Whos who") {

alert('here');

$('.info').hide();

};

});

For some reason the selector in the on method did not work.

Now I just need to figure how to changed the css for each page being shown.

watusiware

Re: Transitions not refreshing css ?

7 years ago

For some reason the selector in the on method did not work.

Define "did not work". Did you use your browser's debugging tools to set breakpoints, etc?

You haven't shown us enough for us to offer much help. If you provide a link to a page or set-up a jsFiddle, then we have everything we need to help you. Otherwise, it is just s sequence of guesses. Otherwise known as: "20 Questions".

I usually get tired after a few.

Glenn Pie..