We pushed a small UI change to the site last night. The google analytics code is in the header and has not been touched at all (entire header for the site and all the pages have not been touched at all)
Since the change, we are seeing a lot of hits logged to the page "/site/loading" which is not a page on our site. Even when we visit the site to test, we are occasionally seeing the active page show up as "/site/loading" instead of "/" or the specific page we are visiting. The pages are loading fine and the site is working fine. The error is happening somewhat randomly. Occasionally when someone visits the home page, it shows up as "/site/loading" and occasionally shows up correctly as "/"
Unclear why this is happening or what we might have done to trigger this changed behavior. Until yesterday, our tracking seemed fairly accurate.
Appreciate any ideas or suggestions
Next time just do a search for the url endpoint in your codebase....
var urlToLoading = '/site/loading';
function attachModalForJobs() {
$('.listing-job').find('.title a').click(function(e){
e.preventDefault();
var link = $(this);
$('#modal-external-site').modal();
$('#modal-external-site').on('shown.bs.modal', function (e) {
var modal = $('#modal-external-site');
var bodyHeight = modal.find('.modal-content').height()-modal.find('.modal-header').outerHeight(true)-modal.find('.modal-footer').outerHeight(true)-20;
modal.find('.modal-body').height(bodyHeight);
//modal.find('.modal-body').load(link.attr('href'));
modal.find('iframe').attr('src', link.attr('href') );
modal.find('iframe').attr('height', bodyHeight );
modal.find('iframe').css('height', bodyHeight+'px');
//$('iframe').contents().find('body').addClas('transform');
//var head = $('iframe').contents().find('head');
//head.append($('<link/>', { rel: 'stylesheet', href: 'http://dev.tapwage.com/themes/dark/css/tapwage.min.css', type: 'text/css' }));
});
$('#modal-external-site').on('hidden.bs.modal', function (e) {
$('#modal-external-site').find('iframe').attr('src', urlToLoading );
});
});
}
There is an javascript in your page that loads that page (which leads to a 404 page that contains you tag management/analytics code). Around Line 935 in the code you have:
var urlToLoading = '/site/loading';
function attachModalForJobs() {
.......
$('#modal-external-site').on('hidden.bs.modal', function (e) {
$('#modal-external-site').find('iframe').attr('src', urlToLoading );
I assume that's where the logged url originates.
Related
My goal: I have a form that is in parts, 1-4, when the user clicks on the "Next" button I would like the content to animate out then part 2 slides, and so on until the form is complete. The tricky part is I would am trying to use a different php page in a different subfolder to insert as the other 3 parts. This would also change the URL subfolder the user sees.
The working example is actually WordPress. When you click through the multi-part form you will see the content and the URL act as I have described.
I did a bit of digging and it seems like they used React.js on the content but I couldn't really find any documentation on how to do this with React.js so it made me think that maybe it was custom Ajax/jQuery or what.
My Trees of Folders -
Main
Subfolder-1
index.php
Subfolder-2
index.php
And so on. The only thing I could think of would to use jQuery:
$(document).ready(function() {
$('#form-container').on('click', '.insert', function() {
var directory = $(this).attr('name');
$('#form-container').load('../' + directory);
return false;
});
});
I add the class of "insert" on the "Next" button and give it a name="Subfolder-2" $('#form-container').load('../Subfolder-2);' will actually load the content into the div without the page refreshing BUT it does not change the subfolder in the URL.
Am I on the wrong track? Maybe I am just not searching for the right thing?
Ok, so I ended up figuring out how to get the content to act like I wanted with the information John S. provided me. After doing some research and a few hours of trial and error I came up with the JavaScript below:
var data = 'start',
url = '../' + data + '/';
history.pushState(data, null, url);
Above I set the variables and immediately run a history.pushState on page load to capture the first div that is loaded into the content div. This is important because it is the only way I could load the content that happens on initial load back into the page when hitting the browsers back button.
$('body').on('click', '.insert', function(e) {
data = $(this).attr('data-name'),
url = '../' + data + '/';
history.pushState(data, null, url);
request_content(data);
return false;
});
Then I add a click listener to the button with the class .insert reset the variables so instead of grabbing the page that initially loaded it grabs the page that will be loaded, then use history.pushState again to change the url that is determined by the variables.
The request_content function is a simple .load function. So when the button is clicked the variables are set, the url changes and the new content get loaded into the page while the old content disappears.
The final piece to the puzzle which took me the longest to figure out is actually the popstate function. I am still not 100% sure why it works but after hours of messing with it and finally getting it to work I am not going to question it.
window.addEventListener('popstate', function(e){
var data = e.state;
if(data === null) {
} else {
request_content(data);
}
});
This popstate function is what allows the content to come back when hitting the browsers back or forward navigation.
CSSTricks < this article at CSSTricks helped a TON when learning this method.
Thanks again to John S. for pointing me in the right direction!
I have a few buttons that are properly linked on my website, it rarely works, most of the time it does not. when I right click and open in a new window they work else it wont.
http://studentnet.kingston.ac.uk/k1003140/group8
Any one knows why and how?
here how they are linked:
Spain
and the page spain exists. please do not give me a minus if you won't even comment.
I checked your website and i found you have a js script called general.js it calls this function
$(document).ready(function() {
//initial
$('#midcontent').load('content/index.php');
//handle menu clicks
$('ul li a').click(function() {
var page = $ (this).attr('href');
$('#midcontent').load('content/' + page + '.php');
return false;
});
});
and content/index.php is unreachable and causes an error in the console log, when i disabled javascript on your webpage the links worked fine.
as you see it adds extra content/ before the link and .php at the end, try to remove it
So I'm not really sure how to explain this, so I will just provide an example. I'm using fullCalendar jquery calendar to populate events in a calendar on my page. fullCalendar has a method called 'eventClick' which you can then run some code.
Basically I'm trying to go to a page on my site (the event page) when clicked and passing it the URL like so:
$('#calendar').fullCalendar({
events:array,
eventClick: function(event) {
if( event.url ) {
window.open(event.url);
return false;
}
}
});
event.url is a string that I'm pulling in from Wordpress and is displayed like so:
http://sitedomain.com/?post_type=events&p=340
The Problem
When I click on an event, the URL gets encoded differently and displays like this:
http://sitedomain.com/?post_type=events&p=340
where & gets replaced with & which then obviously doesn't go to the correct page on my site. I rewrote my click method like so but I still get the same results -
$('#calendar').fullCalendar({
events:array,
eventClick: function(event) {
var page = event.url;
page = page.replace('&', '&');
if( page ) {
window.open(page);
return false;
}
}
});
Anyone have a solution?
Thanks,
Well I feel stupid.
I guess I failed to mention that I was using window.location.href whereas in my example question I was using window.open.
The problem was that I was getting the syntax incorrect for window.location.href using it like so:
window.location.href(event.url);
instead of
window.location.href = event.url;
Reminder to get your syntax right and then things will work like you think they are suppose to... :) Thanks for the help all.
I'm new to this whole programming business and I'm trying to put together a simple website for myself.
At present the website has a header, some navigation links, a makeshift image below the nav(which will be amended later and isn't relevant to the question much), and below that I have 3 content divs. The main content div, and two more to the right of it which I'm intending to be my sidebar widget for maybe a twitter feed, ads, that sort of thing.
I've set up the navigation links so that external pages are loaded inside my left-col div(my main content area). The Ajax works grand, as it is, it does exactly as was said on the tin.
The issue is each nav link reads javascript:ajaxpage('pageaddress.php','left-col');
Couple of things I don't like about that:
When you refresh the page it will naturally load the index.php content
Because the website address remains the same throughout browsing. It doesn't change to, let's say, /About.php.
Also, this doesn't work out well for SEO. Assuming I want individual page addresses, titles, and what not - and I do.
There is no real problem with the script, it works sure enough, it just doesn't work how I want it to work. Here's the Ajax script anyway.
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
and here's and example of a navigation link
<ul id="nav">
<li>Design</li>
Is there a way I can alter the Ajax so that each page loads inside the div, while also changing the url, allowing me to have different titles for each page, and also preventing the website from loading the index.php on refresh?
If not, does anyone know of any other scripts of methods of loading pages - and it doesn't necessarily have to be ajax - into a div only while doing what I want it to do(diff urls, titles, etc,)
This is my first time posting so hopefully my question is clear enough - albeit long - and is formatted properly.
Thanks, Chris.
For easy Ajax handling you can use for example jQuery.
But that doesn't change anything about the "changing the url" problem. For that you should use hashes (#). Your urls would look like index.php#about or ../#about. You can check that string after the # and show an individual page.
var hash = "default.html";
if(window.location.hash)
hash = window.location.hash.substring(1);
switch(hash){
case "default":
showPage(1);
break;
case "news":
showPage(2);
break;
// ...
}
Take a look at this question Redirect all website traffic to PHP handler, pitfalls?
In the handler (index.php) you can set title, content (include) base on $_SERVER['REQUEST_URI'].
Here is my code :
$('li a').click(function() {
var link1=$(this).attr('href');
$('section:#main').load(link1);
if (link1!=window.location) {
window.history.pushState({path:link1},'',link1);
}
});
The url on the browser is changing but if the user clicks refresh on the browser it will give the url page only, not the complete one.
I use a very simple jquery plugin for this.
http://benalman.com/projects/jquery-hashchange-plugin/
Works fine and remembers the page loaded by the hash tags, ex: www.site.com/#yourajaxpagetag