We have two categories and two training courses

When I click on the programming category with ajax, it shows the programming courses, but when we uncheck it, it should not show that it shows

I have some filters on the page so when clicking on the "x" button of a selected filter, need to remove the filter and uncheck the checkbox using jQuery, so How can I do that on dynamically created elements using jQuery?

I need to realize a checkbox filter for vacancies based on ajax. So I have some categories on-page, and when a user marks some checkboxes the result block shows only vacancies in selected categories. If there are no selected checkboxes page shows all vacancies in all categories.

Now I have my current variant, but it doesn't work with an array of checkboxes values, and every time after loading results checkboxes states are resetting.

blade

<div >
    <div >
        <div >
            <div  id="accordionExample">
                <div >
                    <h2  id="headingOne">
                        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Categories
                        </button>
                    </h2>
                    <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div >
                            @foreach($categories as $category)
                                <div >
                                    <input  onclick="categoryCheckbox({{ $category->id }})" type="checkbox" value="" id="cat_{{ $category->id }}">
                                    <label  for="cat_{{ $category->id }}">
                                        {{ $category->title }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                @foreach($courses as $course)
                    <div >
                        <div >
                            <img src="{{ asset('storage/'.$course->image) }}"  alt="{{ $course->title }}">
                            <div >
                                <h5 >{{ $course->title }}</h5>
                            </div>
                            <div >
                                <div >
                                    <div >{{ \Illuminate\Support\Str::limit($course->body, 10) }}</div>
                                    <div>
                                        <a href="{{ $course->path() }}">
                                            <span ><i ></i></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

script

<script>
    function categoryCheckbox(id) {
        $('.courseFilters').empty();
        $.ajax({
            type: 'GET',
            url: 'getCategoryCourse/'   id,
            success: function (response) {
                console.log(response);
                response.forEach(element => {
                    $('.courseFilters').append(`<div >
                        <div >
                            <img src="storage/${element.image}"  alt="${element.title}">
                            <div >
                                <h5 >${element.title}</h5>
                            </div>
                            <div >
                                <div >
                                    <div >${element.body}</div>
                                    <div>
                                        <a href="${element.path}">
                                            <span ><i ></i></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`);
                });
            },
        });
    }
</script>

web.php

Route::get('/getCategoryCourse/{id}', [App\Http\Controllers\ExploreController::class, 'show']);

ExploreController.php

public function show($id)
{
    $lists = Course::query()->whereHas('categories', function ($query) use ($id){
        $query->where('id', $id);
    })->get();
    
    return response()->json($lists);
}

Course.php

public function categories()
{
    return $this->belongsToMany(Category::class);
}

I removed this line

 $('.courseFilters').empty();

Then replaced your code

  $('.courseFilters').prop('checked', false);

Then I tested but my problem did not solve yet.

CodePudding user response：

You could add a dedicated class for the programming courses like And then, put a listener to the checkbox and show and hide these fields.

Forexample:

$('#programming-categroy-checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            $('.programming-course').show();
        }
        else{
            $('.programming-course').hide();
        }
    });

CodePudding user response：

Your description is very unclear, I couldn't understand your problem. You need to be more specific when asking questions here.