How to open Ajax Page in Browser New Tab


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="https://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 – https://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax Example – https://manikandanmv.wordpress.com/2008/09/29/ajax-example/

Advertisements

Tags: , , , , , ,

9 Responses to “How to open Ajax Page in Browser New Tab”

  1. zeynel Says:

    When I am trying this code, the browser directing to me the external page.browser do not pull the external page in the content div. please help for this issue.
    Thanks for your interesting.

  2. manikandanmv Says:

    zeynel,
    As i said, the above code serves two actions;
    1) Load the wep page content inside the DIV element
    2) Open the same web page in new tab.

    Have u get any errors while using the code?
    If so can you please post/send your code.

  3. zeynel Says:

    link zeynel

    showtab();
    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 = getXMLHttpRequest();
    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;
    }
    }
    }

    —- “zeynel.html” is my external page. when I press “link zeynel” I want to see my external page into the “showhelp” div via ajax and also I want to that when I press right click “link zeynel”, this link able to open the page in new tab. Codes are above. But it didnt work. There may be an error or misunderstant.

    thanks for sharing and helping.

  4. manikandanmv Says:

    Seems problem is in your anchor tag

    <a href="zeynel.html" rel="nofollow">link zeynel</a>

    You have missed out the two things
    1) onclick event – the method(showPage) specified in this event will get fired when you click the link. showPage method renders the webpage inside the DIV element
    2) # missed in href attribute – based on this, code should open the page in browser new tab.

    Can you try the following code snippet and let me know the status.

    <a href="#/zeynel.html" rel="nofollow" onclick="showPage('/zeynel.html');">link zeynel</a>

    Hope you understand!

  5. zeynel Says:

    manikandanmv,

    I try it but unfortunately it doesn’t work. My whole website is inside this folder. Can you try your code at any link in index page.

    http://rapidshare.com/files/369413967/dimyat.rar

    Sorry to occupy your valuable time.

  6. manikandanmv Says:

    zeynel,

    Yeah! i have gone through your deneme.html page.
    The problem was “comments” specified inside the script tag in html page.
    Usually this symbols(<!— —>) represents comments between html tags only not for script tags. Between script tags use these symbols(/* … */) for commenting.
    In my post i have specified wrongly! Sorry for the confusion. Now updated correctly.
    Can you just remove the comments or copy paste the recent code from my blog and try it.
    It will work perfectly.
    Before that include the necessary methods in the html page.

    Thanks for your understanding.

  7. ucup Says:

    not working, when i click href link, the main page isn’t stay. it’s reload a whole new page.

  8. manikandanmv Says:

    iyan,
    can u send your code snippet. I will look into it and get back to you.

  9. Ajax toolkit Says:

    Myself along with my mate have been in conflict
    a good difficulty like that! Currently everybody knows that we appeared to be right.

    ; )! Thanks for the tips somebody article.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: