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
Related
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.
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...
I am making a webpage showing the frequency of searches for some searchterms in a table. Above that table are 2 radio buttons that enables the user to select if he wants to see distinct search results or all results.
When using this javascript:
$(function() {
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
this.form.submit();
});
});
It works fine. I can toggle over and over again, switching table values correctly. However, if I use this javascript:
$(function() {
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
$('form#searchTermForm').submit();
});
});
The form is defined as
<form id="searchTermForm" action="/searchterms.php" method="POST">
<div class="configDiv">
<input name="distinct" id="radio-choice-v-2a" class="distinct_radio" value="false" <?php if (strcmp($distinct, "false") == 0) {echo "checked=\"checked\"";}?> type="radio">
<label for="radio-choice-v-2a">Show total number of searches.</label>
<input name="distinct" id="radio-choice-v-2b" class="distinct_radio" value="true" <?php if (strcmp($distinct, "true") == 0) {echo "checked=\"checked\"";}?> type="radio">
<label for="radio-choice-v-2b">Show number of different people</label>
</div>
</form>
Some relevant php:
<?php
if(isset($_POST['distinct'])){
$distinct = $_POST['distinct'];
} else {
$distinct = "false";
}
?>
Javascript that I am using:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
Updating this to jquery mobile 1.3.1 does not resolve the issue.
It works fine the first time clicking the radio button. After that, no response at all. If I manually refresh the page, it works for one time again.
With the first script, the message "submit distinct_radio" is printed on the console, and that the console is cleared by the submission itself.
With the second script, the message "submit distinct_radio" is printed on the console, but the console is not cleared. It prints that message, and the POST request being done. However, the POST request is really done and the web page is updated correctly. Clicking again does not result in any message printed at the console, nor any request done.
With the second script, if I change the path after "action" to some non-existent one, a console message is printed every click, accompanied by a new attempt to do a POST request to the non-existing location.
I face this problem in FireFox, Chrome and Opera.
Next to curiosity, I want to use this to submit the form when the user clicks on the table header to sort. From there, I cannot use "this.form.submit();"
How can this behavior be explained?
Edit:
Thanks to #peddle (See answer below):
Seems some issue in Jquery Mobile. Deleting the reference to jquery.mobile-1.3.0.min.js makes it work over and over again (hence very ugly). Javascript references are like suggested at http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/ , so jqm 1.3.1 and jquery 1.9.1 are meant to cooperate.
This is not an answer but required more space than a comment, have you tried the following to see if it makes any difference:
$(function(){
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
$('form#searchTermForm').get(0).submit();
});
});
The former of your examples is using pure JavaScript to submit the form and the latter is using jQuery's version of submit. The above uses jQuery to find the form, but should use the JavaScript submit method. The above should test the following:
If the above works without problem then your issue is with jQuery's submit.
If the above fails, but produces a undefined object error, then jQuery can't find the form.
If the above fails but without error you have something very odd happening, or the JavaScript is not being evaluated for some reason.
update
Another thing to try:
$(function(){
$('.distinct_radio').change(function() {
console.log("submit distinct_radio");
$('form#searchTermForm').trigger('submit');
});
});
Now I would expect the above to have the same problem as $().submit() but you never know. Another thing that is possibly causing an issue is that you don't seem to have a submit button in your form markup. Whilst logically this shouldn't have any bearing on the situation, if you read through the jQuery .submit page they have this quote:
http://api.jquery.com/submit/
Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.
Whilst the above is only talking about using the enter key, it is possible that browsers/jQuery have other oddities/differences laying about when submit buttons are missing.. I am reaching however.
Beyond the above it is possible there is some interference between jQuery and jQuery Mobile (your specific version), or it could be a bug in jQuery 1.9.1 (I can't say I've used this much in production). If you investigate the source of the $().trigger() method, which is used when using $().submit(), you'll see it's doing a lot of "magic" — which is why it's probably better to use the pure JavaScript method when you can get your hands on it.
I am working on a webpage that uses a JQuery UI dialog (in modal mode) to display a form that is dynamically generated using Django. The basic flow is:
the user clicks a button
jquery (using AJAX) issues a get request that returns the html for the form which is then used to fill the dialog
The html contains a script tag that handles some UI on the form which loads fine and works as expected
the user than fills out the form and clicks "Done" and the form is submitted.
The issue comes in when the user makes an error on the form. The server responds to the post request (that submits the form) with the original form (including the script) modified to show the errors. This second time the script is loaded it gets a "Uncaught ReferenceError: $ is not defined (anonymous function)" The script is exactly the same as before when it worked fine. To be clear throughout this entire process the page is never refreshed.
Here is the gist of the javascript that takes care of the modal:
var add_container = $("#add_container");
add_container.dialog({...})
function show_form(form,response_func) {
add_container.html(form);
add_container.dialog("open");
$("#add_form").submit(function (event) {
return submit_form($(this),response_func);
});
}
function submit_form(form,response_func) {
add_container.append('<p>Adding...</p>');
//this is a trick to upload a file without reloading the page
form.attr('target','upload_target');
$('#upload_target').load(function() {
var response = $('#upload_target').contents().find('body').html();
add_container.dialog("close");
resp_obj = $(response)
if (resp_obj.is('form')) {
//***this is what reloads the form when there is an error
show_form(response,response_func);
} else {
response_func(resp_obj);
}
});
}
$('#add_link').click(add_link);
function add_link() {
$.get('/add_link', function(data) {
function add_response(response) {
//handle successful submission
}
show_form(data,add_response);
});
}
//...more stuff that is not important
This is the gist of the html returned from /add_link
<script type="text/javascript" src="/scripts/add_form.js" ></script>
<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- Dynamically generated form here !-->
</form>
The add_form.js is a pretty standard javascript file that uses jQuery. Its starts with $(document).ready(function () {...} ) and the first $ is where the ReferenceError occurs
The form needs to be dynamically generated based on what is clicked so I can't just put everything statically on the page. The script is not dynamically generated so it doesn't necessarily need to be dynamically loaded but I wasn't sure how to keep it in its own file, and also only have it run when the form is loaded. I am open to suggestions of alternative ways to accomplish the same effect.
Your form action is pointing to a different relative path to the one containing the jQuery framework script, etc.
<script type="text/javascript" src="/scripts/add_form.js" ></script>
<!-- src="/scripts" -->
<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- action="/add_link" -->
To make sure it's loading the framework after the form submission, just use something like the developer tools on your browser and check the head tag for the jQuery script src. Is it still there?
Thanks to MelanciaUK I realized that when I submitted my form to the iFrame the response was getting sent first to there where the script would run and error because the iFrame is treated as its own page and doesn't have access to jQuery loaded on the main page.
I decided to solve the problem by eliminating the dynamic loading of the add_form script and simply load it when the page loads just like all my other scripts. I created a custom jQuery event (using .trigger) in order to only have the script run when the add form is opened. This worked exactly the way I wanted it to.
Hope this helps anyone with a similar problem. If you have any questions feel free to ask!
The basics:
I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).
In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.
I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new article)
I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.
Here is the code for the button:
<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">
Here is the end of the javascript function that handles the saving of the data:
function submitbutton(pressbutton) {
...
<?php endif; ?>
submitform( pressbutton );
parent.$('sbox-window').close();
}
}
http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.
Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.
EDIT: A request was made to post the solution here, so here's a short summary
If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:
*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.
The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.
Lets follow along, first we must add this parameter to the URL created -
Open the item.php file located at:
Yoursite->administrator->components->com_k2->models->item.php
On or around line 646 - you will see some text that resembles:
case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;
So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';
Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!
So then we have to add the php to check for that - that's simple enough:
Open the form.php file located at:
Yoursite->components->com_k2->views->item->tmpl->form.php
In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.
The existing code looks like :
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<table class="toolbar" cellpadding="2" cellspacing="4">
When finished it will look like this:
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
<script language="javascript">
var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
method: 'get'
});
dummy = $time() + $random(0, 100);
XHRCheckin.request("t"+dummy);
parent.$('sbox-window').close();
window.parent.location.reload();
</script>
<?php } ?>
<table class="toolbar" cellpadding="2" cellspacing="4">
That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.
This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.
I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.
I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!
Try window.location.reload
You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.
I think you're looking for
parent.location.reload();
Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.
Check out jQuery fancyBox.
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
It' has a "Reload page after closing", function.
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});