Open ajax links in a new tab

Question

I am building an ajax-oriented website and all of my links work as follows:

<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 a new tab (with an average click or the link "Open link in a new tab" in the right click).

I know that the browser simply opens the source page (url) without the data obtained from the Ajax call, but how can I make it load the data onto a new tab. I look on the Internet and now I have not found a solution.

Answer 1

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

What you can do: use window.open with _blank as the target, but you will run into problems with pop-up blockers, and this is probably not what you want.

You can also use <a class="link" href="my-ajax-view/?some=parameters">press me</a> and write a page that displays the content you are looking for (which seems like the best solution for me, because then you will also provide functionality for 5% of users who have Javascript disabled). You can still perform some fancy AJAX downloads using jQuery by clicking this link, but if someone opens the link in a new tab, you are redirected to a page that collects information. Your new click handler will look like this:

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

Answer 2

This contradicts the AJAX concept, which intends to get rid of this each user action required that the page be re-loaded from the server , sending requests for individual data, which will lead to an update of the current page. Querying data to create a new tab with breaks outside this concept requires that you make a second query to actually display the tab .

Or select for:

• Data to be displayed on the current tab using AJAX, ...

• OR don’t do AJAX at all and just open a new tab that requests data.

Do not mix these two, because it just doesn't make sense.

Answer 3

You can always dynamically create an html page with your php code and return the address to it and, as mentioned, target = "_ blank" in the window.open command from javascript.

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

Answer 4

I was struggling with the same problem and I found a very simple solution. It just basically checks the AJAX code with a simple condition:

 if (event.which !== 2) { // ajax code } 

This way you only call AJAX when you don’t click the middle mouse button, if you are still behaving like a regular link, therefore it opens the page in a new tab.