Passing Django Template Vars to JS

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Passing Django Template Vars to JS

Simon Connah-3
I know that the standard way to do this is to create a script tag with
a global JS variable in your Django template before you import your
other JS files but that won't work for my current situation.

I have an article detail view which is a single model instance. But I
also have a list of comment objects that have a Foreign Key to the
article (because that is the article that is being commented on).

I need to pass the comment_id to the JS files that I am loading. If
you want to see the code I am using then you can see it here:

https://gitlab.com/glamorous-systems/seductive/blob/master/blog/templates/blog/article_detail.html

I thought I'd use an onclick event on the Like / Dislike button to
call a JS function which then passes that value to this JS file:

https://gitlab.com/glamorous-systems/seductive/blob/master/blog/static/js/pass_comment_id.js

and then I'd just call the return_comment_id() function from my other
JS files to get the comment_id of the specific comment the user
clicked the Like / Dislike button for. I think the problem is that my
jQuery AJAX selectors are also looking for a click event, so they
happen in a strange order, but I'm not sure.

I'm totally lost on what I should be doing here. Any help would be
very much appreciated :).

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CADNsu1OksTqc2crvX%3DK%3D_Kf_Xz1fCfABTRV-q48htRUikiAtXA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Passing Django Template Vars to JS

Vijay Khemlani
I'm not sure why your code does not work (maybe there is a "race condition" between the JS click handlers), but that global variable is a bad idea in general.

You can add the comment ID as an attribute to your button, like

<button class="btn btn-info" id="like_comment_button" data-comment-id="{{ comment.id }}">

and in your event handler obtain the comment id

$("#like_comment_button").click(function (event) {
   var comment_id = event.target.getAttribute('data-comment-id')
   // Call AJAX
})

That way you don't need the global variable or the other click handler

Finally, it's a bad idea to have multiple elements with the same ID (all comments will have a button with ID "like_comment_button") so it's better to add it as a class rather than an id.

Regards





On Sun, Jun 10, 2018 at 11:19 AM Simon Connah <[hidden email]> wrote:
I know that the standard way to do this is to create a script tag with
a global JS variable in your Django template before you import your
other JS files but that won't work for my current situation.

I have an article detail view which is a single model instance. But I
also have a list of comment objects that have a Foreign Key to the
article (because that is the article that is being commented on).

I need to pass the comment_id to the JS files that I am loading. If
you want to see the code I am using then you can see it here:

https://gitlab.com/glamorous-systems/seductive/blob/master/blog/templates/blog/article_detail.html

I thought I'd use an onclick event on the Like / Dislike button to
call a JS function which then passes that value to this JS file:

https://gitlab.com/glamorous-systems/seductive/blob/master/blog/static/js/pass_comment_id.js

and then I'd just call the return_comment_id() function from my other
JS files to get the comment_id of the specific comment the user
clicked the Like / Dislike button for. I think the problem is that my
jQuery AJAX selectors are also looking for a click event, so they
happen in a strange order, but I'm not sure.

I'm totally lost on what I should be doing here. Any help would be
very much appreciated :).

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CADNsu1OksTqc2crvX%3DK%3D_Kf_Xz1fCfABTRV-q48htRUikiAtXA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALn3ei0ZneJzKAbSyN958_1RCaS7kjQY6VszQb8a%3D-Mxgod-GQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Passing Django Template Vars to JS

Simon Connah-3
Hi Vijay,

Thank you very much for the reply and sorry for the late reply.

You are completely right about not having multiple elements with the
same ID. I completely forgot that an ID was meant to be unique on a
page. I'll change it to a class.

I like the idea of the custom attribute. I'll do that then.

Simon.
On Mon, 11 Jun 2018 at 02:04, Vijay Khemlani <[hidden email]> wrote:

>
> I'm not sure why your code does not work (maybe there is a "race condition" between the JS click handlers), but that global variable is a bad idea in general.
>
> You can add the comment ID as an attribute to your button, like
>
> <button class="btn btn-info" id="like_comment_button" data-comment-id="{{ comment.id }}">
>
> and in your event handler obtain the comment id
>
> $("#like_comment_button").click(function (event) {
>    var comment_id = event.target.getAttribute('data-comment-id')
>    // Call AJAX
> })
>
> That way you don't need the global variable or the other click handler
>
> Finally, it's a bad idea to have multiple elements with the same ID (all comments will have a button with ID "like_comment_button") so it's better to add it as a class rather than an id.
>
> Regards
>
>
>
>
>
> On Sun, Jun 10, 2018 at 11:19 AM Simon Connah <[hidden email]> wrote:
>>
>> I know that the standard way to do this is to create a script tag with
>> a global JS variable in your Django template before you import your
>> other JS files but that won't work for my current situation.
>>
>> I have an article detail view which is a single model instance. But I
>> also have a list of comment objects that have a Foreign Key to the
>> article (because that is the article that is being commented on).
>>
>> I need to pass the comment_id to the JS files that I am loading. If
>> you want to see the code I am using then you can see it here:
>>
>> https://gitlab.com/glamorous-systems/seductive/blob/master/blog/templates/blog/article_detail.html
>>
>> I thought I'd use an onclick event on the Like / Dislike button to
>> call a JS function which then passes that value to this JS file:
>>
>> https://gitlab.com/glamorous-systems/seductive/blob/master/blog/static/js/pass_comment_id.js
>>
>> and then I'd just call the return_comment_id() function from my other
>> JS files to get the comment_id of the specific comment the user
>> clicked the Like / Dislike button for. I think the problem is that my
>> jQuery AJAX selectors are also looking for a click event, so they
>> happen in a strange order, but I'm not sure.
>>
>> I'm totally lost on what I should be doing here. Any help would be
>> very much appreciated :).
>>
>> --
>> You received this message because you are subscribed to the Google Groups "Django users" group.
>> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
>> To post to this group, send email to [hidden email].
>> Visit this group at https://groups.google.com/group/django-users.
>> To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CADNsu1OksTqc2crvX%3DK%3D_Kf_Xz1fCfABTRV-q48htRUikiAtXA%40mail.gmail.com.
>> For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
> To post to this group, send email to [hidden email].
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALn3ei0ZneJzKAbSyN958_1RCaS7kjQY6VszQb8a%3D-Mxgod-GQ%40mail.gmail.com.
> For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CADNsu1PL7dT%2BhXgMc8r9arVZY2pXYxP8hQWywn5u8OqSKaBLHw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Passing Django Template Vars to JS

Melvyn Sopacua

On maandag 11 juni 2018 20:11:36 CEST Simon Connah wrote:

 

> I like the idea of the custom attribute. I'll do that then.

 

The common way is to use a data- attribute.

--

Melvyn Sopacua

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/2026797.eeRFsSjbx6%40fritzbook.
For more options, visit https://groups.google.com/d/optout.