Ajax page loader breaks all other custom code on Webflow - javascript

I’m having a weird issue on a Webflow site I’m building for a radio station and can’t find a solution anywhere so I thought I’d try to ask you for some help.
I have this ajax page loader code to allow for continuous playback of the radio stream while browsing the site. That code works EXCEPT it breaks all other custom code when clicking on anything. There are no errors in the console and I have tried to move the code between the different code editors but the problem persists. I don’t know if the code clashes with Webflow somehow but the code is pure vanilla javascript so this issue is driving me mad.
If someone might have an idea of what the problem is please feel free to share your solution. I’d really appreciate it! Here’s the ajax code:
let main = document.querySelector('main');
window.addEventListener('popstate', function (e) {
requestPage(e.state, false);
});
function requestPage(url, push) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
main.innerHTML = xhr.responseText;
var title = (/<title>(.*?)<\/title>/m).exec(xhr.responseText)[1];
var headers = document.querySelectorAll('.header');
var footers = document.querySelectorAll('.footer');
if (headers.length > 1) {
headers[1].remove();
};
if (footers.length > 1) {
footers[1].remove();
};
attachLinkClickHandlers(main);
document.title = title;
if (push)
history.pushState(url, document.title, url);
}
};
xhr.open('get', url, true);
xhr.send();
}
function attachLinkClickHandlers(parent) {
let links = parent.querySelectorAll('a:not([href^="http"])');
[].forEach.call(links, function (link) {
link.addEventListener('click', function (e) {
requestPage(link.href, true);
e.preventDefault();
return false;
});
});
}
attachLinkClickHandlers(document);
history.replaceState(location.href, document.title, location.href);
Here's a link to the live site
and to the read-only

Related

HTML added from another HTML file using JS displays correctly, but JS functions do not work

I would like an element of my html page to be taken from another html file. So, such a widget displayed on many pages at once.
I was able to write JS code so that the content of the element is taken from another file. Code below:
//* Accordion - replace */
var fn = (event) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", '/widgets/accordion.html', true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
document.getElementById("accordion").innerHTML = xhr.responseText;
}
else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null); }
document.addEventListener('DOMContentLoaded', fn, false);
document.addEventListener
The item (accordion) displays correctly, as in the code here:
https://codepen.io/jakub-czeszejko-sochacki/pen/rNWNwrN
But unfortunately it doesn't work properly as if JS code is not being read for this element. As a result, when you click on the accordion button, the accordion does not open.
Is it even possible for this to work with JS?
Problem solved.
It turned out that the JS accordion initiation took place before its html was loaded with the line:
document.getElementById ("accordion"). innerHTML = xhr.responseText;
It was enough to put the initialization code (the accordion opening code) in the function and call this function after the above line of code.

e.preventDefault & e.stopImmediatePropagation not working

I got a problem where preventDefault() are not working properly.
This ajax request is working and I get the php page to show in the selected div, but the preventDefault is not working. For the map area that have a link I got redirected to the page, and for the ones that have no link, the address bar got an added "#" to the url. (in this last case, the ajax calls get correctly appended to the div, but still, preventDefault not doing its job).
After doing some digging I found out something : stopImmediatePropagation()
I was really hyped by this for a few seconds before seeing that it had absolutely no effect on my side too. I must be missing something but I can't find it.
More infos: The website is on joomla 3x, on localhost and showing K2 itemview categories on this ajax request.
Any help really really welcomed.
window.addEventListener('DOMContentLoaded', (event) => {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
let links = document.querySelectorAll('map area')
console.log(links)
for (let i = 0 ; i < links.length ; i++) {
let link = links[i]
link.addEventListener('click', function (e) {
e.preventDefault
e.stopImmediatePropagation()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('maploc-loc').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", '../index.php?option=com_k2&view=itemlist&layout=category&task=category&id=1&id=Itemid=1',true);
xmlhttp.send();
})
}
});

Adding page in a certain space of my homepage

