history.pushState ajax content, not re-running js on $.get data - javascript

/Editted//
I am trying to make my webapp have a nice loading animation between pages, and to quickly fetch them. It breaks the second time when I click a link. It feels as if the script only allows itself to be run on the original content, and not the newly loaded remote content. Or it might be that it only is working once, on the first link and back button. I can't figure it out.
////////////// Change page function ///////////////////
function changePage(href){
$('div#pre-loader').removeClass('hide');
$('.page-content').addClass('hide');
var newHref = href.replace(site_url, site_url+'/data');
$.get(newHref, function(data){
$('div.page-content').replaceWith(data);
$('div#pre-loader').addClass('hide');
});
}
///////////Link click///////////
$('a').click(function(e){
if (Modernizr.history){
if($(this).hasClass("internal-link")){
e.preventDefault();
var href = $(this).attr("href");
history.pushState(null, null, href);
changePage(href);
}
}
});
//////////// Back button ////////////
window.addEventListener('popstate', function(event) {
newHref = site_url + location.pathname;
changePage(newHref);
});
When I add in the /data/ part to the url my server only returns what's inside the page-content div, and it isn't hidden anymore.
EDIT
Realized the issue, it seems that the js which I have already loaded(in app.js, where the above code is) is not running on the newly loaded content. This would be because I leave all my CSS and JS files intact, and only load the content(with the extra /data/). Now I have tried googling and searching all through SO, and nowhere does it seem to address the issue. Is there any simple script which i can include in all the /data/ files which will reload the js, or is there a way in which i can make my scripts automatically run on new content?

Related

Handling url targeted PHP page with custom jQuery loaded content

First I used include('pageName.php'); for every page I wanted to load.
Now I decided to rewrite everything and to load a page in a <div id="page_content"></div> with the jQuery function: $('#page_content').load(pageurl, {access:true});
I hope this is the best practice. Because I want to reduce load time on my web application by not refreshing the whole website with all CSS and JS files but just to refresh content when clicked on a new page.
Currently I am using the following function to load pages into the division and to pushState to history:
//Dynload pages
$("a[rel='dynload']").click(function(e) {
e.preventDefault();
var page = $(this).attr("page");
var pageurl = "pages/" + page + ".php";
$('#page_content').load(pageurl, {access:true});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',page);
}
//stop refreshing to the page given in
return false;
});
This works perfectly.
I have this button that triggers this function and gives for attribute page="index_content" . The function will load this page to the division and the state is being pushed into the history.
However. We get an url something like this: https://mywebsite.com/index_content
The problem is, when I load this specific URL into my browser I get : "Page not found" ofcourse, because it is trying to search for the index_content folder which does not exist.
Is there a way to check the url by my PHP/jQuery script and to load the correct page into the division? If not, how can I solve this for a generic case.
When I add a new page, I want to spend no- to very less time on the pageswitcher function.
In that way I can also handle non-existing pages.
Thanks in advance!

Angular Script not running when page is reopened

This is the first website I have ever made: http://moneyforkids.ca/old
And I am having a problem that I cannot seem to figure out.
If you visit the certificate page, you should be able to type your name onto the certificate. However, if you click on a different tab and then come back to the certificate tab, you are unable to type your name on the certificate. Instead you just see {{ name }} in the middle of it, which tells me the angular script is not running.
Here's my code that executes the angular script: http://moneyforkids.ca/old/js/index.js
EDIT:
I achieved the expected behaviour by changing the index.js file to :
$( function() {
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#content').remove();
$('#container').load(url + " #content").hide().fadeIn('slow'); // Load content with AJAX
if (url.slice(-13) == "practice.html") {
$.getScript("js/practice.js");
$.getScript("js/ui-spinner-behaviour.js");
} else if (url.slice(-16) == "certificate.html") {
$.getScript("js/certificate.js");
$.getScript("js/ui-spinner-behaviour.js");
$('#angular').remove(); //Remove any previous angular script tag
$('<script id="angular" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>').insertAfter('section'); // Reload the script
} else {
$.getScript("js/repeatPictures.js");
}
});
})
The updated .js file above fixed the website. You can see the new version of the website without the problem by removing the /old at end of website address (I can't post more than 2 links).
However, I don't understand why this fixes the problem!
it's not angular got confused it's your code. you are loading angular on click then you need to check on second click if angular is loaded then just don't load it again. If you notice when you click one time on Certificate tab there is no **{{name}}** but next time you click the tab again and then angular break down and you see **{{name}}**

Loading a page from hash on refresh

So I wrote this piece of JavaScript using the JQuery library. Its functionality is to have the pages load inside of a div instead of an entire page (to make modifying the layout way easier).
I've made it so it successfully saves the 'file URL' in the hash and I've made it so it loads correctly, but I can't for the life of me figure out how to go to that page.
When I try to go to a page with the hash in the name (so for example refreshing a page, or going through a link/URL) it replicates itself (I think) two times inside each other. You can see it happening live at overeten.be and then try to refresh a random page except the main one.
Could someone help me with this problem? Thanks in advance!
$("document").ready(function(){
$('._body').load("pages/default.html");
var locationhash = window.location.hash.replace('#','');
if ((locationhash=='pages/default.html')||(locationhash=='')){
console.log("no page, "+locationhash);
} else{
$('._body').load(window.location.hash);
console.log(locationhash);
}
$('.menubundle a, footer a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('._body').fadeOut(1000,function(){
document.location.hash = page;
$('._body').load(page).fadeIn(1000);
});
});
});
The problem is on this line:
$('._body').load(window.location.hash);
If you inspect window.location.hash, you get this:
window.location.hash
"#pages/over_eten/feit.html"
That URL points to the current page. What you really want is this:
window.location.hash.slice(1) // Skip the first character
"pages/over_eten/feit.html"
On a side note, it seems weird to me that you have two calls to $('._body').load(). The first one seems like it belongs right above console.log('No page...') instead.

