How do we change the element position?

  ajax, javascript, jquery, laravel

All of my var statements uses identifiers:

let count = document.getElementsByClassName('product_filter_div').length + 1;
let id1 = "'"+'filter_div-'+count+"'";
let id2 = count;
let id3 = 'filter-'+count;
let html = '<div id="filter_div-'+count+'" class="product_filter_div position-relative">'+

bad place

So why am I getting a null error? I ran this code in the Javascript runner and got the null error message. And in my browsers Firefox and Chrome I don’t get any errors or warnings. When I run the code in the browser and click the button to activate the event handler, the form clears. It’s not going to a server anyway. 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. Here is the script:

blade

    <div class="container-fluid">
        <div class="row">
            <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
                <span class="me-2"><i class="fas fa-filter"></i></span>
                <span>@yield('title')</span>
            </div>
            <form action="{{ route('filters.store') }}" method="post">
                <div class="d-flex justify-content-center">
                    <div class="col-md-6 mb-3">
                        <label for="category_id">انتخاب سر دسته</label>
                        <select class="form-control selectpicker" title="چیزی انتخاب نشده است." id="category_id" name="category_id" data-live-search="true">
                            @foreach($categories as $id => $name)
                                @isset($category_id)
                                    <option value="{{ $id }}" {{ $category_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @else
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endisset
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
            @isset($category_id)
                <div class="d-flex justify-content-center">
                    <form class="col-md-10" method="post" action="{{ route('filters.store') }}">
                        <div id="showFilters">
                            {{-- GROUP --}}
                        </div>
                        <div class="w-100 text-center mt-4">
                            <p>گروه دیگری را اضافه کنید.</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 class="row">
                            <div class="col-md-3 mb-3">
                                <button type="submit" class="btn btn-success">ذخیره</button>
                            </div>
                        </div>
                    </form>
                </div>
            @endisset
        </div>
    </div>

script

    <script src="{{ asset('themes/js/bootstrap-select.js') }}"></script>
    <script src="{{ asset('themes/js/defaults-fa_IR.min.js') }}"></script>
    <script src="{{ asset('themes/js/jscolor.js') }}"></script>
    <script>
        $('#category_id').change(function() {
            let category_id = document.getElementById('category_id').value;
            window.location = '{{ route('filters.create') }}?category_id=' + category_id;
        });
        $('#addFilter').click(function () {
            let count = document.getElementsByClassName('product_filter_div').length + 1;
            let id1 = "'"+'filter_div-'+count+"'";
            let id2 = count;
            let id3 = 'filter-'+count;
            let html = '<div id="filter_div-'+count+'" class="product_filter_div position-relative">'+
                '<i class="fas fa-times text-danger position-absolute end-0 cursor-pointer"></i>' +
                '<div class="row">'+
                '<div class="col-md-4 mb-3">'+
                '<label for="name-'+count+'" class="form-label">نام فیلتر</label>'+
                '<input type="text" id="name-'+count+'" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '<div class="col-md-4 mb-3">'+
                '<label for="latin-'+count+'" class="form-label">نام لاتین فیلتر</label>'+
                '<input type="text" id="latin-'+count+'" class="form-control" name="filters['+count+'][latin]">'+
                '</div>'+
                '<div class="col-md-4 mb-3">'+
                '<label for="field-'+count+'" class="form-label">انتخاب فیلد</label>'+
                '<select id="field-'+count+'" class="form-select" name="filters['+count+'][field]">'+
                '<option value="1">چک باکس</option>'+
                '<option value="2">رنگ</option>'+
                '<option value="3">آپشن</option>'+
                '</select>'+
                '</div>'+
                '</div>'+
                '<div class="w-100 text-center">'+
                '<p>زیر گروه دیگری را اضافه کنید.</p>'+
                '<a onclick="addChildFilter('+id1+', '+id2+')" 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(id1, id2) {
            let field_id = 'field-' + id2;
            let field = document.getElementById(field_id).value;
            if (field == 1) {
                var box = '<div class="row">hello world</div>';
            } else if (field == 2) {

            } else {

            }
            $("#"+id1).append(box);
        }
        $(document).on('click', '.fa-times', function() {
            $(this).parent().remove();
        });
    </script>

Source: Laravel

Leave a Reply