java script in django template: error display with javascript funciton

Question

Updates:

So right now I changed my code to this:

<script>
        function myFunction(calid) {
            document.getElementById(calid).innerHTML = "<ul><li>" + calid + "</li>" + "</ul>";
        }
        </script>

        {% for calibrations in equipment.calibration_set.all %}


        <ul>
            <li>
                <p  onclick="myFunction( {{calibrations.id}} ) ">   {{calibrations.cal_date}}    </p>
                <div id = {{calibrations.id}}> YES </div>


            </li>
        </ul>

        {% endfor %}

And it works fine. Thanks!

But then there is one more weird problem: when i tried to add more arguments to the function so that it could display additional information, it just stop working which is really strange since only thing I changed is adding a new arguments. So if I try this:

<script>
        function myFunction(calid, calby) {
            document.getElementById(calid).innerHTML = "<ul><li>" + calid + "</li>" + "<li>" + calby + "</li>" + "</ul>";
        }
        </script>

        {% for calibrations in equipment.calibration_set.all %}


        <ul>
            <li>
                <p  onclick="myFunction( {{calibrations.id}}, {{calibrations.cal_by}} ) ">   {{calibrations.cal_date}}    </p>
                <div id = {{calibrations.id}}> YES </div>


            </li>
        </ul>

        {% endfor %}

then when i click the date, nothing happens.

how come this is wrong?
maybe I should use JSON for passing a model data into javascript?

Old post: I will just dump my code here first:
{% for calibrations in equipment.calibration_set.all %}
        <script>
        function myFunction(cal_id) {
            document.getElementById(cal_id).innerHTML = "<ul><li>{{calibrations.id}}</li></ul>";
        }
        </script>
        <ul>
            <li>
                <p  onclick="myFunction( {{calibrations.id}} )">{{calibrations.cal_date}}</p>
                <div id = {{calibrations.id}}> YES </div>


            </li>
        </ul>
so calibration is a foreign key of equipment. And here I would like to display a list of calibration associated to a equipment, and using the date of calibration as a javascript onclick event so that a user can click to display the detail information of this calibration. The problem I have is that now even if there are multiple calibrations, clicking the calibration date will change the "Yes" under it to the id of latest calibration.

[![enter image description here][1]][1]

Like in the picture, I clicked the first and second calibration date and expect the text below it to be 1 and 2 respectively.

Could somebody point out what's wrong here?

[1]: https://i.sstatic.net/kRFkl.png

Zulfugar Ismayilzadeh · Accepted Answer · 2016-09-21 15:31:09Z

3

You're creating javascript function with same name in every loop. That's why all click are returning same result.

Simple solution is:

function myFunction(cal_id) {
    document.getElementById(cal_id).innerHTML = "<ul><li>" + cal_id + "</li></ul>";
}

But in general, it's not right to create new function (especially with same name) in every loop.

edited Sep 21, 2016 at 15:31

answered Sep 20, 2016 at 21:36

Zulfugar Ismayilzadeh

2,7833 gold badges18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hansong Li Over a year ago

Thanks so much! And by the way there is another related new problem that just came out if you happen to have the time to take a look

Collectives™ on Stack Overflow

java script in django template: error display with javascript funciton

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related