Search jQuery

jQuery Forum

JQM - A Thank You - and another question regarding external links and page flashing.

in jQuery Mobile • 10 years ago

haga0054 and watusiware - thanks for the help yesterday in working through my external div loading issue. Your help is greatly appreciated and this forum is very informative and kicks a$$.

Now, I have another issue perhaps someone can shed some light on. I've managed to deal with the flashing page / transition issues in every area of my app, except for the following scenario. The first page, social.html, is simply a page with three links, one for a blog page with external data loading in, one for a twitter page with twitter data loading in and the last page is for rss feeds, again with rss feeds loading in. No matter how I've tried, I can not kill the flash once these links are clicked on to navigate to the new page. I am using jquery 1.7.1 and jam 1.0.1. I know I can upgrade, but that is causing a bunch of different issues and this is one of the last issues I need to solve prior to production launch.

social.html:

var myScroll;

function loaded() {

setTimeout(function () {

myScroll = new iScroll('wrapper');

}, 100);

}

window.addEventListener('load', loaded, false);

</script>

</head>

<body>

</div>

<li><a href="twitter.html" data-transition="none" rel="external">Twitter</a></li>

<li><a href="rss.html" data-prefetch data-transition="none" rel="external">Industry News</a></li>

</ul>

Replies(11)

watusiware

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

You're using rel="external" to load those pages. There is no way to avoid the flash. When you specify rel="external" JQM loads the page as a "normal" page, which replaces the entire document. This should be avoided whenever possible. It's an "escape hatch" to allow you to link to pages that aren't compatible with jQuery Mobile.

Your data-prefetch on those links is also meaningless, since external pages are never cached in the DOM.

Unrelated: you should use jQuery 1.6.4 if you are using jQuery Mobile 1.0.1. JQM 1.0.1 is not compatible with jQuery 1.7.1.

applenoose

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

Yep, saw the 1.6.4 note, just forgot to switch it back after I was experimenting, same with the data-prefetch. So, if I remove the rel="external" then the flash goes away - but then the div data (from ajax call / json return) does not load on the page. I am pretty confused with this - so is it unavoidable? Did 1.1.0 fix this? It seems some say yes and some say no. I do not want to upgrade to 1.1.0 if it is not 100% as things are breaking when I go from 1.0.1 to 1.1.0.

What if I were to rebuild the social page so that the three page.html links were within the same .html document? Would the data still load?

Thank you!

haga0054

Re: Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

This is simply because you are including the scripts in the <head> of each page. The <head> of each page only get's loaded for the FIRST document you visit except for the <title>, that's loaded on every page. You can either move your JavaScript to the <body> of each page, put the same JavaScript on every page so that no matter what page the user enters, the JavaScript is loaded, or if you know they HAVE to enter from a certain page, put all the JavaScript on one page.

When you use rel="external" it wipes everything and loads from scratch, meaning you are also loading the <head> of the new document. If you don't use rel="external", the head is ignored.

watusiware

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

but then the div data (from ajax call / json return) does not load on the page

You lost me there. What div data? What ajax call?

Did 1.1.0 fix this?

Fix what?

Can you explain WHY you are using rel="external"? Again, this is normally used to load a page that is incompatible with JQM. When you do this, you are tossing EVERYTHING out and just loading a normal page.

What if I were to rebuild the social page so that the three page.html links were within the same .html document?

Probably a bad idea. You can't mix single-page files with multi-page files. If you do, then you are back to using rel="external". Pick one. Multi-page, single-page.

applenoose

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

Ok, I will clarify:

From the social.html page, I link to the blog.html page, via this a href:

Then, on the blog.html page, I have a call to a load-json.js file, so that is returns data on the blog.html page within a div:

This is how the header looks on the blog.html page:

<!DOCTYPE html>

<html>

<head>

var myScroll;

function loaded() {

setTimeout(function () {

myScroll.refresh();

myScroll = new iScroll('wrapper');

}, 100);

}

window.addEventListener('load', loaded, false);

scrollContent.refresh();

</script>

</head>

watusiware

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

OK, so why are you linking this with rel="external"? I don't understand why you are doing that.

I don't see any code to load content using JSON, so I can't comment on any issue with that. Is it the scrollContent.refresh() function?

What is the window.addEventListener code about? You should be using jQuery events, not addEventListener. What are you trying to do there? Since I don't see code for scrollContent, I have no idea.

applenoose

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

Ok, made a bunch of progress, and again, THANK YOU!! A weird issue seems to be occurring, and due to my rookie knowledge, I can't figure this out. As you guys suggested, I moved the load-json.js (ajax call script) into the body of the blog.html page. On initial load, it loads the DOM correctly with one collapsible for each row from the db. However, if I use the top left navigation button to go back to social.html, then click the link for blog.html, it loads each row twice! Rinse, repeat, loads each row three times (1,2,3 1,2,3) you get the point. How do I prevent the call from happening each time that link is clicked? Is there something in the JQM header I am missing? Here is blog.html:

<!DOCTYPE html>

<html>

<head>

var myScroll;

function loaded() {

setTimeout(function () {

myScroll.refresh();

myScroll = new iScroll('wrapper');

}, 100);

}

window.addEventListener('load', loaded, false);

scrollContent.refresh();

</script>

</head>

<body>

<a href="blog.html" data-icon="refresh" data-iconpos="notext" data-direction="reverse" rel="external" class="ui-btn-right">Refresh</a>

</div>

<BR> The Latest Blog Posts<BR><BR>

$(document).delegate('#blogpage','pageinit', function(){

var blog = $('#blog');

$.ajax({

url: 'http://www.ellasfashion.com/aaa/questionbank.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 7000,

success: function(data, status){

$.each(data, function(i, item){

var blogpost = '<div data-role="collapsible" data-min="true" data-collapsed="true" data-content-theme="a"><h2>'+item.title+'</h2>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost).trigger('create');

});

error: function(){

blog.text('We could not load your data, please refresh the screen.');

}

});

</script>

</div>

<ul>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="b" data-prefetch>Contact</a></li>

</ul>

</div>

</div>

</body>

</html>

Here is the link from social.html:

BeyondSco..

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

Hello Haga0054,

You mentioned that if I include data-rel="external" the head section of the page we are linking to will be loaded but the problem I still get a blank page between transitions so I used your solution.

There is a problem when I copy css and scripts references to pages division, only the header will show as I want (As when I used data-rel="external") but the content which is a list view is unordered and showing bigger boxes, as well the footer is not showing properly.

What can I do?

thank you

haga0054

Re: Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

I guess I am not exactly sure what you mean. Can post an example and maybe a screen shot of the behavior?

BeyondSco..

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

Switching pages: new page does not get styles https://forum.jquery.com/topic/switching-pages-new-page-does-not-get-styles

is the post page explaining my problem, on that post they came up with a solution but it didn't work. As well your solution( including styles and scripts in page division)

Is there another solution?

Thank you.

watusiware

Re: JQM - A Thank You - and another question regarding external links and page flashing.

10 years ago

micholine, please start a new thread (don't hijack somebody else's problem), and provide adequate details:

https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help

A two-year-old post about a pre-1.0 beta release almost certainly does *not* describe your problem.

Top Reply

Response title

Attachments

jQuery Forum

JQM - A Thank You - and another question regarding external links and page flashing.

Replies(11)

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: Re: JQM - A Thank You - and another question regarding external links and page flashing.

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Switching pages: new page does not get styles https://forum.jquery.com/topic/switching-pages-new-page-does-not-get-styles

Re: JQM - A Thank You - and another question regarding external links and page flashing.

Statistics

Tags

Actions