stefan22
10/22/2017 - 1:35 AM
- this is how i loaded the registration page and login page with ajax, first using an iife which i then converted into a module - set to a
- this is how i loaded the registration page and login page with ajax, first using an iife which i then converted into a module
- set to a variable, init fun and return init object; which loads when pages load
- click event fires a fun for login and one for registration and inserts content +++++++++++++++++++++++++++++++++
- a better way would it have to have just one fun for both and use the click event to create a url which is then use to call page with ajax using ajax
var HeaderMod = (function() {
//reg & log
var reg = document.querySelector('.controls a');
var log = document.querySelectorAll('.controls')[0].children[1];
function loadReg(e) {
e.preventDefault();
//load async
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var data = this.responseText;
document.getElementById('modal').innerHTML = data;
document.getElementById('modal').
style.display = 'block';
//once loaded close
var close = document.querySelector('#modal .close');
close.addEventListener('click', function() {
document.getElementById('modal').style.display = 'none';
});//close evt
} //ok
};//onreadystate
xhr.open('GET','register.html', true);
xhr.send();
}//loadReg fn
function loadLog(e) {
e.preventDefault();
//load async
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var data = this.responseText;
document.getElementById('modal').innerHTML = data;
document.getElementById('modal').
style.display = 'block';
//once loaded close
var close = document.querySelector('#modal .close');
close.addEventListener('click', function() {
document.getElementById('modal').style.display = 'none';
});//close evt
} //ok
};//onreadystate
xhr.open('GET','login.html', true);
xhr.send();
}//loadLog fn
function init() {
console.log('init');
reg.addEventListener('click',loadReg, false);
log.addEventListener('click', loadLog, false);
}//init
return {
init: init
};
})();
//HeaderMod
document.addEventListener('DOMContentLoaded',HeaderMod.init);
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// same function as above (pre module) without modular adaptacion == just the iife
// this time however, I'm only calling ajax once, and I'm using e.target.url to determine wheter is login or registration
(function() {
//handler for reg,log
var reglog = document.querySelector('#page .controls');
var modal = document.getElementById('modal');
//click evt
reglog.addEventListener('click',function(e) {
e.preventDefault();
var url,xhr;
//login®ister
if(e.target.textContent == 'register') {
//reg
url = e.target.href;
//new xhr call
xhr = new XMLHttpRequest();
//callback fn
xhr.onreadystatechange = calldata;
xhr.open('GET',url, true);
xhr.send(null);
}//if reg
else if(e.target.textContent == 'login') {
//log
url = e.target.href;
//new xhr call
xhr = new XMLHttpRequest();
//callback fn
xhr.onreadystatechange = calldata;
xhr.open('GET',url, true);
xhr.send(null);
}//else if
//callback fn
function calldata() {
//if success
if(xhr.status == 200) {
var data = xhr.responseText;
//console.log(data);
modal.innerHTML = data;
//display block
modal.style.display = 'block';
//x close evt
var close = document.getElementById('modal');
close.addEventListener('click', closeMo, false);
}//if 200ok
}//calldata fn
function closeMo(e) {
if(e.target.className == 'close') {
modal.style.display = 'none';
}//if x'spot
}//closeMo
},false); //reglog
})();
//+++++++++++ refactored same function above ++++++++++++++
var HeaderMod = (function() {
//handler for reg,log
var reglog = document.querySelector('#page .controls');
var modal = document.getElementById('modal');
var url,xhr;
function headclicks() {
//click evt
reglog.addEventListener('click',function(e) {
e.preventDefault();
//new xhr call
xhr = new XMLHttpRequest();
//register
if(e.target.textContent == 'register') {
url = e.target.href;
}//if
//login
else if(e.target.textContent == 'login') {
url = e.target.href;
}//else if
//callback fn
xhr.onreadystatechange = calldata;
xhr.open('GET',url, true);
xhr.send(null);
},false); //reglog
}//headclicks
function closeMo(e) {
if(e.target.className == 'close') {
modal.style.display = 'none';
}//if x'spot
}//closeMo
function calldata() {
//if success
if(xhr.status == 200) {
var data = xhr.responseText;
//console.log(data);
modal.innerHTML = data;
//display block
modal.style.display = 'block';
//x close evt
var close = document.getElementById('modal');
close.addEventListener('click', closeMo, false);
}//if 200ok
}//callback fn
function init() {
headclicks();
}//init fn
return {
init: init
}
})(); //HeaderModule
document.addEventListener('DOMContentLoaded', HeaderMod.init);