I have a website having frames. Clicking on button in one frame updates the pages to be loaded in other frames. Now when user press the back button few of the frames load previous pages. i want user not to move back to previous page.
I used the code history.forward() on onload event of all my pages.
This works fine when back is pressed. User got navigated to most recent page always.
But the case is suppose user navigate to number of pages by clicking on button in first frame which updates the pages to be loaded in other frames. After navigation user select a page from the list of browsing history, then it is move forward to only one page, not the last page he was viewing.
This Happens in IE.
In firefox it works fine. User can select any page from the browsing history, he is relocated to most recent page
My opinion is, you should review your concept, because you want to "reconfigure" the browser's navigation buttons. Disabling browser features is in my eyes old fashioned.
I used the code history.forward() on onload event
Try following this way:
In the head section, insert the javascript:
var historySize = history.length;
Then replace in onload event: history.forward() by history.go(historySize - 1). A positive value means move forward to a particular position in browser's history object (array).
I cannot guarantee that it will work, but it is worth to try out.
write this code between script tags
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
Related
Is it possible to alter DOM in beforeunload handler? Chrome seems to apply DOM modifications after the user pressed "stay" in browser alert about leaving the page, and I want a part of the page to be hidden while this alert is visible.
See the demo:
<script>
window.onbeforeunload = function(e){ document.getElementById('a').style.display = "none"; e.returnValue = "adios";}
</script>
<div id=a >This text should disappear when the user tries to leave the page</div>
https://jsfiddle.net/qmatic/6sLp7rmq/
The only solution I have so far is to animate the div to opacity:0 and to have a code in setInterval that constantly resets this animation. While the code is running the div is always visible. Chrome stops all the code when it shows an alert, so the animation finally runs till the end and hides the div. But it's a terrible solution - I'm constantly updating the DOM to reset the animation. Does anyone have any better ideas?
The process being executed by Chrome appears to be:
1) call the handler, waiting synchronously for its return value
2) if the return (event.returnValue) is suitably undefined, continue the unload
3) otherwise present a modal popup of some kind, getting the user's permission to cancel the navigation.
4) if navigation is cancelled, stay on the page and apply a refresh cycle to the page view.
I have stepped through an onbeforeunload handler in the debugger, and when I do so, style changes WILL take effect before the modal dialog appears instead of after it closes. This seems to indicate that using the debugger introduces additional DOM refresh cycles that would otherwise not occur in normal running. I am trying to find a way to get one of these refresh cycles to occur programmatically from within the handler, but so far no luck.
In other browsers, there seems to be refresh cycles inserted between steps 1-4 above, giving the desired behavior.
I have a Single Page Application that has two pages - the first page contains a Data View view control (I used the wizard to create the pages - I did not create any custom controls as the entire application only contains 4 pages!), the second page then displays the document selected in the Data View control. This works perfectly! My problem is that the documents that are displayed in the Data View Control are not being refreshed - I need to do a manual refresh for them to show up. Not a problem I though, just do an automatic refresh every 5 seconds (there are only going to be about 20 users using the application):
<meta http-equiv="refresh" content="5; URL="></meta>
this refreshes the page perfectly - if a user is on the second page s/he gets bumped back to the page with the Data View control (i.e. Page 1) and does not stay on the open document (ie page 2).
How can I get the Data View control to refresh periodically without being bumped back to the Data View control?
Thanking you in advance
ursus
I don't think you really want to refresh the view every n seconds as that has the possibility of becoming a huge performance issue, plus the cause for weirdness as you pointed out. There are 2 ways to approach this:
In the Application Page properties, set resetContent to true
Create a onAfterTransitionIn event to do an XSP.partialRefreshGet on the data view or it's container. This way when someone lands on the view it'll refresh it's contents. Below is an example:
var widget = dijit.byId("#appPageName");
dojo.connect(widget, "onAfterTransitionIn", function(moveTo, dir, transition, context, method){
console.log("onAfterTransitionIn args=",arguments);
var appPageChildren = dojo.query("[id='" + appPageName + "']").children()[0];
var contentId = appPageChildren.id;
console.log("contentId=",contentId);
setTimeout(function() {
XSP.partialRefreshGet(contentId, {});
},200);
});
Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.
Is it possible to create lazy loading like pagination with richfaces? My idea would be to catch the event of scrolling on a specific page and then rerender a part of the page.
So the flow would be
create 10 search results on a search result page
if the user scrolls
Then reload the result region with 10 additional entries
An option would also be to create a Facebook like "more" bar and to rerender the region, when the user clicks on the button.
What do you guys think?
How about using the ScrollableDataTable ? Might not be what you want if your results are searchresults, but it might work still..
http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf;?c=scrollableDataTable&tab=usage
If you want to automatically load more items as you scroll, you can create an anchor near the bottom of the page, and the detect when that anchor is visible, which will fire off an XHR request to re-load the component holding the results.