Laravel Blade 中的 AJAX 忽略 div 类-解网

问：

我是 AJAX JavaScript 的新手，我尝到了在 Laravel 10 中过滤数据而无需使用 AJAX 刷新的滋味但还没有运气。

这是我的刀片视图的代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
    
        const clickableElements = document.querySelectorAll('.clickable');
        // Fungsi untuk mengambil dan menampilkan data campaign berdasarkan kategori
        function filterCampaignByCategory(category) {
            $.ajax({
                type: 'GET',
                url: '/filter', // Sesuaikan dengan rute Anda
                data: { filter: category },
                success: function(data) {
                    var campaigns = data.campaigns;
                    var campaignList = $('#daftar_campaign');
                    campaignList.empty();

                    // Loop melalui data campaign dan tambahkan ke daftar
                    $.each(campaigns, function(key, campaign) {
                        campaignList.append(
                            '<div class="popular-causes__sinlge">' +
                            '<div class="popular-causes__img">' +
                            '<img height="300px" src="http://127.0.0.1:8001/storage/' + campaign.BannerCampaign + '" alt="">' +
                            '<div class="popular-causes__category">' +
                            '<p>' + campaign.KategoriCampaign + '</p>' +
                            '</div>' +
                            '</div>' +
                            '<div class="popular-causes__content" style="width: 370px">' +
                            '<div class="popular-causes__title" style="height: 100px">' +
                            '<h3><a href="campaign-details.html">' + campaign.NamaCampaign + '</a></h3>' +
                            '</div>' +
                            '<div class="popular-causes__progress" style="height: 200px">' +
                            '<div class="bar">' +
                            '<div class="bar-inner count-bar" data-percent="' + campaign.percentageCompleted + '%">' +
                            '<div class="count-text">' + campaign.percentageCompleted + '%</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="popular-causes__goals">' +
                            '<p><span>' + campaign.HasilDonasiCampaign + '</span> Terkumpul</p>' +
                            '<p><span>' + campaign.TargetCampaign + '</span> Target</p>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>');
                    });
                }
            });
        }

        clickableElements.forEach(function(element) {
            element.addEventListener('click', function() {
                const value = element.getAttribute('data-value');
                filterCampaignByCategory(value);
            });
        });

        function sendGetRequest(value) {
            window.location.href = "/?filter=" + value;
        }

        // Tambahkan event listener untuk ikon kategori
        $('.category-icon').on('click', function() {
            var selectedCategory = $(this).data('category');
            filterCampaignByCategory(selectedCategory);
        });

        
        // Memuat semua campaign saat halaman pertama kali dimuat
         // Menggunakan '' untuk memuat semua campaign
    
    </script>

    <!--campaign Start-->
    <section class="popular-causes">
        <div class="container pb-5 mb-5">
            <div class="block-title text-left">
                <h4>Help the People</h4>
                <h3>Our Popular Campaigns</h3>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="popular-causes__carousel owl-theme owl-carousel" id="daftar_campaign">
                        @foreach ($campaigns as $campaign)
                            <div class="popular-causes__sinlge">
                                <div class="popular-causes__img">
                                    <img height="300px" src="http://127.0.0.1:8001/storage/{{ $campaign->BannerCampaign }}"
                                        alt="">
                                    <div class="popular-causes__category">
                                        <p>{{ $campaign->KategoriCampaign }}</p>
                                    </div>
                                </div>
                                <div class="popular-causes__content" style="width: 370px">
                                    <div class="popular-causes__title" style="height: 100px">
                                        <h3><a href="campaign-details.html">{{ $campaign->NamaCampaign }}</a>
                                        </h3>
                                        
                                    </div>
                                    <div class="popular-causes__progress" style="height: 200px">
                                        <div class="bar">
                                            <div class="bar-inner count-bar"
                                                data-percent="{{ $campaign->percentageCompleted }}%">
                                                <div class="count-text">{{ $campaign->percentageCompleted }}%</div>
                                            </div>
                                        </div>
                                        <div class="popular-causes__goals">
                                            <p><span>{{ $campaign->HasilDonasiCampaign }}</span> Terkumpul</p>
                                            <p><span>{{ $campaign->TargetCampaign }}</span> Target</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

这是我的控制器的代码：

public function filter(Request $request){
        $filter = $request->input('filter');

        if (empty($filter)) {
            $campaigns = Campaign::with('user')
                        ->select('NamaCampaign','UrlCampaign','KategoriCampaign','BannerCampaign','MulaiCampaign','AkhirCampaign','TargetCampaign','HasilDonasiCampaign')
                        ->where('Prioritas', 1)
                        ->where('Aktif', 1)
                        ->latest('idCampaign')
                        ->get();
        } else {
            $campaigns = Campaign::with('user')
                        ->select('NamaCampaign','UrlCampaign','KategoriCampaign','BannerCampaign','MulaiCampaign','AkhirCampaign','TargetCampaign','HasilDonasiCampaign')
                        ->where('KategoriCampaign', $filter)
                        ->where('Prioritas', 1)
                        ->where('Aktif', 1)
                        ->latest('idCampaign')
                        ->get();
        }
        
        return response()->json(['campaigns' => $campaigns]);
    }

