I have been working with jQuery mobile 1.0.1.
I have a page which drills down to a listing page. The listing page is created dynamically because the links to it have href's to a separate page.
The thing I find confusing, is that when I click the back button from the detail page, there is an ajax call to grab the listing page. I don't see why this has to happen as the listing page is in the DOM.
Not only is it inefficient, but let's say I had filtered the list on the listing page, that information will be lost when the listing page reloads.
I found a workaround where have the empty listing page on the first page that loads, I then dynamically modify it by making the ajax call myself. When I do this, it doesn't make the ajax call when going from the detail page back to the listing page.
Any help would be appreciated.
jQuery Mobile removes pseudo-pages from the DOM after they are navigated away from (this is for external pages only). You can stop this behavior on a single pseudo-page by adding the data-dom-cache="true" attribute to the data-role="page" element for the pseudo-page:
<div data-dom-cache="true" data-role="page">
...
</div>
There are other ways to enable (well disable really I guess) this functionality; you can read about them here: http://jquerymobile.com/demos/1.0.1/docs/pages/page-cache.html
Related
When the user clicks on a link to a subpage, I want to store data in sessionStorage from the current page before leaving to the next page. Then when this new page has loaded, I want to apply the sessionStorage data on this page.
What complicates things is that the link is part a collapsing menu system. Which means that this system needs to update (which is also done on click) before the page data is stored.
So essentially, the wanted execution order:
User clicks link
Menu system is updated
Page data is stored
Browser loads the new page
Page data from the previous page loads and applies on the new page
My issue is the order in which everything is executed. I don't understand when the user clicks on the link how to control the order of when the actions are executed.
Thankful for help
I'm using JQM 1.3.2 and 1 page per html file. JQM automatically removes pages from the DOM that are loaded by AJAX. But there is a known issue (clearly stated in the docs and frequently discussed in various forums) where the first page is not removed. I'm wondering if there are any potential pitfalls with this workaround:
$(document).on('pageshow.firstPageRemoval', function (event, data) {
if (data.prevPage.length > 0) {
data.prevPage.remove();
$(document).off('pageshow.firstPageRemoval');
}
});
From my brief testing, it seems to be working as designed. The first page loads, and data.prevPage.length === 0, so it does nothing. After the next page transition, it removes the first page and removes the handler.
My question is, are there any issues that might crop up because I've removed the first page?
Only issue is browser history, basically you will remove page but it will still stay in history.
Of course there's a workaround. Instead of removing first page, don't have one in the first place.
Let your first HTML be blank, and load external page during that page document ready state. Unfortunately you will not be able to use pageinit (or similar page event here) because you will not have initial page to trigger it.
This way you will circumvent this problem and browser history will stay clean and intact.
I'm trying to figure out exactly what happens when you link to a same-domain external page with JQM. I know the new page gets added to the DOM, but if I cruise through 5 or so of these links, are all 5 now in the DOM?
Firebug is showing the initial page and the active page in the DOM and nothing else.
Chrome is showing variable results, usually storing the last page and the active page.
What exactly happens here?
Do I need to assume all my handlers on a page are lost when I change page? So I need to rebind them on each pageinit?
Easy way to check. Bind page create:
$('#pageID').live('pagecreate', function (event) { alert("Inserted to the dom") };
That triggers when the page is inserted to the dom. If the alert is triggered every time you enter the page, it means the page is not saved to the dom. And I think that is actually the case. But I am not sure.
I'm having problems with JQM beta1 (the same thing happens with beta2) and ASP.NET MVC 3.
I have several pages with forms, and they post to the same address of the page, then with MVC RedirectToAction the next page is called.
Initially I had problems with the back button, which I solved by adding the attribute data-url to the page div.
But now I have this page that has a server-side validation, so posting back a page with the same data-url, when the server-side validation keeps the user on the same page, and then user hits the back button, the url on the browser is changed correctly but the page is not rendered again, it seems to remain the same, then if I hit the back button again I can see the correct page (2 steps behind page).
This should not be so problematic, since there should be many sites using forms with validation and needing the back button working properly.
Is there any special attribute that needs to be set on the page div when the post stays on the same page?
Thanks!
I have a website which is basically a single page containing a bunch of dynamic content. In normal operation the user should never leave this page. To handle/report certain errors though, I need to redirect to an error page. So on the error page I want to provide a link back to the normal page which provides the app the information required to rebuild all the dynamic content which was previously open.
I think I can rebuild the page by parsing the querystring with javascript and reloading dynamic content. I'm not sure if this is the best way, but I've got it working. So href in the link on my error page needs to look something like:
MySite/MyController/MyAction?1,5,8,9
where the numbers in the querystring basically indicate the Id's of content sections to load in on document.ready.
I'm now stuck on how to generate this link though. I think I need to pass these numbers into the controller somehow, so the controller can pass them into the error view which will then generate the "back" link.
I have a standard html form for uploading a file:
using (Html.BeginForm("MyAction", "MyController",
FormMethod.Post,
new { enctype = "multipart/form-data" }))
{ /* ... */ }
I then have a button which calls the jQuery .submit() method on the form.
So, the question, when I click on the button which submits the form, how can I attach the additional data so I can access it in my controller?
Hope that's clear, if not let me know and I can provide more detail. Thanks.
Edit: It occured to me that I could submit this information with a hidden field in the form. I'll try that if I can't find a better way, but I'd like a more generic solution if possible as I have a number of forms on the page and ideally I'd like this data available to any/all of them.
your url should be biult just before sending the form with .submit() not in Html.BeginForm tag....
i can't see the problem over here... what exactly you are dealing with?
I know this is not quite what you asked but instead of going through the hassle of redirecting the user in the first place why don't you show a modal window (a jquery based one) that contains an iFrame. The iFrame href can be determined by the calling page and can show the error page.
Not sure if this helps but I have used this technique and found that I do not need to worry about getting the user back to the place where they started from. Additional to this you will not need to rebuilding/reloading the orignal content as it will still be on the calling page.
****EDIT**** After reading your comments maybe you could do the following...
On the link click - open up a modal popup pointing to an iframe.
The iframe calls the action on the controller to download the file.
The view could say "Downloading file... please wait, click here to close etc."
If the action throws the error then redirect to the error page as normal as it is within the iframe modal popup.
This way you do not need to leave the current calling page.