window.history.pushState doesnt navigate to where i want it - javascript

I am trying to make a navigation button that just sends me to the index page but shows a different text in the url.
so i found this line of code to help me do it.
window.history.pushState("index.php", "test", "Testie");
But the problem is when i run it in an onclick function it just takes the last value and puts it in the url bar.
That itself is not the problem its that i dont have a Testie.html/php file.
I want it to be send to index.php but make the appearance of Testie in the url.
How do i do it?

The purpose of history.pushState is to say:
Some other JavaScript has manipulated the page so what the user is seeing is the same as what they would see if they went to this URL.
It lets you get fast updates to the page and bookmarkable URLs with real content that is good for fast initial page loads and for search engines to index.
It doesn't send data to the server (you need to do that with other code).
It does mean that if the URL isn't actually handled by the server (as you say it is in your case) then the page will break if the user does bookmark the page (or refreshes it, or sends the link to someone, etc).
If you want to navigate to a URL with Testie in it, then the first thing to do is to make the server support it. Forget about JavaScript.

Related

After setting url with window.pushState, how to access that specific link?

This might just be because I'm not entirely sure how to word it properly, but here's an overview of the problem.
I have a site where it pulls the main content using ajax, and by using pushState, I change the url. Say from "site.com/" to "site.com/area". But reloading this page (or entering it in the url) causes it to completely fail (because there's no such thing as site.com/area).
Is there a way to load the page from that link?
Note, that this isn't about the history / back and forward buttons. I simply want it to load a page from that kind of link.
The page must exist in one way or another. Depending on what server you're running it on you can redirect all requests to your first page if you want to solve it like that. Then you don't have to create a new page for all "routes", but can build it into your first page/application.
But the page must exist in one way or another.

Is it possible to get data from redirection page in AJAX?

I'm in trouble. I'm trying to do something which can appear easy but I don't manage to do it.
Here is the situation :
I have 3 different html pages :
The first one called index.html is my main page with a button to lauch a test in AJAX (I'm gonna talk about it after).
The second one corresponds to a redirection to the third page.
The third one has data.
What I wanna do is :
Click on "test" button on the first page and then start an AJAX request on the second one to reach data from the third one (with the redirection) to print it in the first.
I mean the first page calls the second one in AJAX, but the just to redirect on a specific third page. Depending on the third page which is called, data returned to the first page will change.
Do you think it's possible to find a solution to this problem in Javascript ? I hope I have been clear enough.
Thank you in advance for answer.
What you are describing doesn't really make sense. There are methods of redirection that AJAX follows (an HTTP 301 code, for example). However, what you are describing is not that sort of redirect. You are describing Javascript code that, when run, will redirect the browser elsewhere.
However, you are not loading that Javascript with the browser, you are downloading the page via AJAX. Once it is downloaded, you will have the text that represents that page, but in order to find out where it would redirect to when run, you would either have to run it and somehow capture the redirect value (not recommended), or parse it yourself (also not recommended).
There are other options that could work, depending on what you are trying to accomplish:
The server could return an HTTP redirect code when the second page is requested
The second page could instead be a text or JSON file containing a URL, which the first page could read, then request data from that URL.
If there is logic in the second page that determines where the redirect goes, it could be moved to the first page
You could have the second page employ server-side scripting (PHP, etc) to determine what data should be returned and return it directly to the first page

Handling Facebook Like Button Information (title and image) with Links with Hashtags

On my website, Like buttons are generated dynamically. The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200"). The issue is that I can't seem to set the title or image. When a page loads with a hashtag, a database is queried and then the page title, meta data, and other things are changed. Facebook seems to be using the metadata that's set before the database has had time to load and the content has been changed. Does anyone have any idea how I can solve this problem? I'd love to be able to set the title and image when the like button is loaded if there's anyway to do that. Here's my like button code:
<fb:like href='http://website.com/"+postname+"/"+data.id+"' send='true' layout='button_count' width='450' show_faces='true'></fb:like>
The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200").
That’s your error right there.
Since the Hash part of an URL does not get transmitted to the server, it’s only usable client-side. So redirecting to it server-side is a really bad idea, since you know nothing about the client’s capabilities (f.e. if it supports JavaScript).
Don’t do server-side redirects - make them client-side instead, via JS.
This tutorial shows how to basically go about making an “AJAX-Page” crawlable: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992

Handling ajax URLs from different pages?

So I have my site at http://example.com/foo/ (under a directory, the main domain is for something else).
Using .htaccess, I've set up my pages so the URLs look like http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com/foo/registration/, etc. This works great and the site loads fine and can be traversed without any Javascript issues.
Now, I'd like to add some AJAX functionality to the navigation. If I'm on http://example.com/foo/ and I click the navigation for "About", it changes the URL to http://example.com/foo/#about and dynamically loads the about page in one section of the site. I also have this working.
I have two problems which involve handling switching between AJAX and non-AJAX URLs.
If I'm on http://example.com/foo/about/ and I click on polls, it would look like http://example.com/foo/about/#polls which doesn't look very pretty. Ideally, I'd want every AJAX URL to be formatted with just the main directory and a hash, like http://example.com/foo/#about.
Should I handle it by forcing an actual (non-AJAX) redirect to the index page with a hash symbol then load it from there?
The other problem is the reverse. If I send http://example.com/foo/#about to someone who has Javascript disabled, or maybe if someone links to it and a bot crawls that link, is there any way to handle that to redirect to the correct non-AJAX page or is this just an unfortunate fact of life I'll have to deal with?
If you need non-javascript support, I'd change all your urls directly to the pages. Like http://example.com/foo/#about to http://example.com/foo/about/
Then, the javascript can intercept it, call event.preventDefault(), and 'redirect' it to #about, which will follow your ajax functionality.
If the client doesn't have javascript, it will go to http://example.com/foo/about/ as normal.
As for being on http://example.com/foo/about/, a javascript client should never get here as they will always be redirected to hashtags.
1) if you redirect to the main page and then use ajax to load the about page that would just not make much sense. what you should do is make everything work through ajax : there should never be a http://example.com/foo/about/ in the first place only http://example.com/foo/#about then you just update the hash and the content when you click on polls.
2) there is no way to avoid, sorry.

Redirect to previous view and inject a javascript alert

I need to do the following:
I have a textbox, which appears in every page of the site, that allows to subscribe to a newsletter. This I've done already and the user is redirected to previous view after subscription.
I'd like to add a javascript alert to the page the user is returned to, something like "Thanks for subscribing". How can this be done?
Thanks in advance.
EDIT: Propably it's not clear from the post tags. I'm using ASP.NET MVC 2 Preview 1
If you are doing a HTTP redirect, then the page you will render needs to be passed some information so that it knows to include the javascript to open the alert box (adding an optional element to the page might be a nicer way to do this).
That information needs to be stored either in a browser cookie, or in a session store (which is keyed from a browser cookie). You can remove this once you've rendered your message, so that it is only shown the first time you visit that page after the redirect.

Categories