Ok this thing is driving me crazy. I have a simple project in which I use this mobile bootstrap theme and this text-to-speech library
Whenever there's an error in my function, the page just refreshes itself. In this way I can never read any output from the console.
Here's my code:
<script>
$(document).ready(function() {
$('#input-submit').click(function() {
var text = $('#input-box').val();
console.log(text);
for (var i = 0;i < text.length; i++){
alert('test');
meSpeak.speak(text.charAt(i));
}
});
});
</script>
I want my app to spell out loud whatever the user fills in. The function works correctly until the meSpeak.speak(text.charAt(i)); line. When I type in a 3 character word I get 3 alerts, and then the page just refreshes itself.
Why does it refresh when there's something not working? I want to read the output from the console without using alerts. Also, does anyone know why I can't use meSpeak.speak(text.charAt(i)); like this?
You're not preventing the submit button from "submitting" the page, and as you've most likely set no destination, it's submitting to the same location, causing a page refresh.
Preventing the click event can be done in jQuery by returning false at the end of the function
$('#input-submit').click(function () {
/* etc */
return false;
});
Demo to play with
Related
Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!
As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)
I have used framework built-in formToJSON() to get the form values. I have used click event to console the value.
$$("#query-submit").on("click", function () {
var queryForm = app.formToJSON("#query-form");
console.log(JSON.stringify(queryForm));
});
It works fine when page loads first time. But if I changed navigation to other page and return back to first page.
On debug, I found click event is not working when I went back to form page.
Also found this warning in console.
What is wrong here.
Note All pages were loaded via AJAX
Try this:
$$(document).on('click', '#query-submit', function(){
// your code
});
Is there a simple command to restart all, or some included javascripts? The problem I´ve got is that by refreshing page or pressing the back/forward key in the browser, some javascripts look like cached.
Maybe like codepen it does?
UPDATE:
I found out, that this is only a problem for my "dropdowns". So I have to reset them, if I refresh the browser and/or press back/forward. Any simple way?
UPDATE:
Ok, that works for me:
$(':input').not(":button").val('');
});
No, I found out that this is a "dropdown" problem - so, I want to
reset them by browser refresh and/or forward/backward.
To reset dropdowns to default value, you could use:
$(window).on("pageshow", function() {
$('select').prop('selectedIndex', function () {
var selected = $(this).children('[selected]').index();
return selected != -1 ? selected : 0;
});
});
This is because the browser used a cached version of the page when you clicked the back button, it is called a bfcache.
You could try to add an empty unload handler like $(window).unload(function(){}); to disable the cache.
More info here: http://madhatted.com/2013/6/16/you-do-not-understand-browser-history
I have a application where i have disabled the back button of IE8 by using the following code.
window.history.forward();
function noBack() {
window.history.forward();
}
I know this code takes the page back and again moves the page forward. i have called a function onload of the page which makes a textbox read only. i have used the following code to make it read only.
$("#IDofTheTextBox").attr('readonly',true);
but if i select the textbox and try to edit by pressing "BackSpace" button, IE back button is getting invoked and the textbox which was readonly is not readonly anymore. Can anyone help me how to solve this issue?
The answer is simply "NO"
If you're trying to prevent the user from losing their work, try something like:
window.onbeforeunload = function() { return "Are you sure want to leave this page?."; };
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
You add the above javascript functions in the js file and onload call the function changeHashOnLoad().
its working fine in IE8. i just tested it.
I dont know what your page is trying to do... but this is what we do:
We have an assessment where we do not want the browser buttons enabled... because we run ajax/logic when the user hits next/back etc (to determine what to display next based on their inputs). Back and forward buttons can muddy that process up.
So..... we have users open our assessments in A NEW WINDOW so the back button is already disabled...(there is no prior history in a new window). Then, Our next/back buttons use window.location.replace(url); This will prevent a history item from being created. Therefore, the back/forward buttons are never enabled and they must use the next/prev buttons to navigate our tool.
I would not try to muck with the buttons outside of something like the example I provided.
I want to send an ajax request when a user leaves a page or closes the window.
Here is my code inside :
<script type="text/javascript">
function sendajax(){
$.ajax({
url: "someurl",
data: mydata,
async : false
});
}
</script>
<script type="text/javascript">
window.onbeforeunload=function(){sendajax();};
</script>
When the event occurs the event fires twice.
Why does in happen?
I know I can prevent it by adding a variable var ajaxSent=true; but may be there is a cleaner way to do it?
UPD:
I replaced the sendajax function content with some other code (without sending ajax) and found out that ajax is not the one causing the problem. It still enters the function twice.
Based on the code in your edit and comments, it looks like it could simply be caused by the broken link you are clicking to leave the page.
Given the following code:
<script>
function doSomething() { console.log('onbeforeunload fired'); }
window.onbeforeunload = doSomething;
</script>
link A
link B
If I click on link A, I get two console log entries, if I click on link B I only get one.
It looks like it could be a quirk of how the browsers handle their internal "This web page has not been found" pages, causing your page to be refreshed and closed again before showing the message, leaving you with two occurrences of the onbeforeunload event.
I had the same problem and it took a while to understand and resolve, sharing the case details:
There was a custom JS within our template that manipulated the menu.
It caused the unload to fire twice, only when clicking on the menu links, not on other links, and only in IE/EDGE.
We eventually stopped the propagation on these links and the problem was resolved.
$('.SELECTOR a[href^="http://"]').on('click', function(e){
e.stopPropagation();
});
It's a specific bug in your application, therefore you won't find too much information on google.
You could try the following code:
<script type="text/javascript"><br>
window.onbeforeunload=function sendajax(){<br>
$.ajax({<br>
url: "someurl",<br>
data: mydata,<br>
async : false<br>
});<br>
};<br>
</script>
or you can define sendajax() {} at some place and the use it like onbeforeunload = "sendajax()" not as onbeforeunload = "function () { sendajax() }"
beforeUnload is cancellable
I know this post is quite old but from the Chrome Pagelifecycle API documentation, browsers can occasionally partially unload pages to save resources. https://developers.google.com/web/updates/2018/07/page-lifecycle-api beforeUnload is not reliable to make sure that the page is closed. This especially happens on android devices when the screen is locked.
There is a jsfiddle that I found somebody wrote that you can test out https://jsfiddle.net/ov6b9pdL/. Keep the screen locked for 5-10 minutes on Chrome android and you'll see that beforeUnload is fired without even closing the tab.
$(document).ready(function() {
window.addEventListener('beforeunload', showLoader);
});
var showLoader = function() {
$('#loader').show();
};
Agree with AlonMichaeli's concept.
In my application there was anchor tag wrapped with in a div together with couple of spans. When Anchor was clicked on a dirty page, there was couple of 'Leave site' notifications.
It worked fine if any other part of menuItem (div or spans) are clicked.
So in custom javascript method I've added stopped propagation and preventDefault only if anchor tag is clicked. Somehow in this case preventDefault is necessary.
function menuItemClicked(event: JQueryEventObject) {
var item = $(event.target);
if (item.is(".anchor-item")) {
event.stopPropagation();
event.preventDefault();
}
href = item.closest(".anchor-item").attr("href");
if (!event.ctrlKey && href) {
window.location.href = href;
}
}