confusing jQuery AJAX call

Hello everybody, I'm trying to convert this static query

$companiesFinal = Websites::query();

    if(!empty($request->searchWord)) {
        $companiesFinal->where('web_name', 'LIKE', '%' . $request->searchWord . '%');
        $companiesFinal->where('web_seo_url', 'LIKE', '%' . $request->searchWord . '%');
    }

    if(!empty($request->category)){
        if(is_array($request->category)) {
            foreach($request->category as $categ) {
                $companiesFinal->orWhere('web_category', 'LIKE', '%' . $categ . '%');
            }
        } else {
            $companiesFinal->where('web_category', 'LIKE', '%' . $request->category . '%');
        }
    }

    if(!empty($request->claimed)){
        if($request->claimed == "all") {} else {
            $companiesFinal->where('claimed', '=', $request->claimed);
        }
    }

    if(!empty($request->sortBy)) {
        if($request->sortBy == "newest") {
            $companiesFinal->orderBy('created_at', 'DESC');
        } elseif($request->sortBy == "oldest") {
            $companiesFinal->orderBy('created_at', 'ASC');
        }
    }

    $companies = $companiesFinal->paginate(7);

to an AJAX jQuery call and here comes the confusing part. I've already tried to do that but unsuccessful. I tried something like:

   $.ajax({
                type: 'GET',
                url: '{{ url("/ajaxCall") }}',
                data: $("form").serialize(),
                success: function(response) {
                    var websites = "";
                    $.each(response.data, function(index, value) {
                        websites = websites + "<div>... " + value.web_name + "......." + value.web_link + "...</div>";
                    });

                        $(".getResults").html(websites);

                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
                }
            });

of course when i tried that converted the controller query to return json response and other necessary stuff like this but at the end the browser console was saying "value not defined". Also confusing for me how can i display pagination when getting this data with AJAX? I'll be so grateful if someone helps for achieving that.

tykus

4 years ago

Level 104

Why not return a view partial instead? In your Controller action, you can return a string of HTML:

// ...
$companies = $companiesFinal->paginate(7);
return view('path.to.partial', compact('companies'))->render();

That view partial would be very simple:

@foreach($companies as $company)
    <div>
        {{ $company->web_name }}.......{{ $company->web_link }}...
    </div>
@endforeach

This allows you to simply append the AJAX query result to the DOM rather than iterating over the result and building the HTML string in Javascript:

  $.ajax({
  type: 'GET',
  url: '{{ url("/ajaxCall") }}',
  data: $("form").serialize(),
  success: function(response) {
    $(".getResults").html(response);
},

Please or to participate in this conversation.