This is my first question on stackoverflow.
I want to load a different page in a certain space of my homepage. I tried it with JavaScript many times but hitting a wall. I can do it with iframe. But I was thinking if there is any other way to do it. And I want to load the page when the user clicks the link.
The way I did it is like this:
document.getElementById('aboutUs').onclick = function() {
document.getElementById('newDiv').style.display = "none";
document.getElementById('iFrame').style.display = "block";
}
Thank You!!!
You need to make request to load the static content.
Hope this snippet will be useful
//A generic function to load the static page
function loadContent(target, staticPageLoc) {
var r = new XMLHttpRequest(); // making request to load the static page
r.open("GET", staticPageLoc, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
target.innerHTML = ""; // removing any previous content
target.innerHTML = r.responseText; // response will be the static page
};
r.send();
}
document.getElementById('aboutUs').onclick = function() {
loadContent(document.getElementById('id of dom element where page will load'), 'page path')
}
Alternately you can explore jquery.load function & better to run it in a server or else you may come across CORS

Get gmail messages using javascript - atom feed not working

I'm trying to access the gmail atom feed but can't seem to get it working. I've tried:
function testing(){
alert("hi");
getMail = new XMLHttpRequest();
getMail.open('GET','https://mail.google.com/mail/u/0/feed/atom/', true);
getMail.onload = function() {
var allXML = getMail.responseText;
alert("hi2");
alert(allXML);
}
getMail.send(null);
}
But when I run it I can't see the "hi2", let along the response text.
I am logged on to gmail and can see the xml if I put https://mail.google.com/mail/u/0/feed/atom/' directly into the browser. I'm using Firefox v29.
I've read the previous similar questions on here but nothing has helped.
Edit
Now I get to the "hi2" but the responseText is blank... code is:
function testing(){
getMail = new XMLHttpRequest();
getMail.open('GET','https://mail.google.com/mail/u/0/feed/atom/', true);
getMail.withCredentials = true;
getMail.onreadystatechange = function() {
if (getMail.readyState == 4) {
var allXML = getMail.responseText;
alert("hi2");
alert(allXML);
}
}
getMail.send(null);
}
Any ideas?

login into the site with my javascript

i'm trying to login into the site with the following javascript. But, i'm loading only the complete page. I'm developing windows 8 app
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("bt_login").addEventListener("click", login, false);
}
});
})();
function login() {
var xhrDiv = document.getElementById("xhrReport");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = dataLoaded;
xhr.open("POST", "http://www.160by2.com", true, <username>, <password>);
xhr.send();
function dataLoaded() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// OK
xhrDiv.innerHTML = window.toStaticHTML("response:" + xhr.responseText);
} else {
// not OK
xhrDiv.innerText = "failure";
}
}
};}
I want to dsiplay in xhrdiv.innerHTML as "LOGIN SUCCESS" or "LOGIN ERROR"
EDIT:
I tried the following code:
iframe = document.getElementById("ifra_op");
iframe.setAttribute("src", "http://www.160by2.com/index");
document.getElementById("op").appendChild(iframe);
iframe.contentWindow.document.getElementById("MobileNoLogin") = "<mobno>";
iframe.contentWindow.document.getElementById("LoginPassword") = "<pass>;
iframe.contentWindow.document.getElementsByName("LoginForm").click();
But, there is an error. It says "Javascript run time error:math is undefined"
"math" comes from the website. I don't know how to handle this. Also, the permission is denied. Why is that so?
You need to make sure you have a service (something like a web service) in the remote server to process the request.
In here what you can do is.
Create an iframe and set the src to 160by2;
Access the webpage using iframe.contentwindow, inject your code to fill up the forms and trigger the submit button.
Parse the received html to verify your login.
Use jquery , makes life easier.
var iframe = $("#ifra_op");
$(iframe).attr("src", "http://www.160by2.com/index");
$(iframe).attr("onload","submitForm();");
function submitForm(){
$(iframe.contentWindow.document).find("#MobileNoLogin").val("9999");
$(iframe.contentWindow.document).find("#LoginPassword").val("pass");
$('#button').click();
}

Categories