0

I have a html file that utilizes javascript to load multiple files to a page, displaying the names with a anchor tag to view each uploaded file. When I click the link, it opens in the same window. I need it to open in a new tab. Target="_blank" is not working. I suspect there is a conflict between the html and associated javascript that is creating each link. Can't figure it out after a day of research. Thank you.

{% extends "main/base.html" %}
{% block title %}
Title
{% endblock %}


{% block content %}
<button type="button" class="btn btn-primary js-upload-files">
    <span class="glyphicon glyphicon-cloud-upload"></span> Upload Files
</button>

<input id="fileupload" type="file" name="file" multiple
       style="display: none;"
       data-url="{%url 'basic_upload' %}"
       data-form-data='{"csrfmiddlewaretoken": "{{csrf_token}}"}'>

<table id="gallery" class="table table-bordered">
    <thead>
        <tr>
            <th>File</th>
        </tr>
    </thead>
    <tbody>
        {% for file in files %}
            <tr>
                <td class="table_link"><a href="{{file.file.url }}" target="_blank">{{ file.file.name }}</a></td> <!-- does not open in a new tab. stays in same window -->
            </tr>
        {% endfor %}
    </tbody>

</table>
<p><a href="/" target="_blank">click here to open a new window</a></p> <!-- test to confirm that outside of table, a link will open in a new tab -->

{% endblock content%}

/* AND MY JS */

$(function () {
  /* 1. OPEN THE FILE EXPLORER WINDOW */
  $(".js-upload-files").click(function () {
    $("#fileupload").click();
  });

  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
  $("#fileupload").fileupload({
    dataType: 'json',
    done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
      if (data.result.is_valid) {
        $("#gallery tbody").prepend(
          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
        )
      }
    }
  });

});
JustLearning123
  • 75
  • 5
  • Does this answer your question? [How to open link in new tab on html?](https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html) – pretzelhammer Jun 25 '20 at 16:18
  • I place the target="_blank" property before or after the href, but still results in opening the link in the same tab. – JustLearning123 Jun 25 '20 at 16:27
  • @pretzelhammer — No. That just says to do what they are doing already. – Quentin Jun 25 '20 at 16:47
  • Nothing I can see in the question would stop target="_blank" working normally. You could follow the advice on the [mcve] page and create a reproducible test case. Use the live demo feature of the question editor. – Quentin Jun 25 '20 at 16:47

1 Answers1

0

you want this link to open in a new tab?

"<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"

you need to add the target="_blank" So it should be:

"<tr><td><a target='_blank' href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"

Alex Angelico
  • 3,710
  • 8
  • 31
  • 49