on click button refresh a div - javascript

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");
});
});

Related

Automatic click on a button after reloading a page

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();
});

Run screen touch-event before anchor tag touch loads new web page

In a website i am showing a popup to display some results by clicking on chat menu button on website. When user touch outside the popup ,it is hidden with animation. But when user touches any anchor property then it does not hide the popup, it loads linked page. And until the new page is fully loading popup is showing on previous page.
window.addEventListener('touchStart', function(e) {
if(document.getElementById('btnChat').classList.contains('hideChatBtn')){
if (!document.getElementById('cro-script').contains(e.target)){
jQuery(document).find(".search").hide(600);
document.getElementById('btnChat').classList.remove('hideChatBtn');
document.getElementById('btnChat').classList.add("showChatDiv");
}
}
});
Here btnChat is id of chat button and search is the id of popup.

Page Reload on Button Clicked

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

FancyBox - Reload Parent Page on Button Click

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();
});
}
});

Recalling JS functions on Partial Page Refresh

I am doing a partial page refresh on a div on my site. In that div I have some js functions I am calling to hide certain parts of the text. This is basically so you can click on an item and cause the hidden text to slide out using jquery.
When I do the refresh, the hide() functions need to be called again which I am now doing with a callback function and I am using display:none for the css. When one clicks on an expand button I change the class to open. The problem is that the items aren't staying open when the div refreshes.
This is the page refresh:
setInterval(function() {
$("#newsWrapper").load(location.href+" #newsWrapper");
}, 5000);
This is the click event that changes the class.
$('.expand').live('click', function (event) {
$(this).parent().next().toggle('slide');
imgName = $(this).html();
//change plus to minus or vice-versa
if (imgName == '<img src="images/plus.png">') {
$(this).html('<img src="images/minus_sign.jpg">');
$(this).parent().parent().children('.news_detail').addClass('open');
$(this).parent().parent().children('.news_detail').removeClass('close');
} else {
$(this).html('<img src="images/plus.png">');
$(this).parent().parent().children('.news_detail').addClass('close');
$(this).parent().parent().children('.news_detail').removeClass('open');
}
event.preventDefault();
});

Categories