passing dynamic variable from parent template to child template in django

Question

I have a template songs.html that includes a child template addToPlaylist.html. I need the title of the song that is to be added to the playlist dynamically. Here is the code for songs.html which includes addToPlaylist.html.

                {% for song in songs  %}
                <div class="col-16 col-sm-4 col-md-3 col-lg-2 single-album-item">
                    <div class="single-album">
                        <img src="{{MEDIA_URL}}{{song.image.url}}" alt="">
                        <div class="album-info">
                            <a href="{% url 'playSong' 'song' song.tittle %} ">
                                <h5>{{song.tittle}}</h5>
                            </a>
                            <p>{{song.album}}</p>
                            {% include "songs/addToPlaylist.html" with song_to_add=song.tittle %}
                            <a data-toggle="modal" href="#addToPlaylist" style="color: dimgrey; font-size: small;">Add to Playlist</a>
                        </div>
                    </div>
                </div>
                {% endfor %}

And this is the code for addToPlaylist.html

              <div class="form-group" style="width: 100%;">
                  <ul class="list-group list-group-flush" style="width: 100%;">
                    {% for playlist in playlists %}
                    <li class="list-group-item"><a href="{% url 'addToPlaylist' playlist.name song_to_add %}">{{playlist.name}}</a></li>
                    {% endfor %}
                </ul>
                  </div>

But assigning dynamic value to song_to_add does not work. The variable does not pass down to the child template.

This is the views.py code that passes the value of playlists

    if request.user.is_authenticated:
        playlists = Playlist.objects.filter()
    songs = Song.objects.all()
    return render(request, "songs\\songs.html", {'songs': songs, 'playlists':playlists,})

This is my Song model

class Song(models.Model):
    GENRES = [
        ('Rock','Rock'),
        ('Hip Hop','Hip Hop'), 
        ('Blues', 'blues'), 
        ('Heavy Metal', 'Heavy Metal'), 
        ('Classical', 'Classical'), 
        ('Funk', 'Funk')]
    tittle = models.CharField(max_length=255)
    album = models.CharField(max_length=255, null = True, blank = True)
    genre = models.CharField(max_length = 30, choices=GENRES)
    image = models.ImageField(upload_to='images/', blank = True , null = True)
    songFile = models.FileField(upload_to='musics/', help_text=("Allowed type - .mp3, .wav, .ogg"))
    uploaded_at = models.DateTimeField(auto_now_add=True)

Also, I tried this solution.

In `addToPlaylist.html`, you are iterating a collection `playlists` whereas you are passing it `song.title` as `song_to_add` from parent template. — Moosa Saadat, Jun 08 '20 at 06:11
@Moosa I want the value of `song.title` that I am iterating in parent. So I can add relevant song to the playlist user chooses. `song.title` should be the title of song for which `addToPlaylist` button is clicked. — Hunia.F, Jun 08 '20 at 06:18
I am curious if even `playlists` is accessible in child template. It would be helpful if you can share the exact error. — Moosa Saadat, Jun 08 '20 at 06:24
@Moosa yes `playlists` is accessible in child template but it is passing directly from the view. I have edited the question and included `views.py` code too. — Hunia.F, Jun 08 '20 at 06:36
@Moosa and the error is this `NoReverseMatch at /song Reverse for 'addToPlaylist' with arguments '('broken', '')' not found. 1 pattern(s) tried: ['addToPlaylist/(?P[^/]+)/(?P[^/]+)$'] ` because `song_to_add` is undefined so the url causes problem. — Hunia.F, Jun 08 '20 at 06:45

score 0 · Answer 1 · answered Jun 08 '20 at 07:25

0

What about your <h5>{{song.tittle}}</h5>? Is it displayed ok if you cut your bad code? I think that your {{song.tittle}} returned empty string or None and it must be rewrite to {{song.title}}

If it's not answer for you, show your song model code please.

answered Jun 08 '20 at 07:25

Muck Son

51
3

yes `
{{song.tittle}}
` is displayed okay. but when passed to child template through `{% include "songs/addToPlaylist.html" with song_to_add=song.tittle %}` it returns None or is undefined there. – Hunia.F Jun 08 '20 at 07:51
I have edited the question and added my `Song` model code – Hunia.F Jun 08 '20 at 08:13
Have you tried `song.title` instead of `song_to_add` in `{% url %}`? And have you tried display `song_to_add` inside some `span` or `p` tags? – Muck Son Jun 08 '20 at 08:44
yes `song.title` works fine in `span` and `p` in parent template but is undefined in child template. Also `song.title` does not work either when used in url. Actually I need to pass dynamic value of `song.title` to child template and I can't do it. – Hunia.F Jun 08 '20 at 11:29

score 0 · Accepted Answer · answered Jun 09 '20 at 05:42

0

I solved my problem by putting child template modal form in the parent template file and assigning unique id to modal form. In this way I was able to call addToPlaylist for each song uniquely.

answered Jun 09 '20 at 05:42

Hunia.F

41
1
5

passing dynamic variable from parent template to child template in django

2 Answers2

{{song.tittle}}