jQuery nextAll() fonksiyonu

gundogduyakici 1124 gün önce

312 defa görüntülendi

Merhaba,
Bir alt kategori varsa, yeni bir select ekliyorum. Toplam 3 adet alt alta select olduğunu düşünün. İkinci select değiştirildiğinde, bir altındakinin seçilip kaldırılmasını ve yeniden oluşturulmasını istiyorum. Bu nedenle, genel olarak seçilen select altındaki tüm div kaldırılacak ve yeniden oluşturulacaktır. nextAll() işlevini kullanıyorum ama çalışmıyor. Laravel ile çalışıyorum ve oradaki html verilerini hazırlayıp dom’a ekliyorum. Daha iyi bir yöntem varsa lütfen bana bildirin. İşte size örnek kodlar;

Modal içerisindeki HTML;

<div id="selectCategoryGroups">
    <div class="mb-10 fv-row add-new-category">
        <label for="category" class="required form-label">Select Main Category</label>
        <select class="form-select select-category mb-2" id="category" name="category[]" data-controls="select2" data-hide-search="false" data-placeholder="Select a Category" required>
            <option></option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name[Config::get('app.locale')] }}</option>
            @endforeach
        </select>
    </div>

    <img id="categoryLoading" style="display: none;" src="{{ asset('seller-assets/assets/media/loading.gif') }}" width="70" alt="loading" />
</div>

JS kodları;

$('.select-category').select2({
        dropdownParent: $('#selectCategoryModal'),
    }).on('change', function () {
        $('#selectCategoryGroups').nextAll('div').remove();

        let id = $(this).val();
        newCategory(id);
    });

    function newCategory(id) {
        $('#selectCategoryGroups').nextAll('div').remove();
        $('#categoryLoading').css('display', 'block');

        $.ajax({
            url: '{{ route('seller.product.get.category') }}',
            method: 'GET',
            data: {
                id: id
            },
            success: function(data) {
                if(data !== null) {
                    $('#categoryLoading').css('display', 'none');
                    $(data.html).insertAfter($('.add-new-category').last());

                    $('.select-category'+id).select2({
                        dropdownParent: $('#selectCategoryModal'),
                    }).on('change', function () {
                        let id = $(this).val();
                        newCategory(id);
                    });
                }
            },
            error: function (err) {
                $('#categoryLoading').css('display', 'none');
                console.log('ERR => ', err);
            }
        });
    }

getCategory fonksiyonu;

public function getCategory(Request $request)
{
    $data = Category::select('id', 'parent_id', 'name')->get()->toArray();

    $tree = new Tree(
        $data,
        ['id' => 'id', 'parent' => 'parent_id', 'title' => 'name']
    );

    $node = $tree->getNodeById($request->input('id'));
    $descendants = $node->getChildren();

    $html = '';

    $html .= '<div class="mb-10 fv-row add-new-category">';
    $html .= '<label for="category" class="required form-label">Select Sub Category</label>';
    $html .= '<select class="form-select select-category'.$request->input('id').' mb-2" name="category[]" data-control="select2" data-hide-search="false" data-placeholder="Select a Category" required>';
        $html .= '<option value=""></option>';

    if($descendants) {
        foreach($descendants as $descendant) {
            $html .= '<option value="'.$descendant->id.'">'.$descendant->name[Config::get('app.locale')].'</option>';
        }
        $html .= '</select>';
        $html .= '</div>';

        return response()->json(['id' => $request->input('id'), 'html' => $html], 200);
    }else {
        return response()->json(['id' => 0, 'html' => null], 200);
    }
}

Düzenleme: Sorunu çözdüm :)

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

1
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (2)

gundogduyakici

1123 gün önce

$('.select-category'+id).select2({
    dropdownParent: $('#selectCategoryModal'),
}).on('change', function () {
    $(this).closest('div').nextAll('div').remove();

    let id = $(this).val();
    newCategory(id);
});

burada $(this).closest fonksiyonunu kullandım ve kendinden sonraki en yakın tüm div'leri kaldırdım.

#009375

omerf

1124 gün önce

Sorunu çözmenize sevindim. Hatanızı ve çözümünü yoruma yazıp sonra doğru olarak işaretlendirirseniz türkçe kaynakların gelişimine güzel bir katkıda bulunmuş olursunuz

#009362