Question 10955 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery variable redirects to an undefined url, although it is a string

I have a problem when trying to redirect to a new URL using jQuery, but somehow it does not work in this specific case. I use the jQuery in combination with html and a Django backlog, but I think neither of those can result in an undefined parameter showing up. The code is fairly easy:

$(document).on('click', '.view-diagnostics', function(){
    let url = $(this).data("href");
    window.location.pathname = url;
})

The html element that is clicked is as follows:

<td>
    <div class="view-diagnostics">
        <button class="button h-btn view-diagnostics" data-href="{% url "internet:diagnose" %}">{% trans "View diagnostics"%} </button>
    </div>
</td>

In this case I can log the URL using console.log(url) and get a string in the form of "/something/something/", I can use breakpoints using the inspect tool from my browser to see that the URL indeed consist of a correct URL and I can get the type of the URL, which is a string. When I click the button that performs this code however, the site gets redirected to http://127.0.0.1:8000/undefined (I am using a local server), so somehow the URL now is undefined.

I already tried a lot of different methods to do this, including trying every method to redirect to a new url, including window.location = url, window.location.href = url, but the undefined always pops up. I also already have tried to print the contents and type of the URL, which all seems fine. The weirdest part to me is that if I change the code to

$(document).on('click', '.view-diagnostics', function(){
    let url = $(this).data("href");
    url = "/something/something/"
    window.location.pathname = url;
})

The code correctly redirects to the correct URL, even if I copy and paste the URL from the console.log() result of the first let URL line.

So to summarize the problem: There is a button, containing an URL in a data-href package. I get the URL in the jQuery when the button is clicked and save it as a URL. I can now log the URL using console.log() and get the type, and I get the URL and the type I expect (string). When I than try to redirect to this URL, I get an error that I cannot redirect to the URL http://127.0.0.1:8000/undefined. When I hardcode the URL as a string, that I copy pasted from the earlier logging tests, the redirect does suddenly work.
Does anyone have an idea what else I can try to solve this problem?

Tags:

2

Answers


  1. 0

    Your selector, .view-diagnostics matches two elements. The button and the div.

    Your function is called for the button and assigns the value you expect to window.location.pathname.

    Then the event bubbles to the div and the function is called for a second time. The div does not have any data-* attributes so url is undefined. This is assigned to window.location.pathname and overrides the previous assignment.

    Login or Signup to reply.
  2. 0

    I have removed some extraneous information and put constant text in just to illustrate.

    • Hook your event handler to something closer like the table that wraps it
    • You can find the button inside the wrapper so I show how to do that
    • Once you have your wrapper you can find things inside of that
    • Debatable whether this is actually a good thing vs just a <a href="bluemoon">Blue Moons</a> type of an element but that is not up to us as perhaps other things like style etc. come into play here.
    $('#cool-table').on('click', '.view-diagnostics', function() {
  const url = $(this).find('.view-diagnostics-link').data("href");
  console.log(url);
  // window.location.href = url;
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cool-table">
  <tbody>
    <tr>
      <td>
        <div class="view-diagnostics">
          <button class="button h-btn view-diagnostics-link" data-href="happypeopleurl">Happyness</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="view-diagnostics">
          <button class="button h-btn view-diagnostics-link" data-href="bluemoonurl">Blue Moon</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

    Basically your OLD classes for the same thing (but not IMHO as elegant to purpose/understanding.

    $('#cool-table').on('click', '.view-diagnostics>.view-diagnostics', function() {
  const url = $(this).data("href");
  console.log(url);
  // window.location.href = url;
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cool-table">
  <tbody>
    <tr>
      <td>
        <div class="view-diagnostics">
          <button class="button h-btn view-diagnostics" data-href="happypeopleurl">Happyness</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="view-diagnostics">
          <button class="button h-btn view-diagnostics" data-href="bluemoonurl">Blue Moon</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search