How do I relocate the user to contents of another page without page refresh when navigating?

Im using javascript - ajax and jquery to load all contents from php files which is under (#menu a)[see below 'you.php'] without refreshing the page when navigating across the page - which works perfectly.
However, how do I create a hyperlink of somesort on content-A (which loads and shows all the contents from home.php) when clicked, it relocates & shows the user to/the contents of settings.php(B).
Please note my href hyperlinks doesn't have .php at the end. The 'general.js' file explains why.
(you.php):
<div id="menu">
Home
Settings // Content (A)
</div>
<div id="content"><div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/general.js"></script>
(general.js):
$(document).ready(function() {
// initial content that will be loaded first upon logging in:
$('#content').load('home.php');
// handle menu clicks
$('#menu a').click(function(){
var page = $(this).attr('href');
$('#content').load('' + page + '.php');
return false;
});
});
(home.php):
<h1> welcome to homepage </h1>
Would you like to go to your settings?
Click here: <a href="settings.php>Settings</a>
Obviously the problem with doing the href hyperlink like this in home.php, is that it goes directly to the settings.php page. Which makes my general.js (ajax) and jquery file pointless.
Since the whole point of using ajax and jquery is for smooth navigation and no page refresh upon navigating around the website.
and No, I do not want to load the contents of settings.php within the contents of home.php, 'loadception' is not what I'm looking for.
This is my simple question, I would like a simple answer in php,javascript,ajax.
Any ideas?
You need to use event delegation. To better performance in my example, all links that must be loaded into "#content" have a class "open" so, in jquery you could do some like this:
$('#content').on('click', '.open', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load('' + page + '.php'); // concat .php if it's only necessary
});
Updated
I created a demo on github: https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation

how to refresh the browser after the page is loaded

I have a scenario to refresh the browser after the page is loaded for first time or one time.
Because the data is not showing properly when the pages is loaded,and when i refresh the browser it is showing.I don't know the reason.
Many Thanks
So you only want the browser to refresh once? Do something like this.
window.onload = function(){
if(!document.location.hash){
window.location = "#loaded";
}
}
or jquery
$(document).ready(function(){
if(document.location.hash){
window.location = "#loaded";
}
});
But in all honesty this is just a temporary solution. As much as you try to cover it up with quick fixes. I guarantee it will come back to haunt you. Well written and structured code will last a lifetime and can always be reused on future projects.
Invariably, you're going to have to use some JavaScript. What you want is for your refresh code to run when the page is completely loaded. You could use the HTML onload event, but there are problems with this (e.g. it will fire before any images are loaded). I would suggest using JQuery's ready() event, if you want to be sure it fires after the entire page is loaded.
Example:
// NOTE: This will only work with JQuery loaded.
$(document).ready(function(){
location.reload(true);
});
Making this only fire on the first page load is a bit more tricky. You could add an anchor suffix to the URL to keep track of whether you've refreshed the page yet or not, and then only refresh if it is not present in the URL:
$(document).ready(function(){
if(location.hash != "#")
{
// Set the URL to whatever it was plus "#".
// (The page will NOT automatically reload.)
location = "#";
// Reload the page.
location.reload(true);
}
});
Alternatively, you could use the query string, since this will automatically refresh the page when changed:
$(document).ready(function(){
var marker = 'r'; // 'r' is for "refreshed"
if(location.search != "?"+marker)
{
// Set the URL to whatever it was plus "?r".
// (This will automatically force a page reload.)
location = "?"+marker;
}
});
Caveat: With either of these samples, if your user bookmarks the page after the "#" or "?r" tag has been added to the URL, the page won't refresh when they revisit the page. If you want it to be bulletproof, you might have to use a cookie instead.

Categories