I can't manage to reload my page with jquery after the click function. the assignment is to use a click function with the a tag in the body tag. the a tag must fade and reload the same page. So the following things are needed:
• Give the page to be loaded as an argument to the onclick function.
• Fading out itself takes 1.5 seconds.
• After fading out, you can load a page stored in the variable url with the following command:
window.location.href = url;
Write the jQuery code to hide the page after loading the web page. Then you ensure that the page arrives in 1.5 seconds.
So I tried these things...
Function's like: $("a").click(function(){
$("p").fadeToggle();
$("p").fadeToggle("slow");
$("p").fadeToggle(1500);
I've also tried to use fadeIn and fadeOut in the code, but it doesn't help..
<html>
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>
<script>$(document).ready(function(){
$('a').click(function(e) {
e.preventDefault();
newLocation = this.href;
$('p').fadeOut('slow', newpage);
});
function newpage() {
window.location.href = url;
}
});
</script>
</head>
<body>
<p>Click here to reload the page</p>
</body>
</html>
You weren't passing your url anywhere.
See this JSFiddle: https://jsfiddle.net/fpnecajo/1/
$('a').click(function(e) {
e.preventDefault();
newLocation = this.href;
$('p').fadeOut('slow', newpage(newLocation));
});
function newpage(url) {
window.location.href = url;
}
You can refer the snippet below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
newLocation = this.href;
$('p').fadeOut('slow', newpage);
});
function newpage() {
window.location.href = "http://www.google.com";
}
});
</script>
<p>Click here to reload the page</p>
Related
I wrote the same code in two JSFiddle, and they do not behave the same way :
HTML:
<p id='complete'></p>
JS:
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
var state = document.readyState
if (document.readyState === 'complete')
{
document.getElementById('complete').innerHTML = 'Document completely loaded'
}
}
Working JSFiddle: https://jsfiddle.net/Imabot/toujsz7n/9/
Non working JSFiddle: https://jsfiddle.net/Imabot/3sLcpa0y/7/
Why do they not behave the same way?
Your first link has the load setting "No wrap - bottom of <head>".
This is equivalent to having HTML like
<head>
<script>
// YOUR SCRIPT HERE
</script>
<head>
<body>
// YOUR HTML HERE
</body>
Your second link has the load setting "On Load":
This is equivalent to having HTML like
<head>
<script>
window.onload = function() {
// YOUR SCRIPT HERE
}
</script>
<head>
<body>
// YOUR HTML HERE
</body>
You can see this if you Inspect the iframe in the lower right. So by the time the second script runs, readystatechange never fires again, so fnStartInit never runs.
Here's a Stack Snippet demonstrating the same problem:
window.onload = () => {
console.log('onload');
document.onreadystatechange = () => {
console.log('ready state just changed');
};
};
I want to open a link in new tab and immediately refresh my page in JavaScript. But when I open a new tab using window.open(), it does't reload my page. it waits for new tab to be closed then refresh my page.
Although it works in IE. But Chrome is waiting to child window to be closed.
$.ajax({
url: '/MailMan/Print'
, dataType: "json"
, type: "POST"
, success: function (result) {
if (result.success == true) {
window.open(
'/MailMan/Index/Building/1/Shift/1'
, '_blank'
);
window.location.reload();
}
}
});
The child page contains window.print() command in onload()of it. and when I close print dialog , main page refreshes successfully. This is my child page :
<head>
<meta name="viewport" content="width=device-width" />
<script>
window.onload = function () {
window.print();
}
</script>
</head>
<body>
</body>
I change my child window as below and it works for me. although it bring print dialog 1 sec later but it's not a big deal for me.
<head>
<meta name="viewport" content="width=device-width" />
<script>
window.onload = function () {
window.setTimeout(window.print(),1000
);
}
</script>
</head>
<body>
</body>
I have inherited an app that has this code at the top of every page, after the head tag:
script src="sorttable.js"></script>
<title>Positions</title>
<noscript>
<meta http-equiv="refresh" content="30">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{ setTimeout( "refresh()", 30*1000 ); }
function refresh()
{ window.location.href = sURL; }
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{ window.location.replace( sURL ); }
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{ window.location.reload( true ); }
//-->
</script>
This works, and the page refreshes itself every 30 seconds. (As an aside, I don't understand this code - why there's 3 functions with the same name - and why if I remove any of those functions it either doesn't refresh at all, or when it refreshes it get's an 'untrusted connection' error. But that is not my question.)
In some cases I have to run some code when the page loads:
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("FVShort-4"), []); }
</script>
My problem is that in the cases when I do have that onload function, the pages no longer refreshes. How can I have both the onload function and still have the automatic refresh work?
I've created links to transition yet when the function is supposed to be called using the onmousedown event I get an uncaught undefined function. Clearly my function is defined. I'm am still learning code so what is it I don't see or understand. Any tips will be greatly appreciated.
<html>
<head>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="javascript">
$(document).ready(function (){
var url = "phpajaxtut.php";
});
function swapContent(cv){
$("#myDiv").html("animated gif goes here").show();
.post(url, {contentVar:cv}, function(data){
$("#myDiv").html(data).show();
});
}
</script>
Click the text
Click the text
Click the text
</head>
<body >
<div id ="myDiv">My default content</div>
</body>
</html>
Why not just use $.click(); instead, since you're already using jQuery, and forgo the hyperlinks? You can easily style some spans to look like as if that's what you want. My example just updates some text, but in there you can place / call your function.
See here:
// html
<span>Click Me</span>
<br />
<span>Click Me</span>
// js
var n = 0;
$("span").click(function(){
$(this).text($(this).text() + " " + n++);
});
Do you need a $ before .post?
$.post(url, {contentVar:cv}, function(data){
$(document).ready(function (){
var url = "phpajaxtut.php";
});
The var url isn't global. It can only be used inside the function
var url; //global url
$(document).ready(function (){
url = "phpajaxtut.php"; // set global url
});
this is my code...append is working but removing is not working. how to remove the appended div?
<html>
<head>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something</a>
<a onclick="close();">close</a>
</body>
</html>
Specify window.close in your html handler:
<a onclick="window.close();">close<a>
http://jsfiddle.net/ZTwd7/1/
Otherwise close() refers to the native close method, which doesn't do anything.
Here's how you would emulate it with a "javascript" (as opposed to inline html attribute) handler:
elem.onclick = function(event) {
with(Window.prototype) {
with(document) {
with(this) {
close();
}
}
}
};
This is not exact reproduction (nor does it work in IE etc, that's not the point) but it would put the .close in Window.prototype in front of the global window.close in the scope, so it shadows it. You can still refer to it explicitly with window.close().
You should also totally drop the above and use jQuery instead:
<a id="view">something<a>
<a id="close">close<a>
JS:
$(function() {
$("#view").click(function() {
$('body').append('<div class="added"><p>something</p></div>');
});
$("#close").click(function() {
$('.added').remove();
});
});
http://jsfiddle.net/ZTwd7/5/
Making an ajax request that fetches a html file to be appended:
$.get("myhtml.html", function(html) {
$("body").append(html);
}, "html");
Don't know why but by putting another name to close function instead of close() it works
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close_it(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something<a>
<a onclick="close_it();">close<a>
</body></html>