Skip to content
Advertisement

How to change the element position?

In my browsers Firefox and Chrome I don’t get any errors or warnings. It’s just practice. I’m taking a course in javascript and Dynamic HTML. If anybody cares to look at my code and tell me what I’m doing wrong I’d appreciate it. There’s got to be something that I’m not getting right.

I want to create new divs as the page loads. These divs will appear as an ordered group that changes depending upon external data from a JSON file. I will need to do this with a for a loop because there are over 100 divs needed.

demo

HTML:

<!doctype html>
<html lang="fa" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div id="showFilters">
        <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
        <p>Add new group</p>
        <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
            <i class="fas fa-plus"></i>
        </a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let count = 0;
    $('#addFilter').click(function () {
        count++;
        let html = '<div class="position-relative">'+
            '<div class="row">'+
            '<div class="col-md-4 mb-3">'+
            '<label for="name">Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="latin">Latin</label>'+
            '<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="field">Select a field</label>'+
            '<select id="field" class="form-select" name="filters['+count+'][field]">'+
            '<option value="1">CheckBox</option>'+
            '<option value="2">Color</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '<div id="showGroups"> '+
            '</div>'+
            '<div class="w-100 text-center">'+
            '<p>Add new subgroup.</p>'+
            '<a onclick="addChildFilter()" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
            '<i class="fas fa-plus"></i>'+
            '</a>'+
            '</div>'+
            '</div>';
        $('#showFilters').append(html);
    });
    function addChildFilter() {
        count++;
        let selectedField = $('#field').val();
        if (selectedField == 1) {
            let html = '<div class="w-100">'+
                '<div class="col-md-4 mb-3 position-relative">'+
                '<label for="name">Check Box Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '</div>';
            $('#showGroups').append(html);
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'+
                '<div class="row">'+
                '<div class="col-md-6 mb-3">'+
                '<label for="name">Color Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '<div class="col-md-6 mb-3">'+
                '<label for="code">Code Color</label>'+
                '<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
                '</div>'+
                '</div>'+
                '</div>';
            $('#showGroups').append(html);
        }
    }
</script>
</body>
</html>

Advertisement

Answer

You can put this in the onclick event so it will be added into that element only like this :

<a onclick="addChildFilter(this)"
then
function addChildFilter(reed){}
and then
reed.parentElement.append(html);

This way it is adding to the place where add subgroup btn is present . The problem here now is that the html code is printed directly not the fields as you know jQuery you may find the problem as I am not good in jQuery (so used some JavaScript) . See if you can and find help from this answer.

let count = 0;
    $('#addFilter').click(function () {
        count++;
        let html = '<div class="position-relative">'+
            '<div class="row">'+
            '<div class="col-md-4 mb-3">'+
            '<label for="name">Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="latin">Latin</label>'+
            '<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="field">Select a field</label>'+
            '<select id="field" class="form-select" name="filters['+count+'][field]">'+
            '<option value="1">CheckBox</option>'+
            '<option value="2">Color</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '<div id="showGroups"> '+
            '</div>'+
            '<div class="w-100 text-center">'+
            '<p>Add new subgroup.</p>'+
            '<a onclick="addChildFilter(this)" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
            '<i class="fas fa-plus"></i>'+
            '</a>'+
            '</div>'+
            '</div>';
        $('#showFilters').append(html);
    });
    function addChildFilter(reed) {
        count++;
        let selectedField = $('#field').val();
        if (selectedField == 1) {
            let html = '<div class="w-100">'+
                '<div class="col-md-4 mb-3 position-relative">'+
                '<label for="name">Check Box Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '</div>';
            reed.parentElement.append(html);
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'+
                '<div class="row">'+
                '<div class="col-md-6 mb-3">'+
                '<label for="name">Color Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '<div class="col-md-6 mb-3">'+
                '<label for="code">Code Color</label>'+
                '<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
                '</div>'+
                '</div>'+
                '</div>';
            reed.parentElement.append(html);
        }
    }
<!doctype html>
<html lang="fa" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>Hello, world!</title>
</head>

<body>
  <div class="container mt-5">
    <div id="showFilters">
      <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
      <p>Add new group</p>
      <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
        <i class="fas fa-plus"></i>
      </a>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</body>

</html>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement