Browser doesn't execute javascript when I move back - javascript

I have a script that toggles checkbox when page is loaded (by default it's unchecked).
Example:
if (bla bla bla) {
$('#test').trigger('click');
}
It works as expected, but if I go forward to the next page and then go back again (or restore closed tab with that page), this doesn't work: the checkbox remains unchecked. I guess in this case browser doesn't execute js.
Is there any solution to resolve this issue? Thanks.

When you go back, (most browsers) reload the form as it was when you left the page, and then toggle the checkbox.
The best solution here might be to set the checkbox to checked rather than toggling it.
$('#test').prop('checked', true);

Related

Keep scroll position in ADF page

I have a page with few forms in it and a submit button to save the records. If there is any errors then I m displaying the error messages programmatically in faces message .
But after clicking on the ok button on the af message, the page scrolls to the top and I have to scroll down again to click the button.
Is there any way to save the scroll position in ADF . I tried to call Java script
Window.scrollto () method
But for other methods it's working fine but not after clicking on the af message ok button.
Please let me know any way to scroll down to the bottom of the page.
markosca already gave the correct hints as a comment.
I'll clarify a bit on this for the sake of a complete answer:
If your buttons trigger an action, always a complete new site will be loaded.
Even if the "new" site is equal to the old one, it will seem as if the site has scrolled up.
If your buttons have an actionListener registered, this scrolling will also happen. Even if you put an addPartialTarget(...) inside that registered Java-method.
So, how to solve this? It's easy, just use an actionListener and the attribute partialSubmit="true" on the button or link.
Only than a partial submit will be executed instead of a full page reload.
And don't forget to either use addPartialTarget(...) in Java or the attribute partialTriggers="..." on the components which should update because of that partial submit.

Chrome executing all JS again on browser back button

I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing

Stay on same tab after postback

I am using Samson O's very nice Easy Responsive Tabs to Accordion plugin on an ASP.NET page. On Tab 2 I have a Search button that when clicked executes some code in a code-behind and returns the search results to the page. Everything works except that the page goes back to the first tab when it's finished running the code in the code-behind. I want it to stay on Tab 2. How can I achieve this?
I have tried calling a JavaScript function to simulate the click of Tab 2 ($('#mycharities').click();) from the OnClientClick event of the Search button and also as the last thing on the Search button click event in the code-behind. Both options run the JavaScript but the page still goes back to the first tab once finished.
Answer to your question lies in the script for this plugin :
//Active correct tab
$($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab- active').css({
'background-color': options.activetab_bg,
'border-color': options.active_border_color
});
If you notice it takes [tabNum] to set the active tab. So you need to figure out the last selected tab num and in your custom javascript function that you need to set the appropiate css class to that tab. Then u will have it selected after the postback.
Best yet try to submit using AJax. It easy and you can avoid hassles.

SharePoint <button> elements perform an unwanted reload of the page

I have an aspx page on my SharePoint site, which I have included tags. For some reason, every button on the page will reload the page when clicked. Even the buttons with no attributes (id, class, etc) or functions will reload the page when clicked. How can I fix this issue? I can't even see what's going on in the debugger because I'm not calling any reload functions, so I have no idea where to place a breakpoint.
Thank you in advance for your help, I really appreciate it.
The problem here is with the <button> tag. Its default behavior is to act as a submit button unless otherwise declared and will reload.
To keep your <button> tag, add type='button' to the button element. I think that prevents the reload.
Or you could go with the ole <input> tag with a type='button'. That keeps the reload from happening as well.
Or some other html element with an onclick event will work too.
First search for a function called doPostback and set a breakpoint on the entry point and click a button. If you hit this breakpoint it could mean that auto post back is turned on for the control generating the button. However if you trigger that breakpoint you should be able to look at the stack trace to figure out how you got there.
If that doesn't work, use the F12 tools in the browser, start with the HTML section and search (Ctrl-F) for the word "click". Then go to the script tab and do the same for each JavaScript file. If all of the buttons exhibit the behavior there is most likely a click event registered. Possibly with jQuery that looks like this $('button') so that it matches all buttons on the page and registers a click handler.
If that doesn't find it, and you have access download one of the master pages from http://startermasterpages.codeplex.com/ and temporarily replace your master page with one of these. Take a screenshot of the scripts that are loading on your page first. Then add them to the starter master page one at a time until the unwanted behavior returns. Then set a breakpoint on every function entry point in that script and click a button and see where you land.

can window.onPopState() event handler know direction of navigation? (forward,backward)

i have a site that uses ajax navigation with the pushState() method and an onpopstate() handler.
when first visiting the main page, i display a default content (without ajax).
when someone navigates away from the default page and then goes "back," a null state is supplied when they should be returning to the default page. thus, they stay on the second page of the website instead of the first ( although the handler can easily use ajax to bring the initial content back).
my only way to fix this was to do a pushState on my initial page load with information on what the initial content is. with this method, the "back" button works great!
BUT if someone was at www.stackoverflow.com before going to my site, the goes "back" to stackoverflow and then "forward" to my site again, the initial content is shown, but then reloaded again because the "popped" state is not null.
so can i tell, in the onPopState() handler, whether the user is going backward or forward?
I've had some success with using the pageshow event in Firefox to trap that initial entry into the site through forward and back buttons.
can window.onPopState() event handler know direction of navigation? (forward,backward)
There is an issue. You can skip states (hold the back button, select the state you want). This makes it incredibly hard.
when someone navigates away from the default page and then goes "back," a null state is supplied when they should be returning to the default page. thus, they stay on the second page of the website instead of the first ( although the handler can easily use ajax to bring the initial content back).
You can fix that with History.js with it's optional data persistance.

Categories