It’s not easy task to support both “Load a web page using Ajax” and “Allow to open the same page in browser new tab”. Because we have to manually handle the second option. Let’s see how to solve this task.
Before proceeding, first you have to know why ajax web pages are not able to support the second option.
Reason : when you click a web page link, it will just invoke a javascript method specified in onclick event which loads the page through ajax requests. So here “href” attribute of anchor tag is either empty or “javascript:void(0);”. Due to this we are not able to open the page in new tab.
Sample code for achieving both the actions
- ajax page load
- the same page should be able to open in Browser New Tab by using “Open Link in New Tab” option.
Two operations handled in the web page links(anchor tags),
- invoke the method showPage when u click the link. which means simply onclick event gets fired.
- if u open the same link in new tab, the below sequence of actions will execute.
- # part of href(say, #/blogs/JSON/json-basics.html) has appended to the browser url
- showtab method has invoked beco’z the main page gets loaded. rest will take care of the method showtab
main page should be like this.
<html>
<body>
<a href="#/blogs/JSON/json-basics.html" onclick="showPage('/<span style="color:#000000;">blogs</span><span style="color:#000000;">/JSON/json-basics.html');">JSON Basics</a>
<a href="#/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/ajax/ajax-basics.html" onclick="showPage('/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/ajax/ajax-basics.html');">Ajax Basics</a>
<a href="#/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/html/html-basics.html" onclick="showPage('/</span><span style="color:#000000;">blogs</span><span style="color:#000000;">/html/html-basics.html');">HTML Basics</a></span>
<span style="color:#000000;">
<div id="showhelp"></div>
<!-- This div is the Common Dynamic Area, this area gets changed based on clicking the above link --></span>
<script>
showtab();
<!-- this method gets executed everytime when a page loads.
what this method does,
just get the full url from the browser address bar.
parse the url and get the exact "new page url" which is available after the symbol "#"
and send the "new page url" via ajax request.
-->
function showtab()
{
var url = document.location.href;
var index = url.indexOf("#");
var taburl = "";
if(index>0){
var taburl = url.substring(index+1);
}
sendAjaxRequest(taburl, "showhelp");
}
function showPage(url)
{
sendAjaxRequest(url,"showhelp");
}
function sendAjaxRequest(url, divid)
{
var req = <a href="http://manikandanmv.wordpress.com/2008/09/29/ajax-example">getXMLHttpRequest</a>();
req.onreadystatechange = function(){ processResponse(req, divid) };
req.open('GET', url, true);
req.send(null);
}
function processResponse(req, divid)
{
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById(divid).innerHTML=req.responseText;
}
}
}
</script>
</body>
</html>
Are you new to Ajax..? Read the below posts for learning basics.
Ajax Basics – http://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax Example – http://manikandanmv.wordpress.com/2008/09/29/ajax-example/
Tags: AJAX, ajax page in browser new tab, ajax page open in new tab, ajax web page, open ajax page in tab, open link in new tab, web page open in new tab
