Ticking one nested checkbox ticks the main form instead of the nested one when using the JavaScript plugin

[riteshkr147]

I keep getting error of external "django":1 Uncaught ReferenceError: django is not defined at Object.1 (external "django":1) at s (bootstrap:79) at Module.69 (plugin-2.5.0.js:1) at s (bootstrap:79) at r (bootstrap:45) at bootstrap:152 at plugin-2.5.0.js:1 1 @ plugin-2.5.0.js:1 s @ plugin-2.5.0.js:1 69 @ plugin-2.5.0.js:1 s @ plugin-2.5.0.js:1 r @ plugin-2.5.0.js:1 (anonymous) @ plugin-2.5.0.js:1 (anonymous) @ plugin-2.5.0.js:1

I tried multiple times and used the tutorial as is even then I am unable to implement this comments app. Though the non javascript works fine but there are many page redirects.

[danirus]

What script tags does your HTML page load?

[riteshkr147]

This is what gets loaded:

<div id="comments"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script>
  window.comments_props = {"comment_count": 11, "allow_comments": true, "current_user": "0:Anonymous", "request_name": false, "request_email_address": false, "is_authenticated": false, "allow_flagging": false, "allow_feedback": false, "show_feedback": false, "can_moderate": false, "poll_interval": 2000, "feedback_url": "/comments/api/feedback/", "delete_url": "/comments/delete/0/", "reply_url": "/comments/reply/0/", "flag_url": "/comments/flag/0/", "list_url": "/comments/api/blog-post/15/", "count_url": "/comments/api/blog-post/15/count/", "send_url": "/comments/api/comment/", "form": {"content_type": "blog.post", "object_pk": "15", "timestamp": "1590906363", "security_hash": "0825dc7f05c32c93840b26f67395f119219105a2"}, "login_url": "/admin/login/", "like_url": "/comments/like/0/", "dislike_url": "/comments/dislike/0/"};
  window.comments_props_override = {
      allow_comments: true,
      allow_feedback: true,
      show_feedback: true,
      allow_flagging: true,
      polling_interval: 5000  // In milliseconds.
  };
</script>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  crossorigin="anonymous"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  crossorigin="anonymous"></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  crossorigin="anonymous"></script>

<script src="/static/django_comments_xtd/js/vendor~plugin-2.5.0.js"></script>
<script src="/static/django_comments_xtd/js/plugin-2.5.0.js"></script>
<script>
  $(function() {
    $('[data-toggle="tooltip"]').tooltip({html: true});
  });
</script>

[danirus]

It's missing:

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>

This file includes the catalog of messages translated in the JavaScript plugin.

[riteshkr147]

Thank you for the reply. Sorry I missed that part and after adding the catalog tag, it is working fine.

But there are two issues I found:

1. It interferes with other javascript on the page, like my bootstrap 4 navbar dropdown wont work on pages having this comment section.

2. On checking "Notify me about follow-up comments" in reply section, the checkbox on the main form -"Post your comment" gets selected.

[danirus]

That's an issue in the latest version too. I'll change the title of the issue to better represent the problem. Thanks for letting me know!

[riteshkr147]

Small correction that I would like you to notice:-

Ticking one nested checkbox ticks only the main form instead the nested one.

[danirus]

I fixed it in the commit bdfb94b. It will be in the 2.6.2.

[danirus]

@riteshkr147, thanks for the ticket. The issue has been resolved and fixed in PR #177.