Develop Reference

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/

Handling Dynamic Routes Without a Server

Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?

your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.

I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.

It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.

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

load external webpage and add custom header and use the data from webpage

I want to load a external webpage on my own server and add my own header. Also i need to use the data from the external website like url and content (i need to search and find specific data, check if i got that data in my system and show my data in the header). The external webpage needs to be working (like the buttons for opening other pages, no new windows).
I know i can play with .NET to create software but i want to create a website that will do the trick. Can this be done? Php + iframe is to simple i think, that won't give me the data from external website and my server won't see changes in the external url (what i need).

If it's supposed to be client-side, then you can acquire the data necessary by using an Ajax request, parsing it in JavaScript and then just inserting it into an element. However you have to take into account that if the host doesn't support cross-origin resource sharing, then you won't be able to do it like this.
Ajax page source request: get full html source code of page through ajax request through javascript
Parsing elements from the source: http://ajaxian.com/archives/html-parser-in-javascript (not sure if useful)
Changing the element body:
// data --> the content you want to display in your element
document.getElementById('yourElement').innerHtml = data;
Other approach (server-side though) is to "act" like a browser by faking your user-agent to some browser's and then using cUrl for example to get the source. But you don't want to fake it, because that's not nice and you would feel bad..
Hope it gets you started!

Including third party header and footer

I have a small web app. My clients use it on their site. To make it look seamless (a part of their own site), they put my app inside an iframe on their website. This way I don't have to worry about the header and footer (branding/styling etc). Now for some reason, the specs have changed and now the app will not be inside iframe. This leads to the problem that I will have to maintain a consistent header and footer branding/styling for each client. I have many clients and it is not possible for me to maintain each one of them and keep it updated all the time.
So, I am trying to come up with solutions that will allow me to inherit the header and footer from client and use it on my site. I was thinking about telling the client to maintain a header and a footer html file (and maintain it as per their branding). I will then make an AJAX call and call their HTML content on my page. This way I never have to worry about header and footer.
What other ways you can suggest I can solve this problem? Any experiences with such situations? How did you deal with it?
I know this is not a specific programming question but I thought this is the best place to get answer.
Thanks

Instead of placing your web app inside an iframe you can place the header and footer inside an frame in your web app.

Since you are using PHP, I may recommend you include a "templates" directory and you can apply the template, based upon the client profile.
In general, store the client header and footer HTML file location in your Database, and look up which template to use. Then in your PHP header file, include something like:
define('CLIENT_HEADER', '**header string returned from your database**');
define('CLIENT_FOOTER', '**footer string returned from your database**');
define('DEFAULT_HEADER', '**default header location in template dir**');
define('DEFAULT_FOOTER', '**default footer location in template dir**');
if (isset(CLIENT_HEADER)){
include(CLIENT_HEADER);
} else {
include(DEFAULT_HEADER);
}
...
the body of your webpage
...
if (isset(CLIENT_FOOTER)){
include(CLIENT_FOOTER);
} else {
include(DEFAULT_FOOTER);
}
Of course, you would need to customize this to your particular application, but this would automatically load the proper header/footer once loaded into the database. It don't think it will work if the header or footer file isn't located on the PHP server, unless you mess with the php.ini file (I'm not an expert at that level, maybe someone else can comment on that).
I hope that helps!