I've got a problem when I want to go back with window.location.back() after using window.print().
When I click on my Print button, I'm redirected to a new page with the document to print and the print pop-in appear. On Chrome and IE, when we click on print into the pop-in, window.location.back() is triggered but not in Firefox ...
timeout(function () {
window.print()
window.history.back();
}, 500);
I've tried some possible solution like window.onafterprint or window.onbeforeprint events,
window.location.go(-1), but none works on Firefox.
Also, if I remove the window.print() line, window.location.back() works fine.
I've got no other solutions, could you help me ?
Are you sure you don't mean setTimeout?
Using Firefox, with the following html code:
<!DOCTYPE html>
<html>
<head>
<script>
setTimeout(function(){
window.print();
window.history.back();
}, 500);
</script>
</head>
<body>
<pre>Nothing here</pre>
</body>
</html>
seem to work just fine.
500ms after loading, the print dialog shows, then, it goes back in history.
Related
while trying to change the voices in the p5.speech, setVoice function just not working at all...
I've been tried both string and index, but still went wrong, is there anyone can help? I would be really appreciated!!
Thanks!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js">
</script>
<script src="p5.speech.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<button id='talks'>
click to talk
</button>
<script>
$('#talks').click(function(){
console.log('hi')
var talk= new p5.Speech()
talk.onLoad=Voices
function Voices(){
talk.listVoices()
talk.setVoice('Google UK English Male')
}
talk.speak("What's up")}
</script>
</body>
</html>
below is the output of talk.listVoices() :
enter image description here
Firstly my answer is not the full solution, but there are some simple SyntaxErrors in your example. Thats why it's not runable for me at all.
You are opening click( but didn't close it, for better clearance i reformatted your code and added the closing bracket.
A function normally get's called with brackets, so it should be Voices();
This is not necessary for every Browser, but normally an ending line in JavaScript get's an ;
$('#talks').click(
function(){
console.log('hi');
var talk= new p5.Speech();
talk.onLoad=Voices();
function Voices(){
talk.listVoices();
talk.setVoice('Google UK English Male');
}
talk.speak("What's up");
}
)
With that changes i get an console output like this:
VM43:3: hi
p5.speech.js:136 p5.Speech: voices not loaded yet!
p5.speech.js:89 p5.Speech: voices loaded!
My API generates dynamic HTML document and dumps it into a popup window like so:
var popup = window.open('', "_blank", 'toolbar=0,location=0,menubar=1,scrollbars=1');
popup.document.write(result);
After the document is reviewed by a user, they can print it calling
window.print();
Chrome handles it without any problems, but Firefox shows a Printer error:
"Cannot print this document yet, it is still being loaded"
Printer window opens only if I hit Ctrl+R.
It appears that $(document).ready() never happens in firefox and it keeps waiting for something to load.
Status bar in popup says Read fonts.gstatic.com
Here's a brief content of a document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Orbitron|Jura|Prompt" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title>Invoice #15001</title>
<style>
...
</style>
</head>
<body>
<div id="invoice_body" >
...
</div><!-- Invoice body -->
</body>
</html>
I have a feeling it has something to do with Google fonts. Any help is appreciated
When you pass "" as the URL to window.open, Firefox loads 'about:blank' at which point script security is likely preventing you from pulling in external resources via http or https ...
I am able to reproduce your problem and have it popup with the same error when I try to print-- I was able to get it working by using a data url when calling window.open ...
Based on your example, result is a string containing the HTML for the popup, so you would call window.open like this, and no longer use document.write for anything:
var popup = window.open("data:text/html;charset=utf-8,"+result, "printPopup", "toolbar=0,location=0,menubar=0,scrollbars=1");
I tested this with result being a string containing:
<html><head>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Tangerine">
<style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style>
<title>Test</title></head>
<body>
<div>Testing testing</div>
<div>Print</div>
</body>
</html>
And clicking the print link worked as expected...
I had to go an extra mile, but:
I added server side code that would save a html file and pass a link to that file instead of html content:
ob_start();
include('ezts_invoice_template.php');
$dom = ob_get_clean();
$ezts_file_path = EZTS_PLUGIN_PATH.'kernel/tmp/'.session_id().'_tmp.html';
$ezts_file = fopen($ezts_file_path, 'w+');
$result = fwrite($ezts_file, $dom);
fclose($ezts_file);
print_r('{"result":"success", "file":"'.plugin_dir_url(__FILE__).'tmp/'.session_id().'_tmp.html"}');
in JS I open a popup by a link passed from PHP:
var popup = window.open(result.file, "_blank", 'toolbar=0,location=0,menubar=0,scrollbars=1');
and, finally, in template file I added event listener to request deletion of temporary file when the window is closed
window.addEventListener('beforeunload', function(event) {
window.opener.eztsApiRequest('deleteTempFile',
'',
function(result, status){ console.log(result); });
}, false);
It's not as easy, but it works great.
I wrote the following HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML page</title>
</head>
<body>
<script src='http://localhost:3000?callback=mycallbackFunction'> </script>
<script>
function mycallbackFunction(data) {
alert('here');
alert (data['a']);
}
</script>
</body>
</html>
As you can see, the script tag includes a JSONP request to a remote server.
In addition, I wrote the following node.js file and ran it as a server:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.jsonp({'a': 'blabla'});
});
app.listen(3000);
After I had run the node.js file and opened the browser with the html page, I expected to see a pop-up window of alert. But, no. I didn't see anything.
The Network Tab in Developer Tools shows that the request has been accepted:
Do you know how to resolve it?
You need to swap the order of your <script> elements.
Explanation:
Express is correctly serving a script that looks like myCallbackFunction({'a': 'blabla'}), which is exactly what you hoped for. However, this script runs immediately, and myCallbackFunction has yet to be defined, so nothing happens. Then, in the next <script> block, you define myCallbackFunction, but this is useless, since the (failed) call has already happened in the previous <script>.
Also, you have a case mismatch on the C in mycallbackFunction -- make sure the capitalization agrees between the callback parameter and the name of your function.
The solution is to switch the order of both script tags:
<body>
<script>
function mycallbackFunction(data) {
alert('here');
alert (data['a']);
}
</script>
<script src='http://localhost:3000?callback=mycallbackFunction'> </script>
</body>
I am learning AJAX and I have a problem with the following code.
This is a HTML page that, when downloaded to a browser, will allow the user to press a button to retrieve a 'clientes.xml' file from the server.
The code looks simple and seems to be in accordance with AJAX theory.
It actually works ok if I use a Chrome or an Opera browser.
The problem is that it always fails on Firefox (v45) and IE11.
By using the browser consoles, the following errors are reported:
Firefox: NS_ERROR_FAILURE error in the last line of the script: xhttp.send();
IE11: 'Permission denied' error on the same script line: xhttp.send();
By using Wireshark on the network, I can see that a HTTP GET message is always sent for the 'clientes.xml' file with Chrome and Opera but this never happens with Firefox or IE11.
I have already searched for a possible explanation for this but found none.
Does anyone know what might be the problem with Firefox and IE?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var xhttp=new XMLHttpRequest();
function doStuff(response) {
// var papeis=response;
var clientes=response.getElementsByTagName("nome");
for (i = 0; i < clientes.length; i++) {
document.write("<p>");
document.write(clientes[i].childNodes[0].textContent);
}
}
function sendRequest() {
var xhttp=new XMLHttpRequest();
if (!xhttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xhttp.onreadystatechange = function() {
console.log (xhttp.readyState);
if (xhttp.readyState!=4) {document.write("Not Yet Done: " + xhttp.readyState + "<br>" );}
else if(xhttp.readyState===4 && xhttp.status===200) {
doStuff(xhttp.responseXML);
}
}
xhttp.open('GET','clientes.xml', true);
xhttp.send();
}
</script>
</head>
<body>
<h3> AJAX </h3> <br>
<button onclick="sendRequest()">Click me</button>
</body>
</html>
I found where is the problem. The problem is in the javascript document.write() function which I used for testing purposes.
If I replace this function by console.log() in my sendRequest() function, Firefox will behave the same way as Chrome and Opera.
I would like to disable my facebox links until the page has completely loaded reason being, when I click on a facebox link before the page loads completely, the page loads a different page instead of the modal! What is the best way to fix this problem?
This is facebox script
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'images/ajax-loading.gif',
close_image : 'images/fb_closelabel.png'
})
})
</script>
this is html
Click to goto somewhere
.hover1{font-size:10pt};
$(function(e){
$(".hover1").attr('href','');
});
// here you can change the path in 'http://www.viomjeet.blogspot.com'
click to google
var blocking = false;
$(window).load(function(){blocking=true;});
$('a').click(function(){return blocking});
So... the links wont be clickable till all the images have loaded which is fired on window.load(...)
modify $('a') to your facebox links
Just figured out a decent workaround. Depending on the content you're dealing with, a simple solution is to set display:none to the tag in question, then simply add the following code to your js.
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'images/ajax-loading.gif',
close_image : 'images/fb_closelabel.png'
});
$('a[rel*=facebox]').show();
})
and in your html:
Click to goto somewhere
A few months late, but hope this helps someone!
Jay,
In response to your question, here's how I manage to have the link display, but not function until all the content is loaded:
JS:
$("a.add-facebox").click(function(){
$.facebox({ ajax: $(this).attr('fb-href') });
return false
});
HTML:
Click to go somewhere
Hope this helps!