I am creating a web app using asp.net mvc. I want to detect a manual refresh by a user,
but I am not able to get the following events
1: beforeunload
2: unload
the following way I Tried
1
$(window).on('beforeunload', function () {
pageCleanup();
});
2
$(window).on("unload", function () {
pageCleanup();
});
function pageCleanup() {
alert(1)
}
3
window.addEventListener("unload", logData);
function logData() {
alert(1)
}
4
$(window).unload(function () {
alert('1');
});
the above is an example with alert, I want to have an ajax call in
unload function
but none of these seems to execute when a user press any kind of refresh(F5, ctrl-shift-R, ctrl-R, from url tab)
what should I try now?
Hi Check Once and Let me know
<html>
<head>
<title>Refresh a page in jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Stop a page from exit with jQuery</h1>
<button id="reload">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#reload').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n bro!!Working';
});
</script>
</body>
</html>
You should use bind for beforeunload:
$(window).bind("beforeunload", () => alert(1));
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Related
I really thought at first that my code is not working.. but then i tried to create a very simple click event in a clean page and my jquery works on .html but when i open the .php on my XAMPP server it does nothing when it's clicked but it alerts the first one.
index.php
<html>
<head>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<?php include "includes/widgets/login.php"; ?>
</body>
</html>
login.php
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
function clicked() {
alert("I was clicked!");
}
});
</script>
<input type="button" value="Login" id="login" onclick="clicked()">
place the function clicked(); outside from the document.ready();
Change login code to following and it will work.
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
});
function clicked() {
alert("I was clicked!");
}
</script>
<input type="button" value="Login" id="login" onclick="clicked()">
Uncaught ReferenceError: clicked is not defined at HTMLInputElement.onclick (index.php:22)
This problem will also solved. I don't know properly but i thought that browser can't find function inside jquery.
JQuery create function when DOM is ready.But Control onclick property was read by browser while creating a page but they can't find the function becuse it was not ready yet
So I think procedure may be like :
1) Browser read the page and find the function.
2) JQuery ready event will fire.
Place your function like this:
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
});
function clicked() {
alert("I was clicked!");
}
</script>
I have integrated LinkedIn Login and also Follow button in my Asp.Net MVC website.
But I've to call a function after the click on Follow button.
I have tried the following code. but it's not working
<script type="text/javascript">
function myOnclickFunction(r) {
alert("click");
console.log(r);
// do something here
}
function myOnsucesssFunction(r) {
alert("success");
console.log(r);
// do something else here
}
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany"
data-id="1337"
data-jobtitle="Chief Cat Herder"
data-onclick="myOnclickFunction"
data-onsuccess="myOnsuccessFunction">
</script>
Anybody please help me
I am new at using MVC 4 and Javascript. I created a javascript that does not send the alert when the page is ready. I cant seem to figure out what i am doing wrong.
my code:
#{
ViewBag.Title = "Import";
}
<script type="text/javascript">
$(this).ready(function () {
alert("test");
});
</script>
<h2>Import</h2>
<form id="form1">
#Html.DropDownList("TableDDL")
</form>
what am i doing wrong ?
Try this:
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("test");
});
</script>
Note: Make sure you have included reference of jQuery Library on your page.
You should pass in document:
$(document).ready(function () {
alert("test");
});
which is equivalent to:
$(function () {
alert("test");
});
Did you included the jQuery correctly?
$(this).ready(function () {
alert("test");
});
This code should work.
Check http://jsfiddle.net/yM5PC/
I'm having hard time getting this snippet to work. I have made a minimal example. You can view it online: http://jsfiddle.net/qnnZe/ where it is working!
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p>I am going to test right now.</p>
</body>
</html>
test.js
$("p").click(function () {
$(this).hide("slow");
});
However, on my server it does not work. Here is the link to my server: http://techinf.de/sleepytime/test.html
As always, any help appreciated.
Because in jsFiddle your script code is executed after the DOM has loaded (that's the default option, see the dropdown set to "onDomReady"), on your page it's executed before that. It would work if you wrap your code in a ready() handler:
$(function()
{
$("p").click(function () {
$(this).hide("slow");
});
});
You need to wrap your click handler in a document ready function.
Try either:
$(document).ready(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
or
$(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
It will execute before the DOM is ready. Click handlers should be added in any of the normal jQuery "ready" methods, like:
$(function() {
$("p").click(function () {
$(this).hide("slow");
});
});
i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});