I load content into a div via ajax. This changes the website hash to #WhateverYouClickedOn, that's fine. I want to clean the hash once the user clicks the x button that closes this modal window. How could i do that?
This is my code
Ajax call
function getPage() {
return window.location.hash.replace(/^#/, '');
}
function updatePage(page, html) {
var navItems = [
'products',
'about',
'storelocator',
'media',
'faq',
'contact'
];
$('.overlay').trigger('show');
// Remove the arrow from the previously selected item
if (navItems.indexOf(page) != -1) {
$(".w-container .w-nav-menu a").removeClass("active");
}
$("#" + page + "-link").addClass("active");
$('.content')
.hide()
.html(html)
.fadeIn();
}
function retrieveContent() {
$('.overlay').trigger('show');
var page = getPage();
if (!page) {
return;
}
$.ajax({
type: "POST",
url: "./load.php",
data: 'page='+page,
dataType: "html",
beforeSend: function() {
$('#canvasloader-container.wrapper').show();
},
complete: function() {
$('#canvasloader-container.wrapper').hide();
},
success: function(msg){
if (msg) {
updatePage(page, msg);
}
}
});
}
$(function() {
retrieveContent();
window.onhashchange = retrieveContent;
});
Overlay / Modal window
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!$(this).hasClass('shown')) return $(this).css('visibility', 'hidden');
});
overlay.on('show', function() {
$(this).css('visibility', 'visible');
$(this).addClass('shown');
return true;
});
overlay.on('hide', function() {
$(this).removeClass('shown');
$(".content").html("")
return true;
});
overlay.on('hide', function() {
$(".w-container .w-nav-menu a").removeClass('active'); // Remove the active class when overlay is off
$(".content").html("")
return true;
});
$('a[data-overlay-trigger=""]').on('click', function() {
overlay.trigger('show');
});
$('a[data-overlay-trigger]:not([data-overlay-trigger=""])').on('click', function() {
$('.overlay.' + $(this).attr('data-overlay-trigger')).trigger('show');
});
})
};
})(jQuery);
Related
I want to know hot to detect popup close event, When i open popup close event automatically call, its i am using .close event.
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function(response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function($) {
var close_interval = setInterval(function() {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
if (newwindow.close) {
console.log("Closed");
clearInterval(close_interval);
}
}, 1000);
});
}
});
}
Capturing the close event of a window requires the onbeforeunload event handler:
var new_window = window.open('some url')
new_window.onbeforeunload = function(){ my code}
so in your case:
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function (response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function ($) {
var close_interval = setInterval(function () {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
newwindow.onload = function() {
newwindow.onbeforeunload = function() {
console.log("Closed");
clearInterval(close_interval);
}
}
}, 1000);
});
}
});
}
I want to listen to this.progress variable.
Whenever it's changed - it should update my charts loading percentage and progress bar loading percentage.
I tried using the .change in my bindEvents() section but i got an error saying it's not valid to apply the .change function on variable (works only on elements).
So i tried doing something like this (see last variable under cacheDom):
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.$form = $('#frm_reportit');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
this.progress = function(){
var progressPrecent = 0;
return {
getProgress: function () {
return progressPrecent;
},
updateValue: function(progressPrecent) {
this.updateProgressTableChart(progressPrecent);
}
}
};
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// On Change inputs
/*this.progress.change(function(){
// Show Chart Loading
that.qwChart.showLoading({
text: that.returnNumWithPrecent(that.progress)
});
that.setProgressBarValue(that.progress);
});*/
},
// Get data, prevent submit defaults and submit.
sendData: function(sdate, edate, e) {
e.preventDefault();
let that = this;
$.ajax({
type: 'POST',
url: "/potato/ajax.php?module=potato_module",
dataType: 'json',
data: {
start_ts: sdate,
stop_ts: edate,
submitted: true
},
beforeSend: function() {
console.log(that.progress);
setTimeout(function (){
// Something you want delayed.
}, 1000);
that.progress = 50;
setTimeout(function (){
// Something you want delayed.
}, 2000);
that.progress = 60;
// that.setProgressBarValue(that.progress);
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0'/*,
text: that.returnNumWithPrecent(that.progress)*/
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){
},
success: function(result){
}
});
that.dataDisplayed = true;
},
...........
......................
...................................
...............................................
})();
Keep getting this error in the console for where the console.log(this.progress) is:
undefined
You can use defineProperty with your own setter.
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.$form = $('#frm_reportit');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
Object.defineProperty(this, "progress", {
get: () => {
return this.progressPrecent || 0;
},
set: (value) => {
if(value != this.progressPrecent){
this.updateProgressTableChart(value);
this.progressPrecent = value;
}
}
});
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// On Change inputs
/*this.progress.change(function(){
// Show Chart Loading
that.qwChart.showLoading({
text: that.returnNumWithPrecent(that.progress)
});
that.setProgressBarValue(that.progress);
});*/
},
// Get data, prevent submit defaults and submit.
sendData: function(sdate, edate, e) {
e.preventDefault();
let that = this;
$.ajax({
type: 'POST',
url: "/potato/ajax.php?module=potato_module",
dataType: 'json',
data: {
start_ts: sdate,
stop_ts: edate,
submitted: true
},
beforeSend: function() {
console.log(that.progress);
setTimeout(function (){
// Something you want delayed.
}, 1000);
that.progress = 50;
setTimeout(function (){
// Something you want delayed.
}, 2000);
that.progress = 60;
// that.setProgressBarValue(that.progress);
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0'/*,
text: that.returnNumWithPrecent(that.progress)*/
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){
},
success: function(result){
}
});
that.dataDisplayed = true;
},
...........
......................
...................................
...............................................
})();
How to open the modal after a ajax call on success i need to trigger the modal window automatically
<a class="main_blue_button" href="#complete_application_modal" id="applicationBtn">SIGN UP</a>
<div id="complete_application_modal">adsfadsf</div>
how to open the modal after on success ajax call
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>users/signUp_business",
data: $('#signup_form').serialize(),
dataType: "json",
success: function(result){
//alert(result);
if(result.error==0){
$("#show_error").html("This email or phone is already registered!");
//$("#business_email").focus();
$("#busp_email").removeClass('field_validation_error hidden');
$("#busp_email").addClass('field_validation_error');
$("#bus_email").css("color","#f42156");
hasError = true;
}else if(result.success==1) {
$("#signup_form")[0].reset();
$("#applicationBtn").attr("href","#complete_application_modal");
//$("#applicationBtn").attr("href", "#complete_application_modal").trigger('click');
$("a").trigger("click");
}
I think if your primary goal is to display modal window on ajax success you can simply do it by
$('#complete_application_modal').show();
and can hide it by
$('#complete_application_modal').show();
Then why are you using link reference..?
here is the modification to allow this
(function ($) {
$.fn.animatedModal = function(options) {
var modal = $(this);
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
position:'fixed',
width:'100%',
height:'100%',
top:'0px',
left:'0px',
zIndexIn: '9999',
zIndexOut: '-9999',
color: '#39BEB9',
opacityIn:'1',
opacityOut:'0',
animatedIn:'zoomIn',
animatedOut:'zoomOut',
animationDuration:'.6s',
overflow:'auto',
// Callbacks
beforeOpen: function() {},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {},
override: false
}, options);
var closeBt = $('.close-'+settings.modalTarget);
//console.log(closeBt)
var href = $(modal).attr('href'),
id = $('body').find('#'+settings.modalTarget),
idConc = '#'+id.attr('id');
//console.log(idConc);
// Default Classes
id.addClass('animated');
id.addClass(settings.modalTarget+'-off');
//Init styles
var initStyles = {
'position':settings.position,
'width':settings.width,
'height':settings.height,
'top':settings.top,
'left':settings.left,
'background-color':settings.color,
'overflow-y':settings.overflow,
'z-index':settings.zIndexOut,
'opacity':settings.opacityOut,
'-webkit-animation-duration':settings.animationDuration
};
//Apply stles
id.css(initStyles);
if (!settings.override) {
modal.click(function(event) {
event.preventDefault();
open();
});
}
closeBt.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'auto'});
settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
});
function afterClose () {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(); //afterClose
}
function afterOpen () {
settings.afterOpen(); //afterOpen
}
function open() {
$('body, html').css({'overflow':'hidden'});
if (href == idConc) {
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}
if (id.hasClass(settings.modalTarget+'-on')) {
settings.beforeOpen();
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
};
}
}
return {
open: open
};
};
}(jQuery));
AND YOU CAN TRIGGER using
var service = $("#demo01").animatedModal({
override: true
});
service.open();
one of the options in animatedModal is beforeOpen, you can use this option to call ajax request.
like this:
$("#modal-btn").animatedModal({
modalTarget:'animatedModal',
beforeOpen: function() {
// ajax request call here
// fill modal by data
}
});
in success function trigger the click event manually.
eg success : function(response){ $("#your-id-name").trigger('click'); }
i have a button on my view page whenever its get clicked,a pop up modal appears ... now i want to close that modal ...
here is my code
function openSirenModal() {
var timeout;
var progress;
var status;
$.modal({
contentAlign: 'center',
width: 240,
title: 'Loading',
content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
buttons: {},
scrolling: false,
actions: {
'Cancel': {
color: 'red',
click: function (win) {
win.closeModal();
}
}
},
onOpen: function () {
// Progress bar
var progress = $('#modal-progress').progress(100, {
size: 200,
style: 'large',
barClasses: ['anthracite-gradient', 'glossy'],
stripes: true,
darkStripes: false,
showValue: false
}),
// Loading state
loaded = 0,
// Window
win = $(this),
// Status text
status = $('#modal-status'),
// Function to simulate loading
simulateLoading = function () {
};
// Start
//timeout = setTimeout(simulateLoading, 2500);
},
onClose: function () {
// Stop simulated loading if needed
clearTimeout(timeout);
}
});
var siren = "siren";
$.ajax({
type: "POST",
data: {
value: siren
},
url: "http://localhost/siren/siren/",
success: function (data) {
alert(data);
if (data == 1) {
var auto_refresh = setInterval(
function () {
$.get('siren/sirenjson', function (datas) {
if (datas == 1) {
$('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
$('#modal-status').text('success!');
setTimeout(function () {
clearInterval(auto_refresh);
win.closeModal();//here i want to close the popup modal
}, 1500);
}
});
}, 1000);
} else {
}
//clearTimeout(timeout);
},
error: function () {
alert("error");
progress.hideProgressStripes().changeProgressBarColor('red-gradient');
setTimeout(function () {
win.closeModal();
}, 1500);
status.text('error!');
}
});
};
i have written code win.closeModal();but it isn't working because i cant access the win variable in setInterval..i dont know how can i access it
<div id="modal">Modal text <br /><button type='button' class='close'>CLOSE</button></div>
$('.close').on('click', function(){
$.modal.close();
$('#modal, #open_modal').toggle();
});
Try This if you can skip the closeModal();
JSFIDDLE TRIAL
I got the delay to work when you click on the buttons but I cant get the loading gif to display during the delay.
Thanks
function () {
$('.sectionThreeTab:not(.tabActive)').click(function () {
$('ajax-loader.gif').bind('ajaxStart', function () {
$(this).show();
}).bind('ajaxStop', function () {
$(this).hide();
});
$('.tabActive').removeClass('.tabActive');
$(this).addClass('tabActive');
var lesson = $(this).attr('lesson');
var self = $(this);
setTimeout(function () {
$.ajax({
type: "GET",
url: 'lessons/' + lesson + '.htm',
datatype: "json",
success: function (data) {
$('#sectionTabContent').append(data);
}
})
}, 3000);
return false;
});
}
You can try this instead of what you have:
Delete this part:
$('ajax-loader.gif').bind('ajaxStart', function () {
$(this).show();
}).bind('ajaxStop', function () {
$(this).hide();
});
And change the setTimeout to this:
setTimeout(function () {
$("#loading").show();
$.ajax({
type: "GET",
url: 'lessons/' + lesson + '.htm',
datatype: "json",
success: function (data) {
$('#sectionTabContent').append(data);
},
complete: function() {
$("#loading").hide();
}
})
}, 3000);
Please also post your html so we can see if everything else is in order.
Edit:
<div id="loading" class="grayBackground withBorder10" style="display:none">
<img alt="Loading..." src="img/ajax-loader.gif" />
</div>
I believe your targeting the loading image incorrectly, try:
$('#ajaxLoader').bind('ajaxStart', function () {
$(this).show();
}).bind('ajaxStop', function () {
$(this).hide();
});
Where your loading image has an Id #ajaxLoader (replace to suit your HTML).