We Keep Coding

Is it possible to use window.location.reload() on a page to reload all contents but one?

I'm fairly new to javaScript & would like to know if is possible to use window.location.reload() on a page to reload all contents on a page but one? I've researched google but to no avail.

To answer your question, no it is not possible to reload the page partially with window.reload()
What you could do though is fetched the HTML page and use it to replace partial content on your page. It would be better if your backend could serve already the parts of your page you need individually, so you only have to update the content of the page instead of parsing some HTML first, but it can work both ways.
For example from one sample project I made. This will fetch periodically some HTML from the backend and update the page partially.
You can see the full thing here https://repl.it/#bluebrown/SSR-Dataframes#templates/dashboard.html
const fetcher = Object.entries(frames).map(([id, {refresh_rate}]) => {
function refresh() {
fetch(`/df/${id}`)
.then((bytes) => bytes.text())
.then((html) => document.getElementById(id).innerHTML = html)
.catch(console.warn)
return setTimeout(refresh, refresh_rate*1000)
}
return refresh();
})
This works so well because the backend and the frontend know each other well.
In other cases you may want or need to fetch a full page and parse it with something like jsdom. Then you can grab from that DOM what you need and update the right element on your page.

The location.reload method reloads the current document, just like the user pressed F5 or the browser reload button.
The default setting reloads the page from browser cache, if it is available. You can force the method to bypass local cache and retrieve the document from the network by passing true to the method.
location.reload(); //refreshes from cache //or location.reload(true); //to force a network request

You can not do that, location.reload will reload the current document. Only way I can think, and this may not work with your page design, you can put the different contents in separate iframes, and reload only those iframes that needs reload/refresh.

Integrating HotJar in SPA with same URL

I'm trying to integrate Hotjar with an admin panel.
The way it currently works is some sort of SPA without page loads and neither URL changes.
It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.
From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).
Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ?
I've tried
hj('vpv', 'Main Page')
But the output seems weird
url: "http://mydomain.comTest Page"
Thanks.

You can track your changes manually by adding additional JavaScript after your AJAX calls.
Documentation:
To Manually Issue a State Change
hj('stateChange', 'some/relative/path');
Example:
Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button.
In order to do that, you would need to:
1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.
2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page.
You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:
hj('stateChange', 'http://example.com/my-dynamic-page');

avoid navigation from the browser url

I have a project in which I have several sections. the user can only interact with my application through the internal navigation. but if the user writes something in the url, and reloads the page, I would like to be redirected to some state or failing to allow it. how can I do this?
I have this in my code. and in my real project I do validation depending on the state I receive, but in this case I do not know how to detect when navigating directly when writing the url from the browser navigation bar.
$transitions.onSuccess({ }, trans => {
})

There's an http header that every browser sends. It is the Referrer Header but it's the server ho check it.
Anyway could you explain why you do not want the user to use the url to move around the application?
From a security perspective block this is not a good solution, you must use something like this https://www.theodo.fr/blog/2015/08/handling-basic-route-authorization-in-angularjs/

This might work. It's rather hard to test URL routing on plunkr.
Inject $urlService somewhere (such as a .run() block) and disable URL navigation.
.run(function($urlService) {
$urlService.deferIntercept();
});

How to track exit links

I have a website with embedded videos. Each iframe comes from different website.
The problem is that some of them, are redirecting my visitors to their assigned destination without actions (click, hover, etc). And now Google is listing my website as suspicious.
Is there any php script to track every single exit link from my pages to another website?
Let's say i'm using Wordpress and have already created $table_name tracking 1-timestamp, 2-my page that was redirected, and 3-the destination of the external website/domain.
function the_function() {
// if there is any function
}
if ( the_function() == true // or false )
{
$wpdb->insert($table_name, array(
'timestamp' => $timestamp,
'page' => $my_page_redirected_to_a_different_domain,
'destination'=> $destination,
));
}
Or if there is any js script, no problem

There is no way to track down redirects in a general way - you have to trigger an event right before the redirect is processed, so you have to know how this happen.
Why ? Because a JS redirection is processed by the browser and not on the server side - which means the only way to trigger an SQL insert is to know how the redirection is triggered. This is basically what you want to achieve:
What you can do to locate the redirection
Search for every occurences of window.location in your JS files - you could search for the URL that you've been redirected too (all your local js files and the external ones you include)
Disable (with comments) the external <iframe> you're using. An iframe can do a window.top.location.href to redirect the main page.
An other way to redirect the page would be to trigger a click event on a link through JS. I guess by searching for the redirect URL in your js file you could locate that too.
Last, if the redirection happens before the page is load, it could a PHP redirection - looking for header calls that redirect to the URL in your php files would catch that.
What can be done when the redirect is found
It's a JS redirection (window.location)
If it's inside a local file, you can just comment it if you want to disable it, if you want to keep it but track it, add this code right before the window.location call (it's jQuery, it will make an AJAX request to /log-redirects.php) :
$.post( "/log-redirects.php", function( data ) {
// ADD the window.location line here
});
It's really important that you move the window.location call inside the AJAX callback, so the redirection will be made only when the ajax call is finished.
If the redirection happens in an external js, you could not probably do anything besides removing the whole JS file - maybe get the JS file content, remove the redirection and include it locally.
One thing you could try is to add a listener on the beforeunload event - though you'll have to do the correct check on the event object to see if it's the redirection you're looking for, as it'll catch any unload events.
window.addEventListener("beforeunload", function (e) {
// do something
return false; // will result to a prompt to the user asking him if he really want to redirect
// return this only for the redirect you're looking for
});
Please note that this method doesn't seems to be completely reliable.
It's from an <iframe>
You can add the sandbox attribute to the iframe to prevent it to do any redirect. Please note that this attribute is not supported in IE9 and lower.
<iframe src="http://youriframeurl.com/" sandbox=""></iframe>
It's a click event triggered through JS
You can do the same thing as for the first point. You just want to add a listener to the link (using on if it's generated after DOM is load) :
$('a#mylink').on('click', function(e) {
// do something
e.preventDefault(); // add this if you want to cancel the redirection
});
It's a header redirection (PHP)
That's an easy case - just add the code you want before the header call.
Conclusion
I suggest to work first with the beforeunload event to track the redirection - doing a console.log(event); could give you some insights on the cause of the redirection.
Good luck!

Is there any way to quickly and easily convert standard website loading to AJAX on entire website?

Maybe that's not a good question but I'm wondering if it would be somehow easily and quickly (with just 1 function perhaps?) possible to change ALL links on website from refreshing webpage to loading the URL that user clicked via AJAX?
My website has standard links everywhere but if you want to have mobile application for iPhone out of it you need to use AJAX everywhere (and perhaps HTML5 History API) because any link will open Safari browser.
Do you think there's any way to quickly convert every single link to delete current source code and load brand-new page without refreshing browser window? Or does it require manual coding and separate functions for every single set of links?
Example:
jQuery(document).on('a', 'click', function(){
// STEP1: AJAX call that will make PHP download page from link
// STEP2: Delete current source code and load new one (in this case including deletion of this function itself)
});
Do you think it would be possible or are there any pitfalls here?

I've done something similar to this. It's possible, but you may have to change a couple of things on server side.
In my case, i had some links with href = #, some of them had click triggers, so i wanted to keep them out.
In this function i check every link without href = #, and if they don't have a click event, i bind ajax.
bindAjaxLinks: function() {
$('a[href!="#"]').each(function() {
var eventObj = $(this).data('events');
if (!eventObj || !eventObj.click) {
// not a javascript link, do your thing
var link = $(this).attr('href');
if (link) {
$(this).click(function(event) {
event.preventDefault();
// do your ajax calling here.
});
}
}
});
Some considerations: In my case, i added an extra parameter, something like isAjax to every request i made with this function, and in backend i sent only a part of whole page(without head and some other markup). And later i replaced what is visible to user with this new html.
This caused a problem: if server responded with a redirect, i got the whole page, which i didn't want, so i made sure this isAjax parameter is kept after redirects, and that solved this problem.