CODEWITHSUNDEEP
javascriptjquery
AlexW
AlexW

Reputation: 2591

JQuery - get the id values from an unknown number of children from a parent div

Im trying to get a list of ID values for each group of parent divs. Using draglua a site is dragged into a group, then I would like to create a dictionary string that I can submit to a server side form and process it.

That dictionary string should contain a list of all the ids within each group, my script below currently works for one group (A) but not all groups, im assuming there is a better approach to get all groups in one?

So after a user has dragged sites into groups I would like to be able to click apply groups then the the value of site_groups is set to

[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]

I can then submit this and process it server side, is anyone able to assist?

Thanks

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
        integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <style type="text/css">
        .drag-space {
            width: 100%;
            min-height: 20px;
        }
    </style>
</head>

<body>
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper">
            <!-- partial -->
            <div class="main-panel">
                <div class="content-wrapper">
                    <div class="row">
                        <!-- /.card -->
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex flex-row justify-content-between">
                                        <div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
                                        <div class="text-muted mb-1 small">
                                            <a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
                                        </div>
                                    </div>                                     
                                </div>
                                <div class="card-body">
                                    <form id="sitegroups_form" method="post">
                                        <input type="text" id="site_groups" />
                                    </form>
                                    <div class="row">
                                        <div class="col-3">
                                            <h4>A - <small class="text-muted">1 Sites</small></h4>
                                            <div id="drag-A" class="drag-space">

                                                <div id="7">
                                                    <a href="/sites/site/7/">Aberdeen</a>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>B - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-B" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>C - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-C" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>D - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-D" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>E - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-E" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>F - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-F" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>G - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-G" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>H - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-H" class="drag-space">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <h4>I - <small class="text-muted">0 Sites</small></h4>
                                            <div id="drag-I" class="drag-space">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
                                </div>
                                <div class="card-body">
                                    <div class="row" id="drag-source">
                                        <div id="8" class="col-3">
                                            <a href="/sites/site/8/">London</a>
                                        </div>
                                        <div id="9" class="col-3">
                                            <a href="/sites/site/9/">New York</a>
                                        </div>
                                        <div id="10" class="col-3">
                                            <a href="/sites/site/10/">Manchester</a>
                                        </div>
                                        <div id="11" class="col-3">
                                            <a href="/sites/site/11/">Liverpool</a>
                                        </div>
                                        <div id="12" class="col-3">
                                            <a href="/sites/site/12/">Edinburgh</a>
                                        </div>
                                        <div id="13" class="col-3">
                                            <a href="/sites/site/13/">Tokyo</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
            <!-- main-panel ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
        integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        // Begin Dragula JS
        var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);

        // when item dropped
        drake.on('drag', function (el,target,source,sibling) {
            el.classList.remove('col-3');
        })
        // get the items within a group

        $("#apply-tab").click(function(){
            var a_children = document.querySelectorAll("#drag-A div");
            var a_ids = []
            for (var i = 0; i<a_children.length; i++) {
                a_ids.push(a_children[i].id)
            }
            var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
            $("#site_groups").val(group_a_ids);
        });

    </script>
    <!-- End custom js for this page-->
</body>
</html>

Upvotes: 0

Views: 215

Answers (1)

user8246956
user8246956

Reputation:

To anwser your question regarding the need to account for all groups at once (without taking care of the drag and drop part), you can take benefit of the HTML class drag-space, as follows:

        $("#apply-tab").click(function(){
        var group_ids = {};

        $(".drag-space").each(function() { // Loop over all items of class 'drag-space'
          var id = this.id;
          var key = id.replace(/drag-/, "").toLowerCase();
          var children = document.querySelectorAll("#" + id + " div");
          var ids = []
          for (var i = 0; i<children.length; i++) {
            ids.push(children[i].id)
          }
          group_ids[key] = ids;
        });
        $("#site_groups").val(JSON.stringify(group_ids));
    });

Upvotes: 1

Related Questions