Open ajax links in new tab

Question

I'm building an ajax oriented site and all my links work like this:

<div class="link">press me </div>

<div id="contents" ></div>
<script>
    $('div[class="link"]').click(function() {
        $.ajax({                                      
            url: 'contents/get_products.php',
            type: "GET",        
            data: 
            dataType: 'json',               
            success: 
                function(data){ 
                  $.each(data, function(i){
                      $('#contents').append('<div class="cat_list_item">something</div>'); 
                  });
            }
        });
    });
</script>

How to make these links open in new tab (on middle click or on "open link in new tab" on right click).

I know that the browser just opens the original page (url) without the data retrieved from the Ajax call, but how can I make it load the data in the new tab. I've been looking around the Internet and by now I haven't found a solution.

Answer 1

No, at least using your approach doing that is hardly possible. If you want to use the new tab functionality provided natively by the browser, you cannot use divs with Javascript handlers attached to them for your links.

What you could do: use window.open with _blank as target, but you will run into problems with popup blockers, and that is probably not what you want.

You could also use <a class="link" href="my-ajax-view/?some=parameters">press me</a> and write a page that shows the content you are looking for (what seems like the best solution to me, because then you would also provide functionality for the 5% of users that have Javascript turned off). You can still do some fancy AJAX loading with JQuery on the click of that link, but if someone opens the link in a new tab, you redirect to a page that gathers the information. Your new click handler would then look like this:

$('a.link').click(function(event) {
    event.preventDefault();
    // Your ajax request here
}

Answer 2

This is against the concept of AJAX, which intends to get rid of that each user action required that the page be re-loaded from the server by sending requests for individual data, which would cause the current page to update. Requesting data to create a new tab with breaks outside of this concept, this requires you to make a second request to actually get the tab shown.

Either choose for:

1. The data to be shown in the current tab using AJAX, ...

2. OR do no AJAX at all and just open up a new tab which requests the data.

Don't mix those two because it just doesn't make sense at all.

Answer 3

You could always dynamically create an html page with your php code and return the address to it and as mentioned target="_blank" it on a window.open command from javascript.

Alternatively, would using jQuery UI to create a new tab with the result data do the job?