Develop Reference

Redirect a specific url that is not found with javascript in header

I moved my website and I have a QR code (which is printed in public and can't be easily replaced) that points to a specific file on my old website that has now been moved. Currently, the URL just points to a "Not found" page on my new website. I try to use javascript in the header to catch the URL and forward it to the right URL as following:
<script type="text/javascript">
if(window.location.href === "https://www.website.com/multimedia/hoerproben/1.mp3")
{
window.location.href = "https://www.webseite.com/app/download/10079133850/1.mp3";
}
</script>
But it doesn't work. Any hints what I am doing wrong?

when you open an url, the browser makes an http request to your server for that particular resource (in your example, an mp3 file).
JavaScript is not involved at all (actually, there are so called "service workers", but they are not what you're looking for, they are meant to do caching, not redirecting). The browser does not know that your JavaScript code exists and would not execute it.
What you should do is route redirecting from server, so when the browser asks from /oldlocation/file.mp3, instead the server answers with /newlocation/file.mp3
This could be in some different way according to your server. If you have no control on how your server works, what you're asking is simply not possibile.

It won't work unless you place that code in the "Not found" page that gets served. If your URL pointed to an HTML file, you could have just placed one to do the redirect. For media files you would have to configure your server to serve an HTML file instead. Don't worry about the extension, it's the Content-Type header that determines the type of the file served. Doing this, however, is not good practice because your server would still be returning a 200 response code.
It's good practice to return 301 Moved Permanently as 101arrowz pointed out in the comments. How that can be accomplished will depend on what server you're using.
Here's how that would have been accomplished with express.js:
app.get('/multimedia/hoerproben/1.mp3', function(req, res) {
res.redirect('/app/download/10079133850/1.mp3');
});

Website javascript calculator not working, need solution

I recently made my website SSL certified, but now my calculator is broken.
Url: https://secondunitcentersmc.org/calculator/
Please help provide a solution, the only affected drop down is the first location one.enter image description here
Console Log Error:
angular.js:12011 Mixed Content: The page at 'https://secondunitcentersmc.org/calculator/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://secondunitcentersmc.org/wp-content/themes/secondunitcenter/calc/data/rents.json'. This request has been blocked; the content must be served over HTTPS.
Changing this URL to https does not work, (it causes the form to not appear) neither does changing $http to $https in both locations within the file
Image from scripts/app.js of my website. It is also a wordpress site.

So When I navigate to http://secondunitcentersmc.org/wp-content/themes/secondunitcenter/calc/data/rents.json it is automatically changing to https. In your js file where you make the call to this page, does the url there start with http or https?
Instead of using a json file for this data, you might want to consider creating a private custom post type for the locations, then you can just use the standard wordpress query to call them into the drop down. It will also be easier to add and edit them in the future. (and get rid of your https/http error :))
How did you add https to your site? with a plugin or manually? If manually- you need to update your site address and wordpress address in general>settings as well as add some code to your .htaccess file. more info here (method #2) https://www.wpbeginner.com/wp-tutorials/how-to-add-ssl-and-https-in-wordpress/

How do I check if a folder exists over https

I'm hosting a webpage on github (flickrTest.html) and I'm trying to check the existence of a folder in the same directory as the webpage. The hosted folder looks like this:
http://imgur.com/a/pZWoH
I try to use an ajax call like this:
$.ajax({
url: 'mapData',
error: function() {
//Ddirectory doesn't exist
console.log("ERROR: expected directory named 'mapData'. Exiting...");
return
},
success: function() {
//Directory does exist
console.log("mapData exists..");
...
but I'm getting a mixed-content error because this call is considered http and the site my webpage is being hosted on is https. Somehow I'm able to access mapData's JSON files if I include the absolute path. Is there a way to check for the existence of a folder over https?

First, there is a fundamental problem with your approach. As others have stated in comments, you cannot check if a folder has contents (or exists) with a simple http (or https) web request since the web server will expect to respond with HTML that can be presented as information for a user's browser. You can create a handler or script that will process a directory request and map that functionality using something like a .htaccess rule or other rewrite system depending on what platform you are on. The reason why I've identified this as a "problem" and have not gone as far to say it's impossible, is because you can (as it appears you are attempting) parse that response into something usable. That said, I think it's beside the point and not the nature of the error you are actually getting.
The error you are experiencing is coming from loading the current page you are on in HTTPS and the ajax request you are making is over HTTP (as indicated by the error message). This message can be misleading in your case since it's not that the request URL has not been identified as HTTPS, it's because the browser doesn't trust that the URL is a Web request to either a file or a folder. You can correct this by simply adding a trailing slash to the folder:
$.ajax({
url: 'mapData/',
error: function() {
//Ddirectory doesn't exist
console.log("ERROR: expected directory named 'mapData'. Exiting...");
return
},
success: function() {
//Directory does exist
console.log("mapData exists..");
...
You have now resolved the issue of completing the web request, but you are faced with a problem that is mentioned in the first part. The server will return a 404 error because that is how github.io is configured to respond to empty (or non-existent) directory requests. You will need some type of server-side handler to process this request, or you will need to come up with something else creative such as putting an index.html in that folder so that your JavaScript can parse the result. For instance, you could drop an index.html in the folder and if the server returns 200, then you know the folder exists, but if it returns 404 then you can assume the folder does not exist.
In case it's not already known, web servers are designed to make it so that a browser is limited in reverse-engineering it's content. While servers can be configured to return directory contents, by default, most are going to protect folders so that remote users cannot browse the server without some type of elevated permissions/authentication. Essentially, the reason why this requires a a more customized server-side approach is not because there is something wrong with the front-end code, it's because the web server is designed to not allow this type of thing without the server being configured to allow it due to security.

How to change the url being called by javascript without access to the javascript

I have an jQuery('#Frame').animate360 script on page and it calls a file called Profile.xml to get its settings etc.
Problem is Profile.xml is on Azure Blob and is in uppercase (PROFILE.XML). This means a 404 file not found error.
I can't change filename(Profile.xml) on azure.
The piece of JS that calls the Profile.xml seems to be encrypted in a library (HTML5Loader.js) i.e. The text 'Profile.xml' does not appear in any file and can only be found with chrome debugger in an unnamed file.
My instinct was to use something like Application_BeginRequest etc to catch a 'call' to https://storageblabla.blob.core.windows.net/uploads/ALPHA/3DIMAGES/1.010659/Profile.xml
and change it to ...../PROFILE.XML
but it's to late at that stage. It already knows that its a 404.
There must be some access, with code, to a point where a remote url is being called that can be intercepted.
Rekon its a one line fix but I just can't find the right term to search on.

Angular Removed # tags in urls. But not working as expected

I just removed # tag from my url of angular single page app.
I did like.
$locationProvider.html5Mode(true);
And It worked fine.
My problem is when I directly enter any url to the browser it showing a 404 error. And its working fine when I traverse throughout the app through links.
Eg: www.example.com/search
www.example.com/search_result
www.example.com/project_detail?pid=19
All these url's are working fine. But when I directly enter any of the above url's into my browser it showing a 404 error.
Please any thoughts on it.
Thanks in advance.

Well i had a similar problem. The server side implementation included Spring in my case.
Routing on client side ensures that all the url changes are resolved on the client side. However, When you directly enter any such url in the browser, the browser actually goes to the server for retrieving a web page corresponding to the url.
Now in your case, since these are VIRTUAL urls, that are meaningful on the client side, the server throws 404.
You can capture page not found exception at your server side
implementation, and redirect to the default page [route] in your app.
In Spring, we do have handlers for page not found exceptions, so i
guess they'll be available for your server side implementation too.

When using the History API you are saying:
"Here is a new URL. The other JavaScript I have just run has transformed the page into the page you would have got by visiting that URL."
This requires that you write server side code that will build the page in that state for the other URLs. This isn't a trivial thing to do and will usually require a significant amount of work.
However, in exchange for that work you get robustness and performance. When one of those URLs is visited it will:
work even if the JS fails for any reason (such as a dropped network connection or a client (such as a search engine) that doesn't support JS)
load faster than loading the homepage and then transforming it with JS

You need to use rewrite rules. Angular is an single page app, so all your request should go to the same file(index.html). You could do this by creating an .htaccess.
Assuming your main page is index.html.
Something like this (not tested):
RewriteRule ^(.)*$ / [L,QSA]
L flag means that if the rule matches, don't execute the next RewriteRule.
QSA means that the URL query parameters are also passed with the rewrited url.
More info about htaccess: http://httpd.apache.org/docs/2.2/howto/htaccess.html