How do I change the address bar when I make an Ajax request?

Question

I have created a website that intensively use Ajax to load its contents. I want the pages I select to load on AJAX but at the same time the URL also changes without reloading the whole page content. How would I achieve that? I've googled already but my search did not yield any results.

Let's say I have this page:

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <sj:head />
</head>
<body>
    <h5>Struts Jquery Ajax Integration </h5>

    <div id="resultContent"></div>
    <noscript>Please Turn On Javascript to make the full use of this site</noscript>

    <h4>Choose A task</h4>
    <ul>
        <s:url value="views/ajaxvalidation.jsp" var="ajaxvalidation" />
        <li><sj:a targets="resultContent" href="%{ajaxvalidation}">Ajax Validation </sj:a></li>
    </ul>

    <div>
        <h6>Play A Music while You Navigate</h6>
        <audio src="x.mp3" controls>Your browser does not support the
            audio element.
        </audio>
    </div>
</body>
</html>

I clicked the Ajax Validation link. it will not reload the page but however the url would be something like this:

localhost:8090/AppName/ajaxvalidation.jsp

or this:

 localhost:8090/AppName/ajaxvalidation.action

How would I achieve such a goal?

Note that I am using this plugin: struts2-jquery

seems like you'd have to use some javascript on your handler code that processes the ajax response. I don't think there's anything on the struts side to achieve this, if that's what you're thinking . . . — chad, Dec 20 '12 at 16:05
I think that's impossible;using ajax means that you send a fragment of the page to the server,changing the url means changin the action — Bourkadi, Dec 20 '12 at 16:40
R U saying that you want to change the URL in the address bar of the browser when an Ajax call is made? — chad, Dec 20 '12 at 17:02
http://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state — chad, Dec 20 '12 at 18:15

Gabriele Petrioli · Accepted Answer · 2012-12-21T01:41:43.870

3

You need to use the History API

window.history.pushState(data, title, url)

Update

Noticing that you use struts2-jquery you can add ajaxhistory="true" to enable the build in ajax history functionality. See http://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributes

<sj:head ajaxhistory="true" />

Keep in mind, though, that it is not supported in all browser versions..

edited Dec 21 '12 at 01:41

answered Dec 20 '12 at 18:25

Gabriele Petrioli

191,379
34
261
317

Can you provide an example? just that snippet is not much making sense. – KyelJmD Dec 21 '12 at 01:19
let's say I have set the ajaxhistory ="true" how would I then use it together with the window.history.pushState? I am starting to get the idea but still no clue on the implementation. or I'll just use the said tag? – KyelJmD Dec 21 '12 at 01:49
@KyelJmD Yes, ignore the `pushState`. I believe the `struts2` library handles this internally.. – Gabriele Petrioli Dec 21 '12 at 01:52
One thing I've noticed though, I can't seem to customize the url that is being generated, any solution to this? it is generationg a url something like this #resultContent=_sj_action_ajaxvalidationresultContent. I want to remove the sj_action. value – KyelJmD Dec 21 '12 at 02:02
@KyelJmD, not knowledgeable enough about struts2, so i cannot help there.. nor how to intergrate `pushState`, as ajax calls are handled internally by the `struts2` framework.. – Gabriele Petrioli Dec 21 '12 at 02:11

score 0 · Answer 2 · answered Dec 20 '12 at 18:26

0

You can use history.pushState if the browser supports (read < IE10)

var boolPushState  = false;
if (typeof history.pushState !== "undefined") {
        boolPushState = true;
}

if (boolPushState) {
    history.pushState(null, null, "URL");
}

answered Dec 20 '12 at 18:26

Eonasdan

7,563
8
55
82

How do I change the address bar when I make an Ajax request?

2 Answers2