Question

0

108

Views

Return a view from an ajax call

I have 0 experience in Ajax, and now I'm trying to get an html table to return on an ajax call.

As a result, I get the error

jquery-3.6.0.min.js:2 POST http://test.loc/%7B%7B%20url('blog/articles')%20%7D%7D 404 (Not Found)

I understand that there are still a lot of mistakes, so don't judge too much, and help in any way you can :)

Route:

Route::post('blog/articles', 'App\Http\Controllers\BlogController@articles');

Ajax on calling page:

function getBlogLists(category_id) {
  var category_id = category_id;
  $.ajax({
      url: "{{ url('blog/articles') }}",
      type: 'POST',
      data: { 'category_id': category_id },
      datatype: 'html',
      success: function(data) {
          console.log('success');
          console.log(data);
          
            document.querySelectorAll('.blog-filter__item').forEach(el => {
              el.addEventListener('click', () => {
                document
                  .querySelector('.blog-filter__item.active')
                  .classList.remove('active');
                el.classList.add('active');
            
                  var dataFilter = $(el).attr('data-filter');
            
                  if (dataFilter == 'all') {
                    $('.blog-list').show();
                  }
                  else {
                    $('.blog-list').hide()
                    $(dataFilter).show()
                  }
              });
            });
          
      },
  });
}

//on page load
getBlogLists("{{ $category->id }}");

Controller:

public function articles() {
        $input = Request::all();
        if(Request::isMethod('post') && Request::ajax()) {
            if($input['category_id']) {
                $articles = Article::select('select * from blog_categories where blog_category_id = ?', array($input['category_id']));
                $returnHTML = view('blog.articles')->with('articles', $articles)->render();
                return response()->json( array('success', 'html'=>$returnHTML) );
    
            }
        }   
    }

View:

@foreach($articles as $index => $article)
    <div class="blog-list category_{{ $article->blog_category_id }}">
        @if ($index % 2 === 1)

        <div class="blog-article blog-article--right">
                <h2 class="blog-article_title">{{ $article->title }}</h2>
            </div>
        @else

            <div class="blog-article blog-article--left">
                <h2 class="blog-article_title">{{ $article->title }}</h2>
            </div>
        @endif
    </div>
@endforeach

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T05:10:42.781Z

You have this error because you have a problem in your URL.

function getBlogLists(category_id) {
  var category_id = category_id;
  $.ajax({
      url: "{{ url('blog/articles') }}",

Here, the url is literally {{ url('blog/articles') }}, I mean, as a string.

You are sending the request to http://test.loc/{{ url('blog/articles') }}, which once encoded gives http://test.loc/%7B%7B%20url('blog/articles')%20%7D%7D.

That's why you are getting a 404 error (not found), obviously this url doesn't exist.

First, remove the url variabilization:

function getBlogLists(category_id) {
  var category_id = category_id;
  $.ajax({
      url: "http://test.loc/blog/articles", //or whatever your url is

Then in your controller, you just have to return the HTML and it will be inside data in your javascript success callback.

Do a simple test first:

public function articles() {
    return "<h1>HelloWorld</h1>";
}

If it works with this simple "hello world", it will work with the view you are rendering as well.

0

108