Using Django Models to assign HTML div through jQuery

Question

for the last few days I've been trying to create a method in jquery using django models and I have found myself to be very out of my depth and would appreciate and explanation I can get. So currently I have a django model that has the following information : name, date, location, semester. I use the first 3 pieces of information in displaying my html, however, I want to use 'semester' to see what div tag my items go into.

The semester tag can either return 'Fall' or 'Spring' values is there a way I can use this to assign the components to the correct div. So if semester is Fall then it should go into the div with the id 'fall-races' and if its spring it should go to 'spring-races'

Currently I only have a jquery working where I get all the elements and assign it to the other div.

Thank you for your help and any possible advice.

<div class="flex-column">
        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Fall Schedule
            </h1>
        </div>
        <div id="fall-races">
            {% for race in race %}
                <div class="regatta-card my-2 mx-2 ">
                    <h2 class="center-text py-2">{{ race.date }}</h2>
                    <h1 class="text-center my-2">{{ race.name }}</h1>
                    <h3 class="text-center mb-3">{{ race.location}}</h3>
                    <h6 class="text-center"><a href="#">Recap</a></h6>
                </div>
            {% endfor %}
        </div>

        <input type="button" onclick="findChildren()" value="Click it" />

        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Spring Schedule
            </h1>
        </div>
        <div id="spring-races">

        </div>

    </div>

    <script>
        function findChildren() {
            var objChl  = document.getElementById('fall-races').children;
            var msg = document.getElementById('spring-races');
            msg.innerHTML = '';

            for (i = 0; i < objChl.length ; i++) {
                msg.appendChild(objChl[i]);
            }
        }
    </script>

esteban21 · Accepted Answer · 2020-06-10 16:07:37Z

1

Maybe you want something like this:

Html:

<!-- Some html stuff -->
<div id="fall-races">
        {% for race in race %}
            <div class="regatta-card my-2 mx-2 ">
                <h2 class="center-text py-2">{{ race.date }}</h2>
                <h1 class="text-center my-2">{{ race.name }}</h1>
                <h3 class="text-center mb-3">{{ race.location}}</h3>
                <h6 class="text-center"><a href="#">Recap</a></h6>
                <input type="hidden" value="{{race.semester}}" />
            </div>
        {% endfor %}
    </div>
    <!-- Some html stuff -->

JS:

    <script>
    function findChildren() {
        var parent = document.getElementById('fall-races');
        var objChl  = parent.children;
        var msg = document.getElementById('spring-races');
        msg.innerHTML = '';

        for (i = 0; i < objChl.length ; i++) {
            const element = objChl[i];
            var value = element.getElementsByTagName("input")[0].value;
            if (value==="Spring"){
              msg.appendChild(element);
              parent.removeChild(element);
             }

        }
    }
    </script>

This is like the simplest way to achieve that, hope it helps you.

edited Jun 10, 2020 at 16:07

answered May 9, 2020 at 1:35

esteban21

1379 bronze badges

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

1 Comment

Uluc Ozdenvar Over a year ago

This worked thank you, just as a comment for anyone who looks at this value={{race.semester}}"

Collectives™ on Stack Overflow

Using Django Models to assign HTML div through jQuery

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