I implemented swipe for history back/forward, together with caching the DOM.
Say this is the page structure
Homepage
Page 1
Page 1A
Page 2
When you navigate as follows:
Homepage > Page 1 > Page 1A
The 3 pages are cached
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx" class="ui-page-active">...
If you then go back twice (to the Homepage) and go to Page2, Page 1 and 1A are still cached :(
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
If you now swipe back from Page 2, you will get to Page 1A. This will also make the cache huge.
How do you clear Page 1 and 1A out of the cache as soon as you go to Page 2?
So it should be like this:
<div data-url="home.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
In other words, I want the swipe to work exactly like any browser back/forward button.
(I need the swipe for improved UX because there are no dedicated back/forward buttons on mobile phones)
This seems to solve the problem.
$("body").on("pagecontainerbeforeload", function(event,ui) {
$('div.ui-page-active').nextAll('div[data-role="page"]').remove();
});
So everytime you click a link it will delete all pages after the currently active node.
Related
I'm having a very difficult time improving the page load time of a page that requires many database calls. It takes about 5 seconds to load.
Here's my situation. I have two separate single page tempates, FastPage.pl and SlowPage.pl. FastPage.pl downloads quickly, SlowPage.pl is the slow loading page with many calls. I have the following navbars for FastPage.pl and SlowPage.pl:
<!--Page A Navbar-->
<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Fast Page</li>
<li>Slow Page</li>
</ul>
</div>
</div>
<!--Page B Navbar-->
<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Fast Page</li>
<li>Slow Page</li>
</ul>
</div>
</div>
So here's the problem I'm having:
Scenario 1: Load FastPage.pl first
Load FastPage.pl first, it loads instantly.
Click on SlowPage.pl link, it loads instantly (apparently because of prefetch).
Click back to FastPage.pl. It loads instantly.
Click back to SlowPage.pl. This page now loads very slowly.
Clicking back and forth between links, SlowPage.pl now always loads slowly even though it loaded quickly in step 2. Why doesn't it still load quickly like in step 2?
Scenario 2: Load SlowPage.pl first
Load SlowPage.pl first, it loads slowly, as expected.
Click on FastPage.pl link, it loads instantly.
Click back to SlowPage.pl. It loads instantly.
Toggling between pages is very quick.
What explains this difference in behavior in these scenarios? More importantly, is there anything I can do to get the SlowPage.pl page to reload quickly all the time once it has been loaded?
OK, I just (re)discovered this bit of documentation:
http://demos.jquerymobile.com/1.4.5/pages/#DOMCache
This explains the behavior I see perfectly. I fixed the problem simply by adding:
data-dom-cache="true" key/value pair to the <div role="page"> div.
I have a simple jquery mobile application in which every page has the following structure:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div class="content-primary">...</div>
<div class="content-secondary">...</div>
</div>
<div data-role="footer">...</div>
</div>
The content-secondary is a left sidebar, much like the jquery mobile documentation. This secondary content never changes but it can be very large and complex (expensive to reload on every page). I would like to move the same dom element from page to page as it transitions, and not have to include it on every page like the jqm documentation. I only need to load it when it doesn't exist and then move it with every page transition. Any hints on how to do this?
You can insert HTML content in to your page in a pagebeforecreate handler.
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.
I use this in my Index.aspx:
<%= Html.StandardOverlayCreateButton() %>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
Which is translating into this:
<button type="button">Create</button>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
When you press the button the popup with the Create.aspx occurs. Look at this -> Loading external pages into overlay
For me it seems that the overlay performance is slow.
And there is some strange behaviour, because I can nearly everytime see the old values in the popup. If I click the edit button and then close the popup and click another edit button, I can see the old values for a short time.
Is there a better approach of doing a popup using ASP.NET MVC and jQuery?
Are there tutorials?
Everything is being done client-side so the performance is purely down to JavaScript and jQuery code and nothing to do with any server-side code such as ASP.NET MVC.
You're using quite a few sophisticated effects with that popup, I see <div /> resizing animations, transparency, drop-shadows, the works. JavaScript performance has come on leaps and bounds with recent browsers, but it's performance but still be slow for doing very extravagant visual effects. Have you tried tuning down the visual effects with whatever modal popup JavaScript library you're using.
"And there is some strange behaviour,
because I can nearly everytime see the
old values in the popup. If I click
the edit button and then close the
popup and click another edit button, I
can see the old values for a short
time."
I assume the pop-up is actually loading an iframe which points to the 'Employee/Create' page. My guess is that when the pop-up is closed and then re-opened again with a different page, the previous page will still be sitting in the pop-up's iframe, and the "load-new-page/url" event isn't fired until the pop-up re-appears, hence why you're seeing the old page very briefly.
I had a similar problem to this, you need to tune the modal pop-up behaviour slightly so that it first loads the new page then opens the pop-up, rather than the other way around which is what it's currently doing. My solution to this was a bit hacky in that the page inside the iframe has an $(document).ready({}); event that called some JavaScript function the the iframe's parent to load the pop-up. eg. put this in your page that sits inside the iframe:
<script type="text/javascript">
$(document).ready(function()
{
window.parent.openPopup();
});
</script>
Then you need to define the 'openPopup()' JavaScript method in the iframe's parent (ie. the main page the lists your records).
do you really need the animation?
maybe you don't need the effect: 'apple' attribute?
Effects are slow, especially on IE.
http://flowplayer.org/tools/overlay/index.html#api
Look here - different post but answer is related to your question about MVC & jQuery.
periodically_call_remote is a great rails feature, but with ease comes novices so here I am.
I have a div that is getting updated with content every 5 seconds. Looks great and was easy to setup. This page is the homepage so people will not be staying here long. So when they click another link, such as link_to "All Products", periodically_call_remote creates two displeasing issues.
1) For one thing, periodically_call_remote doesn't stop when a html link is clicked and I believe that this is causing the lag in response to open the selected page.
2) Also, when an html link is clicked the content inside the updated div disappears.
Any conceptual solutions?
This only occurred in FF because I had a div inside the updating div which had my content and that middle div had no purpose.
For example.
<div id="main_div">
<div class="div_with_no_purpose"> <<=== problem div
<div id="div_getting_updated"> <<=== content goes here
</div>
</div>
</div>