I have a page that uses JQuery UI Tabs and some other bits and pieces. When a user opens this page and quickly clicks on some tab, after a second or so the page reverts to the first tab again!
I am trying to use Firebug to see what's going on, but as far as I can see, when that reversion occurs the body tag highlights, but nothing within it. I am a novice with Firebug - how can I use it to better understand what's going on here?
I can only take a guess without a concrete example, but it sounds you're initialising the tabs twice. The tabs must already be enabled which is allowing the initial navigation between tabs. Then a second initialisation of the tabs is resetting the view back to the first tab.
You are initialising the tabs inside $(document).ready and not window.onload, right?
Related
I need to build a chart with the Chart.js library.
I've got a strange behavior with Firefox: the charts behaves randomly, sometimes it's OK and sometimes I need to click several times on my button.
Does anyone know of a method in JavaScript to force the reload via a simple button like this?:
Refresh the page
To see the other ways to reload the page you can check this comment https://stackoverflow.com/a/7632005/17542117, but most likely browser should be reloading with your code snippet itself.
If you are still facing the issue try the following things,
try to narrow down the places where you have to click multiple times
check if you see an invisible overlay over the button which could be blocking your click action. (try placing the button from the top to the bottom of the screen while scrolling and try clicking it at multiple positions, this might help you too to find if invisible overlay is only in a specific portion of the screen)
try to see if your click function throws any console errors which can block your JS code execution on the click action.
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
I´m developing an app with jQuery Mobile and Phonegap where I need to check a variable before the first page shows up. It´s only 3 lines of code, where I check if a variable is true or false. If it´s true the user gets redirected to another page with mobile.changePage().
So is there a way to check this variable before the user gets to see the first page. (Must be executed between splashscreen disappears and first page shows up.
Thx for your help
You need to listen to pagebeforechange event and not pagebeforeshow. Because the first one fires before transition triggers and most importantly before updating browser's history.
pagebeforechange: Triggered twice during the page change cyle: First prior to any page loading or transition and next after page loading completes successfully, but before the browser history has been modified by the navigation process.
pagebeforeshow: Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off.
Related post: https://stackoverflow.com/a/19522643/1771795
Demo
Take a look at JQM's pagebeforeshow event. Documentation is here.
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.
I came across an interesting bug feature tonight when writing a handler for window.onresize in Chrome (the latest version 6.0.472.55). First open two tabs, then in the first tab open this jsFiddle.
Resize the window at will and the dialog box works as expected. Now, try switching to the 2nd tab -_-. Why is resize firing when the tab is changed? Could someone provide insight/more details if I need to file a bug?
The bug has been filed with Google. For the time being, I've just ignored it since my actual onresize handler doesn't display alert boxes.
Well how about that? Sounds like a bug. I would guess that onresize is listened-for by a combination of behaviors, probably new data about the page size that, for whatever reason, is coming in when a tab is focused.
In the version I use on Windows, 5.0.375.127, it doesn't happen, but if I actually resize the window, the resize event fires twice.
Knowing it's there, you can take a step to defeat it (that Google ought to do for you eventually). Wrap an if statement around your handler that checks for an actual change in the clientHeight or clientWidth if you need something to happen only if the event (as we understand it) actually occurs.
From the bug report:
When using Dev Tools in splitview and switching to a Tab without Dev
Tools opened in split, the resize-Event will be fired.
So, if the next Tab doesn't have the same window size, resize() will
be fired.
Without a working knowledge of how Chrome handles tab switching and page rendering, my guess is as good (or bad, depending how you look at it) as the next guy's. I would guess that rerendering the page, or reloading the already rendered page if it caches it, triggers the onresize event. This is what happens when the tab is switched. Following my theory, I would guess that Chrome doesn't trigger the resize event on initial page view because it has been designed not to. But again, as I don't know how Chrome handles tab switching internally, this is just speculation (food for thought).