I have a button on a page that, when clicked, loads another html file into a div in a "modal". For whatever reason, when I close the modal, the page seems to refresh and go back to the top.
function openNewWindow() {
$('.button').click(function(e) {
e.preventDefault();
$('body').addClass("noscroll");
$('#wrap').load('index.html');
return false;
});
}
openNewWindow();
$('.close-btn').click(function(e) {
e.preventDefault();
$("#wrap").empty();
$('body').removeClass("noscroll");
});
I have the preventDefault in place, but the "reload" seems to keep happening. Any issues with the script, and reason why this would be happening?
Link to my test page: http://andyrichardson.design/ajax/test.html
Related
Basically I have a button which displays a div when pressed.
Inside this div I have actions which can lead to reloading the page.
I want this button that displays my div to be automatically pressed if the page is reloaded. I already tried this :
window.onload =function(){
document.getElementsByClassName(className).click();
}
But it does not work.
To reload my page I use:
location.reload();
Try this:
window.addEventListener('load', (event) => {
document.querySelector(".className").click();
});
I am working on a shopify website. what I am trying to achieve is to, click on a button it should refresh a particular div only, without refreshing the whole page, my button class is a "button.nav-link.nav-cart.header__icon.header__icon--button.header__icon--cart" and my div which I want to refresh is "cart-drawer-container"
jQuery("button.nav-link.nav-cart.header__icon.header__icon--button.header__icon--cart").click(function(e){
e.preventDefault();
jQuery.get(jQuery(this).attr("href"), function(data) {
jQuery(".header__icon--cart").html(data);
});
});
jQuery(document).ready(function(){
$("button.nav-link.nav-cart.header__icon.header__icon--button.header__icon--cart").click(function(){
$(".header__icon--cart").load(".cart-drawer-container");
});
});
The id's #switchtopagetwo and #switchtoindex are assigned to buttons that do what you can infer from the id's names. What I want to do is on click of the button, I want to redirect to the new page via window.location = url; and then run a function that renders some data on the page via pagetwoData() or pageoneData(), depending on where I am at the moment.
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
pagetwoData();
});
//pagetwo.html button
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
pageoneData();
});
When I comment out window.location, the functions run and I can see the data on the screen, but there's no page redirect even on clicking the button. When I click on the buttons fast enough, I can see the function's data being rendered for a split second and then disappearing. When I console.log certain items, I can see the console.log's appearing in the console and then disappearing the same way.
Clearly there is an issue with window.location. Is there better code I can use for clicking the button, redirecting the page to load the page-2 data, then clicking the button again to go back to page-1 data?
When you redirect to a new page, the entire page context is abandoned and replaced by the new page. Nothing which happens on the source page after that redirect can be relied upon to still happen. But anything on the target page that's loading will happen.
Instead of trying to get Page1 to tell Page2 to do something when it loads, just have that something happen on Page2. For example:
// on index.html
pageoneData();
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
});
// on pagetwo.html
pagetwoData();
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
});
Basically, for any given page, whatever you want to happen on that page when it loads should be executed on that page when it loads.
I am using fancybox to show a page (say child.htm) within another page(parent.htm).
I know how to automatically reload the parent page after closing the iFrame:
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
However, my requirement is more specific. I need to close the iframe and then reload the parent page (parent.htm) only when an user clicks on a button (e.g : clicking on button "OK" present in child.htm).
The problem with the code snippet that I'm having is that the parent page is getting reloaded even when I click on the close icon or when I click anywhere outside the frame. This is something that I want to restrict. My agenda is to cause page refresh only on button click.
I would try something like this:
$('.fancybox').fancybox({
href : 'child.html',
type : 'iframe',
afterShow: function(){
$('.fancybox-iframe').contents().find('#button').click(function(){
// do something
...
// reload parent window and close fancybox
window.parent.location.reload();
window.parent.$.fancybox.close();
});
}
});
I tried to make some script that handle with event like "panel changes follow by URLhash". I had no problem with event on button or link but I had problem when I refreshed the page. My panel couldn't keep its values and automatically reset.
And I tried to solve refresh problem like this:
<script>
document.addEventListener('keydown', function(e) {
if(e.which == 116) {
window.alert("1234");
var id = window.location.hash;
changePanel(id);
}
}, false);
</script>
As code I shown you, alert() function it was working, but changePanel() wasn't working. I think because alert() had ran before refreshed and changePanel() also. But in case of changePanel() it ran before refresh then after refreshed all changes are reset to default.
How to run changePanel() after refresh?
It will not work, because after press of f5 page will be refreshed so new content will come on page, and so your panel/tab is reset..
You can try your code on
$(document).ready(
var id = window.location.hash;
changePanel(id);
);
Above code will automatically set tab after refresh button, and you can keep same code of that 2 lines on your button press, so that will work for your live page too. :)
This will work for you.
Thanks.
It works perfectly for me.
Call the funtion from your html
<button type="button" name="button" onclick="loro()">fdthd</button>
JS file
function loro() {
location.reload();
localStorage.setItem("po", "momo");
}
$(window).on("load", function() {
if (localStorage.getItem("po") === "momo" ) {
alert('Bien, ejecutaste el boton')
localStorage.setItem("po", "lulu");
} else {
alert('No has precionado el boton')
}
});
Before refresh the page I run a Function to save the "momo" value in the "po"key
After that, I refresh the page and check if PO has the value of momo. Depending on if I run the function before the refresh, it will run a specific alert.