Ajax vs Redirecting - javascript

I have an ajax based website. I am using wordpress "redirection" plugin, but instead of moving to the proper address, it only shows in the browser's address bar. When I select that and press enter or go - it is working.
Is there a way I can force the browser to select the address bar and press enter after clicking the link on my website?
Is it window.location.replace javascript method that I have to use? I don't really know how to use it as I am new to javascript, any help will be appreciated.

You can use
history.pushState(null, null, "Everything after / goes here");
this js command will add a history entry and change your URL.

If you are just trying to make the user's web browser go to a new page, then you just assign to window.location like this:
window.location = "http://www.google.com";
This will add a new history entry in the browser's back-button stack. If you want to replace the current item in the back-button stack with the new page and have the browser go to that new place, then you can do
window.location.replace("http://www.google.com");
Both options will change the currently displayed page (the main difference is in the back-button stack).
The history object allows one to change the display URL without changing the page (which sounds like what the code might be doing currently), but it sounds like that is not what you want so you should switch to one of the above two options.

Related

Opening a new tab, but should function as a back button with saved search

I have a page where you can search rates using location and dates. Once you get to the confirmation page I have a link to go back and select a different rate. By using history.go(-2) I can go back to the rates page fine. But I were to right click open or wheel click, it just goes to the home page, because the search criteria is not saved.
How do I go about fixing this?
<u>select a different rate</u>
Thanks guys. I ended up using href=document.referrer. That seems to be doing the trick!
Browser history cannot be inherited by a new tab, as far as I know.
You can, however, pass the previous page URL to the new page as a URL parameter, for example:
domain.com/newPage?oldPage=http%3A%2F%2Foldpage.com
You can then modify the browser history when the new page loads, adding the previous page. See Manipulating the browser history

How do you break out of frames without breaking the browser's back button?

A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.

Want to Open a new Tab by appending parameter in the querystring

I want to open a new tab when thru the parameter in the query string.
For an example,I have four tabs (t1, t2,t2,t4). Right now, i have implemented the code that whenever user puts http://abc.net/disc_apps.jsp#tab3, it automatically opens tab3.For that i have written a function in document.ready, so for that I need to refresh the page or have to open a new tab and then have to enter a new query string.
But, now i am trying to implement http://abc.net/disc_apps.jsp?defaultTab=tab3 functionality, where i don't have to open a new tab every time or don't have to refresh the page.
please help me as I am new to these things.
thanks in advance.
Hemish
After deciphering the question and reading the comments up to three times, your concrete problem turns out to be the following:
I want to change the hash fragment in the URL when I change a tab in the UI.
Using query strings isn't the solution. They are server side and not controllable from the client side on without firing a HTTP request (or, "refreshing the page" as you call it yourself). Hash fragments are however controllable from the client side on. It's extraordinary easy as well: just use it as-is in tab links.
tab1
tab2
tab3
The webbrowser will change the hash fragment in the browser address bar by itself. I however assume that you already have a jQuery function which already shows the desired tab content when any of those links is clicked (and doesn't return false from the function!).

What to do when browser back button doesn't have the intended effect

I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">

Using AJAX for page items while still allowing them to be opened in a new tab/window

I'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.

Categories