Changing pages URLs without using route controllers - javascript

First of all, sorry for the lame question (probably). I tried to search for an answer but I'm not finding everything I need for my issue.
So... I have a bootstrap website and I am trying to change the page URLS to appear like this :
For example : www.site.com/AboutUs.html - to appear as www.site.com/about-us
I am using the pushState method for this as it follows:
var stateObj = { AboutUs: "about-us" };
history.pushState(stateObj, "About Us", "about-us");
So I get the needed URL address there (www.site.com/about-us).. so far so good. But on page refresh it throws an error stating "The requested URL /about-us was not found on this server."
If I hit the back browser button it goes to www.site.com/AboutUs.html again.(and it is supposed to go on the home page)
My question is :
What am I missing, am I supposed to make a controller and how ?
I am not using C#, I can probably use some help with PHP because I am not good at it. JavaScript / jQuery are welcomed.
Thanks in advance and sorry for the dumb question.
Happy days!

The point of pushState is to be able to say: I have modified the page with JavaScript, the new state is what you would get if you just asked the server for this URL.
You shouldn't use JavaScript for this problem at all. You just want to have a page appear at a particular URL.
You need to configure the server to serve up the content you want on the URL you want.
What am I missing, am I supposed to make a controller and how ?
You need something on the server to handle the URL /about-us.
"A controller" is something you would probably use if you were using the MVC architecture on the server … and it doesn't sound like you are.
More likely you will be wanting to use an Alias, a tool like mod_write, or simply moving the static file to a directory called about-us and renaming it index.html.

Related

301 Re-direct for vanity url

Stumped with this one...I've got a case where we are doing something very similar to how a site like bitly would opperate.
We've got a vanity URL, say its "myurl.com/randompagename". We own the "myurl.com" but there is nothing called "randompagename" on the server. I initially suggested creating a "randompagename" and putting a JS redirect script in.
<script>
window.location.replace("http://anothersite.com/mynewpage");
</script>
Unfortunately I'm told with our hosting we don't have the ability to create pages or add scripts (sounds odd to me).
So now i'm wondering if I have no way of physically creating an end destination for the original page to house the redirect then how do I achieve this?
Would the user not just wind up on a 404 page because the vanity URL doesn't actually exist?
Edit
Does anyone know how a site like Bitly does their re-directions? That might help me better understand plausible solutions for this.

AngularJs deep linking to a specific ng-view

I followed a tutorial on angularJS with subviews using ng-views
I'm using html5Mode in my locationProvider and a nodejs backend
If I wanted to link to or hit refresh while on a specific ng-view, I could use a hashtag. So like, to explain: if my angular app lived on localhost:3000/app and I had a view at localhost:3000/app/subview, if I hit refresh my node server didn't know how to go to a specific view on the front end.
But if, on the server side, a request came through for /app/subview and I redirected to or rendered /app#/subview (with the hashtag in there), then I went to the correct ng-view on the front end. That's what I wanted. Of course, there's more than one way to skin a cat I guess, but it was working.
Now, I'm trying to do that again. But this time it's not working.
If I try to go to localhost:3000/app#/subview via a link or refresh, instead of going to the ng-view that lives at /app/subview like it did before, it's going to /app#%2Fsubview instead. And I'm ..heh .. heh.. not sure what's different. I thought I was doing everything exactly the same.
Has anyone had this problem? Does anyone know what is happening?
Edit:
I think I kind of found a workaround. If I set base href = "/app" in the head of the html document, and then respond to a request to app/subview with a redirect to app#/subview, then I can serve up app with the correct subview (only the url goes to /subview). I think this might be acceptable for me even if it's not quite ideal but OH WELL

replicate google maps URL behaviour with javascript? url+"/#foo"

