javascriptjquerytemplatesjquery-mobiletornado

How to 3xx redirect and pass a value from a table as a query parameter (in the URL)?


How to redirect to another page and pass a query parameter (whose value comes from a table) in the URL? I've created a tornado template something like this

<table data-role="table" id="my-table" data-mode="reflow">
    <thead>
        <tr>
            <th>Username</th>
            <th>Nation</th>
            <th>Rank</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for result  in players %}
        <tr>
            <td>{{result['username']}}</td>
            <td>{{result['nation']}}</td>
            <td>{{result['rank']}}</td>
            <td><input type="button" name="theButton" value="Detail"
                       ></td>
        </tr>
    </tbody>
    {% end %}
</table>  

and I would like when I press detail to be redirected to /player_detail?username=username and show all detail about that player. I tried with href="javascript:window.location.replace('./player_info');" inside the input tag but don't know how to put result['username'] in the URL as a query parameter.


Solution

  • Set the user name as data-username attribute to the button and also a class:

    HTML

    <input type="button" name="theButton" value="Detail" class="btn" data-username="{{result['username']}}" />
    

    JS

    $(document).on('click', '.btn', function() {
    
        var name = $(this).data('username');        
        if (name != undefined && name != null) {
            window.location = '/player_detail?username=' + name;
        }
    });​
    

    EDIT:

    Also, you can simply check for undefined && null using:

    $(document).on('click', '.btn', function() {
    
        var name = $(this).data('username');        
        if (name) {
            window.location = '/player_detail?username=' + name;
        }
    });​
    

    As, mentioned in this answer

    if (name) {            
    }
    

    will evaluate to true if value is not:

    The above list represents all possible falsy values in ECMA/Javascript.