CODEWITHSUNDEEP
javascriptjquery
user7783682
user7783682

Reputation:

Where to put jquery function

I want to make my row clickable on 

                <tbody>
                    <tr class='clickable-row' data-href="{% url "perception:detail" %}" data-turbolinks="false">
                        <td><a href="{{ object.loan.get_absolute_url }}" data-turbolinks="false">{{ object.loan }}</a></td>
                        <td><b>{{ object.current_balance }}</b></td>
                        <td>{{ object.operation_error }}</td>
                        <td>{{ object.start_date }}</td>
                        <td>{{ object.end_date|default:"" }}</td>
                        <td>{{ object.created }}</td>
                        <td>{{ object.modified }}</td>
                    </tr>

in using the example 

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

So far I don't have any success in clicking on rows. The problem is located that I don't know where to insert 

 jQuery(document).ready(function($) {
        $(".clickable-row").click(function() {
            window.location = $(this).data("href");
        });
    });

Could you tell me where do I put those five last lines?

Upvotes: 0

Views: 1925

Answers (5)

Akashii
Akashii

Reputation: 2281

You should write in another file . I name it is script.js . And put it in html

<script>script.js</script>

Upvotes: 1

Vivick
Vivick

Reputation: 4991

The reason your script isn't functionning the way you intendend is because you use window.location wrong :

Therefore use document.location.href = $(this).data("href"); that is also known as redirection in same tab.

Upvotes: 0

ProgrammerV5
ProgrammerV5

Reputation: 1962

This works fine:

<html>
<head>
  <script src="path_to_jquery"></script>
  <script>

    $(".clickable-row").on('click',function() {
        //window.location = $(this).data("href");
        alert('clicked');
    });
</script>
</head>
<body>
<table>
  <tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Unless you are having any other JS error prior to executing this it should work as expected, check your console for other errors.\

Also there is good info over here https://www.w3schools.com/jquery/jquery_intro.asp

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

You can either put that in an external JS document and link to the document in the footer, right before the closing body tag. Alternately, you can just paste the code as is right before the closing body tag. Make sure you are importing JQuery before this script as that is a JQuery function."

If you put it in your index doc, you need to wrap it with:

 <script></script>

Upvotes: 0

Nard Dog
Nard Dog

Reputation: 916

Put script in HTML inside script tags

<script></script>

Make sure you have jQuery referenced as well so it will work, generally it's standard practice to put your script in a separate file and reference it in the HTML page like the example below with jQuery, but for just base functionality putting it in script tags will work.

<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
</head>

Upvotes: 0

Related Questions