Angular Script not running when page is reopened - javascript

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}}**

Related

Need to click Javascript URL automatically on page load

I am using below Javascript function for the Link in the homepage. Requirement is to link clicked automatically on page load.
Link-
document.writeln("Live Chat");
I have tried below steps like adding document.getElementById('zautoclick').click(); and added id="zautoclick" before href but the problem is that my page does not show the link neither it loads the second page which comes after clicking on Live Chat.
Please share some logic to work auto click in my scenario.
try this out
1)
$(function() {
$('#watchButton').click();
});
2)
window.ready=function(){
document.getElementById("linkid").click();
};
3)
window.onload=function(){
document.getElementById("linkid").click();
};

window.location.href.indexOf not working properly

I'm currently using window.location.href.indexOf in my current project. I've noticed that it doesn't seem to work properly. For example this code that I made.
$(document).ready(function () {
//Show Sign Up drawer if user clicks on referral link
//It will show the Sign Up drawer once the word "referral" is found in the URL
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
This code what it does is to add a class in an element if the word referral is found in the URL. The add class being inserted will then slide a sign up drawer. Here is what happened during testing.
In my first test, I tried inserting the word referral in the url. After typing in the word and pressing the Enter key, the javascript I'm trying to run did not trigger
But after refreshing the browser or inserting the word again it now works. It currently shows the sign up section.
How can I ensure that the code window.location.href.indexOf will work in the first try or without refreshing the browser again. The website is built on a angular framework
If you only change the URL after the # sign, the page won't reload, since you're only changing the anchor part of the URL.
Your code wrapped in $(document).ready(function () { ... will only run once, when the page loads.
What you want to do is to add a listener for the route change event and run your code in that handler, something like this:
$rootScope.$on("$routeChangeSuccess", function() {
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
It does not work because your script (e.g: main.js) is executed only one time when the page load.
You might want to use window.historyto manipulate the browser history. You can update the query string with pushState()
History API
Hope it helps.

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.

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

/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?

Open link in same page and once link is open, execute some code

I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...

Categories