I've rewritten my family web site using JavaScript (JQuery) making Ajax calls to PHP on the back end. It's your standard "bunch of image thumbnails and one main image, and when you click on a thumbnail image the main image changes" kind of thing. Everything is working as expected when using Firefox, but on IE, when I click on a thumbnail, the main image changes to the one I clicked and then immediately changes back to the first one. I have tried MS Script Debugger to no avail; I set a breakpoint in the JavaScript code that starts the Ajax call, and when I click the thumbnail the breakpoint fires. Then I hit F5 and it continues but does not fire again. If I use Wireshark to watch the actual TCP packets over the network, I can see that we are definitely sending more than one request to the server. I cannot figure out where the second query (the one to revert back to the original image) comes from.
Any suggestions? One example of what I'm talking about is here.
Debugging through your site here's what it looks is happening:
After the first image is pocessed, the resize event is being thrown, so this code gets called:
$(window).bind("resize", function(){
ResizeWindow( 'nicholas-1' )
});
which as you know reloads your gallery. Now I can't tell you why this is occurring but this is where the trouble starts.
For future reference to debug this I used VS2008 to attach to IE. I then put a break in $ajax() at:
// Send the data
try {
xhr.send(s.data);
} catch(e) {
jQuery.handleError(s, xhr, null, e);
}
Then I simply hit F5 which is run for the first two ajax calls, then I open up the call stack window when I found the rogue ajax call and walked the call stack back up to the function I posted earlier.
Good luck.
You could use Fiddler, a free debugging proxy for Internet Explorer. It was a great help for me many times when I had to debug specific,server-related problems on IE.
Here is an Introduction to Fiddler on MSDN.
alt text http://i.msdn.microsoft.com/Bb250446.ie_introfiddler_fig04(en-us,VS.85).gif
IE is a piece of work, isn't it? Have you tried something like this?
var inProcess = 0;
function eventHandler() {
if (inProcess == 0) {
inProcess = 1;
// do stuff
setTimeout('inProcess = 0', 5000);
}
}
Cute kid, by the way.
Related
I have a very peculiar scenario.
After saving my web page i.e after my POST request is successful, my buttons do not work for the first click.
After having the first click on any part of my web page, my web page starts working fine. Actually, the API calls doesn't happen on the first time. It happens only after the first click. This gives me an error popup, as written in code.
I am using backbone.js, javascript, jQuery, underscore.js, marionette.js, backbone stickit, etc.
So my question is
1. how to reload my web page so that it redirect to the same page with same tab openings and everything.
location.reload(true) or location.reload()
takes me to my home page instead of the page I was in.
Where to call this reload method, after onRender of that page or immediately after save button has completed its work.
** it seems that the web page looses focus and after having one click at any where on the web page, it brings the focus back.
EDIT
I also have an alert message on my web page stating that the changes are successful. Can I possibly create a disabled screen when that alert message comes, and make that screen enable only after first click at anywhere on the screen. If yes, can anyone help me to achieve the same.
EDIT II
I went through the whole scenario, debugged till ajax called the API, and I found out that in first click after save, my collection is being cached, and hence ajax never calls the api, whereas in the next click the the cache gets deleted magically, since I don't know yet from where, and the calls goes. So, is there any way I could stop this caching from being done.?
$.ajax= function(options) {
if ('GET' == options.type) {
if (false !== options.cache) {
var url= options.url+'?'+JSON.stringify(options.data); // not the real url, but an incredible simulation
return readCache[url] || (readCache[url]= oldAjax.apply($, arguments)).fail(function() {
delete readCache[url];
});
}
} else {
readCache= {};
}
return oldAjax.apply($, arguments);
};
readcache[url] is true for the fist time, and hence oldAjax.apply never gets called, whereas the second time it is false.
the code is from backbone-extension.js
This might be a stupid question, I cannot find the answer though:
I am animating some shapes in a HTML/JS page displayed by an Android WebView. To do so I use the Javascript setInterval() method:
var animateThreadHandler;
function animateThread() {
// animate some stuff here...
}
// This function is called from the HTML page: <body onload="onBodyLoaded()">
function onBodyLoaded() {
animateThreadHandler = setInterval(animateThread, 200);
}
Later, in the code of my Android Activity this time, I switch from this HTML page to another one, keeping the same WebView:
mWebview.loadDataWithBaseURL(baseUrl, htmlContent, HTML_CONTENT_TYPE, HTML_ENCODING, null);
But I never call clearInterval(animateThreadHandler) from the Javascript. Even though this works well, I wouldn't like to drain the user's battery by doing useless Javascript function calls that would end up in errors that I couldn't see.
I monitored the behaviour of the JS animateThread() function by making it to produce logs (see comments), and the logging stops once the WebView is reloaded. But this doesn't prove the scheduler is cleared: calls to animateThread() may keep occurring - and silentely failing as the JS code was unloaded at Webview reload time.
The rationales behind this doubt reside in what the W3School says:
The setInterval() method will continue calling the function until
clearInterval() is called, or the window is closed.
I neither call clearInterval() nor I "close" the window (I'm just reloading it), so I am really not sure of the underlying behaviour of my code. Any idea?
I'm attempting to use a QR code scanner plugin for a project I'm working on, basically I'm modifying the example posted below so that instead of just scanning the code and outputting the string value to the page, I actually want it to physically open the link using the InAppBrowser.
Now whilst the function I've added fires (as far as I can tell) the InAppBrowser doesn't get invoked, however if I click on a link pre-embedded in the index page after trying a scan, it briefly shows the page I had tried to load via scanning before then loading the contents of the pre-embedding link (if that makes sense).
Original Demo https://github.com/wildabeast/BarcodeDemo
My Fork https://github.com/desrat/BarcodeDemo
Any help would be appreciated.
EDIT: Jonus Solution works great, but what if I wanted to move the function out of the alert callback and just open the browser immediately?
I already tried re-placing the alert with
namedFunc(result.text);
and
function(){namedFunc(result.text);};
When you pass namedFunc(result.text) as callback, the function is invoked immediately and actually its result (undefined) is passed.
Try:
navigator.notification.alert(result.text, namedFunc.bind(null, result.text), 'Scan Result', 'ok')
Or:
navigator.notification.alert(result.text, function() {namedFunc(result.text);}, 'Scan Result', 'ok')
UPDATE:
Your second question is hard to answer. Using namedFunc(result.text); should be right. After some testing (with iOS) it seems to me, that the InAppBrowser is opened but not shown, because I can inspect the opened website with Safari. This is quite strange and I have no idea what the reason is. Maybe it has something to do with the closing barcode scanner.
However you can fix it by using a timeout:
window.setTimeout(namedFunc.bind(null, result.text), 1000);
or maybe you prefer:
window.setTimeout(function() {namedFunc(result.text);}, 1000);
This is surely not a really good solution because the user has to wait a second before the browser opens and I can't even guarantee that one second is always enough (e.g. on slower devices), so it's a bit risky.
I have to disallow the user from browsing back to the previous page in the browser.
To achieve that, I put that piece of code below in the layout pages of my ASP.NET MVC app (in addition to sending appropriate response headers from the server):
function noBack() {
window.history.forward();
}
$(document).ready(function () {
$(document).on("pageshow", "body", function (event) {
if (event.persisted)
noBack();
});
});
...
<body onload = "noBack();">
There are two problems I am looking for the solution to:
1) Currently, this code behaves strangely but consistently on all browsers. What it does is, when I press the Back button on any browser, including IE, it browses back to the previous page for a moment, it loads it and displays it nicely, and then browses forward again to return to the page we were viewing when we pressed the Back button.
This is irritating. How do I get rid of this?
2) The pageshow event, as I understand is not supported by IE. Please tell me if there's an alternative for IE? I need to support IE 8 and upwards in addition to FireFox and Chrome.
Side note: I know it's not a good practice to mess with the client's/user's browser and it's better to just disable output caching by having the server send the appropriate response headers, but my client insists that I also disable/disallow the browser's back and forward button function.
In your javascript file, just put this at the top of the file (or on your _layout page):
window.history.forward();
Every time the script is loaded, it will go forward. If it can't go forward, it does nothing. This essentially disables the back functionality.
I am trying to use a really old page on a website I do not have control over (so I can't edit it's resources).
The problem is that it is redirecting the page via javascript (to a 'we don't support this browser' rubbish), via setting document.location before I can set any breakpoints to then debug/workaround.
Is it possible to break as soon as the DOM loads, preferably in chrome?
Disabling javascript stops the redirect, but chrome does not allow me to view any scripts to then place break points.
FireBug has a "Break On Next" feature. I'm not sure if it will work in your case, but it might be worth giving it a quick try: https://getfirebug.com/doc/breakpoints/demo.html#suspend
It seems like Chrome likes to do something to prevent you from seeing the code when you click the stop button before the page finishes loading. It'll say something like window.script123456738391=1;. That makes it so you can't set a breakpoint at the right spot inside the code, especially if there's a redirect on the page before you get a chance to pause it.
What I found you can do is set a breakpoint on that first line. Next time you load the page it will break on the very first line, regardless of what it is. Then you can see all the code the page would load and set breakpoints wherever you want :)