google map does this thing where if I browse to, say, Australia, the URL changes to
https://www.google.com/maps/#-28.0345854,135.1500838,4z
I'm interested in doing something like this on my web application. So far I have this:
var baseurl = window.location.href.split("/#")[0]
window.history.replaceState( {} , 'foo', baseurl+'/#foo' );
which works just fine for adding "/#foo" to the url
My problem is that, after adding /#foo, the URL doesn't work, it 404es.
I'm not interested in modifying the brower's history, that's why I use replaceState instead of pushState.
anyway, is there a way to do this with js? or do I need server-side code to serve the appropriate page?
thankyou
You "need server-side code to serve the appropriate page". an # character is still part of the URL and therefore needs to be handled by the server. If you want to handle the this kind of situation client side only then what you want is to use # instead. anything after a hash is handle client side and does not trigger a new page to load from the server.
Several libraries use this to replicate routing in a single page HTML only app. For example:
Backbone.js Router
jQuery-Router
jquerymobile-router
Ember.Router
And many more.

PHP HttpRequest to create a web page - how to handle long response times?

I am currently using javascript and XMLHttpRequest on a static html page to create a view of a record in Zotero. This works nicely except for one thing: The page html title.
I can of course also change the <title>...</title> tag, but if someone wants to post the view to for example facebook the static title on the web page will be shown there.
I can't think of any way to fix this with just a static page with javascript. I believe I need a dynamically created page from a server that does something similar to XMLHttpRequest.
For PHP there is HTTPRequest. Now to the problem. In the javascript version I can use asynchronous calls. With PHP I think I need synchronous calls. Is that something to worry about?
Is there perhaps some other way to handle this that I am not aware of?
UPDATE: It looks like those trying to answer are not at all familiar with Zotero. I should have been more clear. Zotero is a reference db located at http://zotero.org/. It has an API that can be used through XMLHttpRequest (which is what I said above).
Now I can not use that in my scenario which I described above. So I want to call the Zotero server from my server instead. (Through PHP or something else.)
(If you are not familiar with the concepts it might be hard to understand and answer the question. Of course.)
UPDATE 2: For those interested in how Facebook scraps an URL you post there, please test here: https://developers.facebook.com/tools/debug
As you can see by testing there no javascript is run.
Sorry, im not sure if i understand what you are trying to ask, are you just wanting to change the pages title?
Why not use javascript?
document.title = newTitle
Facebook expects the title (or opengraph :title tags) to be present when it fetches the page. It won't execyte any JavaScript for you to fill in the blanks.
A cool workaround would be to detect the Facebook scraper with PHP by parsing the User Agent string, and serving a version of the page with the information already filled in by PHP instead of JavaScript.
As far as I know, the Facebook scraper uses this header for User Agent: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
You can check to see if part of that string is present in the header and load the page accordingly.
if (strpos($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit') !== false)
{
//synchronously load the title and opengraph tags here.
}
else
{
//load the page normally
}

take content from WordPress page and deliver it to HTML via ajax

I have the following problem:
HTML blank page on server 1.
WordPress site on server 2.
What I need is to call the content from www.wordpress.site/sample-page/ to HTML page on server 1, but not the entire page, only the part that I can edit from wp-admin; so without header and footer.
Also, I don't know if there is any other method, but I need it to be done via JavaScript/jQuery or Ajax.
I've used Google, but is hard to get a tutorial for this, I've tried a lot of tutorials, but none is what I need, and I don't know that much JavaScript to make it work.
SO, can someone help me please?
BIG Thanks!
Andrei
L.E.:
I've found this working: http://jsfiddle.net/mdawaffe/hLWdH/
It is working as it is written, if I try to change the domain with mine, will not work.
What script do I have to implement on the server from which the content is called (taken)?
For more information, as you asked:
I have a HTML + CSS + JS template that I will use with phonegap (if you don't know about it, try it, it's very useful) to create a mobile app for Android, iOS, and BlackBerry.
Now, I have this site: m.trafficvoice.ro (I hope I can post links here).
In the 'live stream' page (it's called services.html), I have a HTML5 audio tag/player.
What I need, is to get from www.trafficvoice.ro/whatever-the-name-page, the content, but only the part that I can edit in WordPress (so without header and footer).
Why? Because in the future there will be more stream to add, and maybe some of them will be down due to unknown reason, so I need to update that page, without making an update for the entire app, upload it to the store, wait for approval, the client to download it, etc.
Big thanks!
Andrei
Could you just use an iframe instead? You could modify a template in your theme to not display header/footer and then use that in the iframe.

Categories

Resources