在此处输入图像描述这是我过滤前的默认页面

在此处输入图像描述，这是在过滤数据之后，过滤器工作，但经过调查，Ajax 忽略了我的 div 类使它看起来很奇怪：

<div class="popular-causes__carousel owl-theme owl-carousel" id="daftar_campaign">

我已经尝试了很多解决方案，但还没有找到运气，我真的很想看看为什么会发生这种情况或想法。

JavaScript HTML ajax laravel laravel-blade

Laravel 实际上提供了一种非常干净的方式，可以将渲染的 HTML 作为文本从文件中返回，因此您不必在 Javascript 中完全重建它。你可以做类似的事情，你可以做，而不是跟着多个电话。但是，您需要有一个单独的文件.blade.phpreturn response()->json(['html' => view('your-blade-file')->with(['campaigns' => $campaigns])->render()], 200);$('#daftar_campaign').html(data.html).empty().append().blade.php<div class="popular-causes__carousel owl-theme owl-carousel" id="daftar_campaign"> ... </div>

0赞 Tim Lewis 10/2/2023

您不必发送原件，我没有在您的问题中看到它，因为它向下滚动了一点。都很好！没有做任何事情的原因是这是返回的 HTML 的一部分。你需要把它移动到你想要应用它的 div 上面，比如$('#daftar_campaign').html(data.html);id="daftar_campaign"id="daftar_campaign"<div class="col-xl-12" id="daftar_campaign">

0赞 Gagas Amukti 10/2/2023

谢谢！您的方法确实 imgur.com/7XsragE 但它确实在 HTML 中呈现了 HTML，这有点有趣

0赞 Tim Lewis 10/2/2023

哈哈，是的，你已经有了这个想法，但你需要调整你的 HTML 和 JS 才能让它以同样的方式工作。我将在下面写一个快速的答案，以尝试向您展示它应该如何工作。

答：

0赞 Tim Lewis 10/2/2023 #1

在注释之后，将 HTML 移动到一个唯一的文件中。我们称之为，里面：.blade.phpcampaigns.blade.phpresources/views

<div class="popular-causes__carousel owl-theme owl-carousel" id="daftar_campaign">
  @foreach($campaigns as $campaign)
    <div class="popular-causes__sinlge">
      <div class="popular-causes__img">
        <img height="300px" src="http://127.0.0.1:8001/storage/{{ $campaign->BannerCampaign }}" alt="" />
        <div class="popular-causes__category">
          <p>{{ $campaign->KategoriCampaign }}</p>
        </div>
      </div>
      <div class="popular-causes__content" style="width: 370px">
        <div class="popular-causes__title" style="height: 100px">
          <h3>
            <a href="campaign-details.html">{{ $campaign->NamaCampaign }}</a>
          </h3>    
        </div>
        <div class="popular-causes__progress" style="height: 200px">
          <div class="bar">
            <div class="bar-inner count-bar" data-percent="{{ $campaign->percentageCompleted }}%">
              <div class="count-text">{{ $campaign->percentageCompleted }}%</div>
            </div>
          </div>
          <div class="popular-causes__goals">
            <p>
              <span>{{ $campaign->HasilDonasiCampaign }}</span> Terkumpul
            </p>
            <p>
              <span>{{ $campaign->TargetCampaign }}</span> Target
            </p>
          </div>
        </div>
      </div>
    </div>
  @endforeach
</div>

在现有文件中，“包含”以下文件：.blade.php

<section class="popular-causes">
  <div class="container pb-5 mb-5">
    <div class="block-title text-left">
      <h4>Help the People</h4>
      <h3>Our Popular Campaigns</h3>
    </div>
    <div class="row">
      <div id="campaignsContainer" class="col-xl-12">
        @include('campaigns', ['campaigns' => $campaigns])
      </div>
    </div>
  </div>
</section>

请注意我是如何添加到紧邻该部分的。这对以后很重要。id="campaignsContainer"<div>@include()

现在，在控制器中，修改语句：return

public function filter(Request $request){
  $campaigns = Campaign::with('user') /* ... */ ->get();

  return response()->json(['html' => view('campaigns', ['campaigns' => $campaigns])->render()], 200);
}

最后，修改你的 JS：

function filterCampaignByCategory(category) {
  $.ajax({
    type: 'GET',
    url: '/filter',
    data: { filter: category },
    success: function(response) {
      $('#campaignsContainer').html(response.html);
    }
  });
}

该行将从控制器获取返回的 HTML，该 HTML 与现有 HTML 完全相同（因为并生成相同的 HTML），并用控制器内部生成的新 HTML 覆盖它。$('#campaignsContainer').html(response.html);@include('view', ...)view('view', ...)$campaigns

这应该可以做到！

0赞 nanang 10/3/2023 #2

根据您的脚本尝试注释或删除此行： campaignList.empty（）;

上一个：如何将ajax值传递给控制器

下一个：如果图像大小超过Laravel中的验证期间，则获取422（不可处理的内容）

Laravel Blade 中的 AJAX 忽略 div 类

AJAX in Laravel Blade ignoring div class

评论