This question has a reference to the solution posted here. https://stackoverflow.com/a/2600261/5086633
I am facing similar issue in IE but even after adding much delay 200 this is not working as expected in my application. The input box gets focused only intermittently, it skips to focus on the input field even after the page gets rendered in IE. I also tried calling the setTimeout function from $(document).ready(function(){ and $(window).load(function() { as specified below with no success.
This code works fine when I test it locally and as a plain html file but not in my application.
Could anyone help me fix /or provide a clue to debug/ this issue in IE, so that input field gets the focus each time the page is rendered in IE?
Footnote:- It is working fine in Firefox (without delay) and in Chrome small delay is required for focus to work.
$(document).ready(function(){
setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);
});
setTimeout(function() { document.getElementById('testfocus').focus(); }, 200);
<html>
<head>
</head>
<body>
<input id="testfocus"/>
</body>
</html>
https://stackoverflow.com/a/2600261/5086633 is for IE7.
Following works each time on all browsers.
<body onload="document.getElementById('testfocus').focus();">
You can see if the favicon shows a rotating circle(loading) as the focus will happen only when the loading is complete.
I tried with following which is working on all browsers:
<html>
<head></head>
<body onload="document.getElementById('testfocus').focus();">
<iframe src="http://www.healthcarereformdigest.com/wp-content/uploads/2014/07/forms.jpg"></iframe>
<input id="testfocus"/>
</body>
</html>
(Added iFrame and that image as its heavy and it takes looong to load).
If its failing in your app, you can press Tab to see which element has the focus and then Inspect that as it might have multiple focus() statements.
Very odd. It works for me... which isn't much of an answer (win7, IE11, jquery 2.2.4). What specific IE/OS/Jquery version are you using?
Does the "run code snippet" button below your code above work/not work?
What about this jsfiddle: https://jsfiddle.net/u68gmzyc/ ?
$(document).ready(function(){
document.getElementById('testfocus').focus();
});
Also... can you check the console for any javascript error messages? Maybe something else is failing and the side effect is that your code is not actually running?
Also, if the aim is merely to focus a specific element on page load, you could add the autofocus attribute to it. Then it'll focus automatically without the need for JS.
<input type="text" autofocus="autofocus" id="testfocus" />
Fixed this issue myself played around with this focus delay function, increased it, and found that the input button gets the focus when the page is rendered setTimeout(function() { document.getElementById('testfocus').focus(); }, 200); However, I don't know the real reason why this delay is required in IE and Chrome browsers.
Related
So, I'm quite new to JQuery, and AJAX in general. I've made an app to retrieve data from Spotify's API, which writes to song.txt (This part works just fine. It updates every second, as it should.) and the HTML file will pull the contents of song.txt and change the div with id of 'track'
<!DOCTYPE html>
<html>
<head>
<title>Camashima's Site</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
setInterval(function () {
$(document).ready(function () {
$('#track').load('../output/song.txt');
});
});
</script>
</head>
<body>
Currently Playing:
<div id="track">
.
</div>
</body>
</html>
The JS code posts the html file to the server just fine, and I see Currently playing: but nothing else. So that tells me it's not the issue. So, what am I doing wrong here? It should be loading song.txt into the "track" div, right?
Also, I'm using Goorm-ide to host my container, and the console isn't as in-depth as chrome's dev tools.
Expected: "track" div to be replaced with song.txt contents
Result: Nothing happens.
Whether or not the AJAX part works, the main problem here is that you're (1) adding tons of document.ready events and (2) doing so indefinitely in very rapid succession.
You can correct this by (1) using one document.ready event and setting your interval within that and (2) providing a delay to the interval, even if it's just one second. For example:
$(document).ready(function () {
// execute this code once, and only once, when the document is ready
setInterval(function () {
$('#track').load('../output/song.txt');
}, 1000); // perform this interval operation every 1000 ms
});
From there, you can then begin to reasonably debug the AJAX issue (if there even is one). I realize in a comment on the question you indicated that Chrome developer tools are disabled. So you'll either need to correct that or find another tool to use to debug it. But you're essentially going to want to observe the AJAX requests and responses. Confirm that the address being requested is what you expect it to be, and observe the response from the server. The client-side code here is extremely simple and "works" just fine, but if the overall result isn't what's expected then your only recourse is to debug those interactions with the server.
Chrome : chrome update Version 83.0.4103.97 (Official Build) (64-bit)
Flow
Function function_name is called from a page (this page remains the main parent page in the whole scenario) which has a table with multiple records and a record has a hyperlink which fetches more data and displays in an overlay/popup.
The code etc. mentioned in the code section in the bottom is on that Popup/Overlay piece where form & iframe exist and facilitate the whole process.
On Form submit here another piece of html code is called which is then populated in iframe, please check the target of the iframe.
Issue
The form submit was working earlier for all browsers and post new update it's not
working on latest chrome build but it is working on other browsers at the moment without any issue.
Explanation of not working
I have added logs, it works as expected till form submit line is called. On Form submit we expect the new html piece to be called and then that to be loaded in the iframe. That page never gets invoked on the latest chrome build (does get invoked in all other browsers), there is no reflection on network tab either which should happen because on form submit another file is called. (happens in all other cases)
Observations
The popup flow is initiated from a button click in parent page (as explained in the flow)
< a href="#" onclick="function(this,val1,val2); return false;">
The code for the same is given above, if the same piece of code is removed from the parent page and then replaced with something else and then again changed back to this same code then it works normally. (I have no clue why!)
The behavior is erratic too, once in a blue moon even on latest chrome it works properly, once or twice. But the efficiency of system on all other browsers is 100%.
Code : Minimal (Comments are added for understanding separately)
<div id="divid" class="dialog" title="">
<!-- Iframe -->
<center>
<iframe name="frameid" id="frameid" src="/images/somegif.gif" width=820 height=400 frameborder=0 style="border:0; padding:0; margin:0;"></iframe>
</center>
</div>
<!-- Form -->
<form id="formid" name="formid" method="post" action="/somefile.html" target="framename">
<!-- Some Form Elements -->
</form>
<script>
//Javascript
$(function() {
$("#divid").dialog({
width: 860,
autoOpen: false,
modal: true,
resizable: false,
open: function(e, ui) {
$(this).siblings(".ui-dialog-titlebar").find("button").blur();
},
close: function() {
jQuery('#framename').attr('src','/images/somegif.gif')
}
});
});
function function_name(val1,val2) {
var form_obj;
form_obj=document.getElementById('formid');
if (form_obj) {
//some operation, validation etc.
jQuery("#divid").dialog('open');
somefun(form_obj, "var_name", var_name); //They are working fine
somefun2(form_obj, "var_name2", var_name2); //They are working fine
form_obj.submit();
}
}
</script>
I just noticed that form name and id is same, same goes for the iframe. The developer who wrote this is not with us anymore, in short, not my code.
#Gandalf, found this issue on chromium.
Issue 1092200: Submitting form whose target is an iframe randomly fail siliently
A bug fix for it was merged into 84, but a bugfix for Issue 1092313: Form submission takes precedence over window.location navigation
caused a regression, and looks like they are still looking into it..
We are also experiencing the same problem, and watching 1092200
I have two pages: parent.html and child.html.
child.html is included in parent.html with an iframe.
The child.html page bind a scroll event on its parent.window in order to detect when a scroll event is triggered at the top level. The child page set a property on the parent.window in order to display and update an increment each time the scroll event is triggered.
Here is the code of the two pages:
Page parent.html:
<html>
<body>
<iframe border="1" src="child.html"></iframe>
<div style="height:1600px; width:300px; background:gray;">
A div just here to activate the scrollbar
</div>
</body>
</html>
Page child:
<html>
<body>
<a target="_self" href="">Reload this page</a>
<div class="test"></div>
<script type="text/javascript">
parent.window.increment = 1;
var onScroll = function (event) {
parent.window.increment++;
$('.test').html(parent.window.increment);
};
$(parent.window).off('scroll');
$(parent.window).on('scroll', onScroll);
</script>
</body>
</html>
The problem with this setup is the following :
On Chrome (it works on Firefox), if you load the page for the first time the parent.window.increment is correctly incremented by 1 each time a scroll event is detected (when the parent page scrollbar is moved). But if you press on the "Reload" link the parent.window.increment is no more incremented by one when a scroll event is triggered but by two. If you press again on the Reload link the increment property is incremented by 3, etc.
A working example can be found here : http://jsfiddle.net/cm0s/ngZkq/16/.
I'm not really looking for a solution (the code I posted is just an example of a problem I'm facing in another project). I'd rather like to understand what's happening. If I'm making a rookie mistake?
Here are two things I really don't understand :
1. parent.window.increment not reset
I don't understand why the increment property is not always reset to 1. When we press on the "Reload" link the following line is always executed :
parent.window.increment = 1;
2. Works on Firefox but not on Chrome
What I also don't understand is why it doesn't work on Chrome but works fine on Firefox. With Firefox if you try the fiddle demo and click multiple times on the Reload link the parent.window.increment is always incremented by 1 when you move the scroll bar.
EDIT NOTE:
I also created a fiddle to show the same problem with a click event :
http://jsfiddle.net/cm0s/WYy6U/3/
And another one which use the onscroll javascript function (as explained by #hex494D49) and thus works perfectly in all browsers :
http://jsfiddle.net/cm0s/D6j5G/1/
EDIT NOTE 2:
I posted a ticket on the jquery bug tracker: http://bugs.jquery.com/ticket/15204.
The ticket has been closed. The bug has been described as "an unusual browser behavior".
You just might found a bug in jQuery :) or at least a weird behavior of jQuery's onscroll event implementation. Perhaps, this could be a shorter answer on your both questions but let's analyze this behavior in more details.
If you add this console.log(parent.window.increment); in your code, you will see that at the first time Chrome is increasing the value of increment value just fine; but at the second time, the amount of the scroll is increasing by two as following 1-2, 3-4, 5-6, ... and that's way the increment value within the div seem disordered (like 2, 4, 6, ...); at the third time Chrome starts skipping steps like this 2-3, 5-6, 8-9, 11-12, ... and the values within the div came in as 3, 6, 9, 12, ...; at the fourth time values goes like this 3-4, 7-8, 11-12, 15-16, ... which makes the increment value within the div even more fuzzy.
On the other hand, the snippet above works fine in Firefox but the amount of scroll isn't increasing by 1 but at least by 5 and this could be seen only observing the console. Maybe this could be adjusted - I tried to change a few values related to scroll in Firefox about:config section but without success so far.
Then I just thought I could change your snippet a bit (excluding jQuery) and here we are - the snippet below works just as expected in all browsers. The scroll amount on Firefox is still about 5 but you'll see that the increment value on reload is always resetting to 0 and there are no skippings as mentioned in case with jQuery snippet.
// Modified code of child.html (iframe) file
// HTML
<a target="_self" href="">Reload this page</a>
<div id="test"></div>
// JavaScript
parent.window.increment = 0;
parent.window.onscroll = function(){
parent.window.increment++;
document.getElementById('test').innerHTML = parent.window.increment;
console.log(parent.window.increment);
};
Working jsFiddle (Tested on IE, Firefox, Chrome and Opera)
EDIT: As #NicolasForney (the OP) says in the meantime in his edit section, the same weird behavior is experienced using onclick event. I'd like to add that the same would be avoided not using jQuery, just as shown in the previous case with onscroll event.
<!-- HTML -->
<a target="_self" href="">Reload this page</a>
<div id="counter"></div>
// JavaScript
parent.window.counter = 0;
parent.window.onclick = function(){
parent.window.counter++;
document.getElementById('counter').innerHTML = parent.window.counter;
console.log(parent.window.counter);
};
Working jsFiddle (Tested as above)
This definitely leads to a bug which should be explored in more details in the meantime...
The following code gives me an alert with nothing but a # symbol inside it. Why?
EDIT: I should note that the code is inside a jQuery .click event...if I place it outside of that, it works properly. Here is the fuller code:
$('#continue').click(function(){
var _href = $("#continue").attr("href");
alert(_href);
});
Continue
EDIT2: This all works fine in jsfiddle. But in the xcode iphone simulator I just get #.
Judging by only the code you typed, probably the code runs too early. Try wrapping the JS in
$(function() {
// your code here
});
Or
$(document).ready(function(){
// your code here
});
Update:
Well, since it's an iPhone simulator, it changes things. Remember, nobody can help you unless you give all the details of the problem, no matter how much experience they have.
Did you try the touchstart / touchend / tap events instead of click? As far as I know, Apple has been having problems with the click events. Also, click events on mobile devices will have a slower response (a delay of approx 300ms if I remember well) so you're better just using touch specific events.
What are you building? Is it a mobile web app or? Will it run in a standard mobile browser or something like PhoneGap etc?
Update2:
Ok. It works as long as the code is not called on Click. This eliminates the possibility of another piece of code replacing your "href" with another value because that code would have to be inside your $('#continue').click(function(){ }); block.
The click event is simulated on a touch phone, that's why the touch events are faster (they are native) and less likely to cause problems. You should also make sure that you return false there and not follow the link, that might be what's replacing your "href".
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#continue').click(function(e) {
var _href = $(this).attr('href');
alert(_href);
e.preventDefault();
return(false);
/*
the return is legacy code, used by some
browsers to detect if current event handler
is braking default behaviour
the e.preventDefault() function is the jQuery
way to do it
*/
});
});
</script>
Continue
Without this line the link is followed and a refresh occurs killing the current script.
https://github.com/jquery/jquery-mobile/issues/3777
First thing to mention is that my code is working in IE8 and Google Chrome.
It's only under Firefox that I have the problem, tested it under Ubuntu and Win XP same issue with FF.
I'm tryng to display an ajaxloader gif image while I am refreshing the page.
At the very beginning I am using jquery .ready() function to hide the div#refreshing that would display the image.
When we click on the refresh link then I show the div#refreshing. My problem is that the ajaxloader.gif is not turning
like it should be it becomes to be a fix image. But as mentionned it works under chrome and IE.
Any idea why?
HTML:
<div id="refreshing">Refreshing</div>
Refresh
CSS:
#refreshing {
font: 14px Verdana,Arial;
color: #00264b;
background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}
JavaScript:
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.href = window.location.href;
$("#refreshing").toggle();
}
One more thing is that the firefox config image.animation_mode is set to normal.
Plus if I look under firebug the image is animated.
thank you everyone.
The reason it doesn't work is because Firefox stops all gif animations on page refresh.
In order to make this work you should load the page (or better yet, only the updated parts) via ajax and overwrite the existing content with the new.
I finally manage to get it to work with a coffee on a good Wednesday morning.
Here is the code, while Firefox was stopping the GIF image to work and I was using it to display
the user that we were refreshing the page, I though it could be just the way I was refreshing the page that was incorrect.
So I search another way of refreshing the page in Javascript some where using window.location.reload();
I tried it, but there was only one problem with this method, my input that I desactivate while refreshing were still disabled on refresh.
I went in the process of reactivating them within a $(document).ready(function() { //activate input });
At the end it was working fine, but I still found the reactivating odd.
I finally search for the difference between window.location.href=window.location.href and window.location.reload()
Got it here -> Difference between window.location.href=window.location.href and window.location.reload()
So by passing the argument true to the reload function we tell the reload function to not post the old POST data and get a fresh copy of the page from the server.
That fixed completly my issue.
I didn't change the HTML code neither the CSS
<!-- JS -->
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.reload(true);
$("#refreshing").show();
}
Thank you everyone.
Another sollution is to use a html5 canvas element for animated loaders. It should still work fine on page reload.
This generator works pretty well and is cross browser compatible http://heartcode.robertpataki.com/canvasloader/