CODEWITHSUNDEEP
phpjqueryajaxlaravel
johnW
johnW

Reputation: 339

Use of undefined constant post - assumed 'post'

I have a menu with some post categories:

<ul>
    @foreach($categories->get() as $category)
        <li class="ative">
            <a href="#" name="category" id="{{$category->id}}">{{$category->name}}</a>
        </li>
    @endforeach
</ul>

When I click in the category, for example with id "1", through the menu I want to show the posts that belong to the category with id "1"in the "#posts" div.

So, the #posts div shows the last posts when the page is acessed at first, but after a category is clicked it should show the posts that belong to the clicked category. So I have the #posts div:

<div id="posts">
    @foreach($posts as $post)
    <div id="posts">
         <img src="{{$post->image}}">
        <h1>{{$post->title}}</h1>
        <!-- ... -->
    </div>
    @endforeach
</div>

If the category with id "1" is clicked in the console appears the info of the only post that exist for now for that category with id "1":

{id: 1, title: "Title", description: "", …}

Now do you know how to show in the #posts div the posts that belong to the clicked category with the append method? Something like below (but like below dont works):

$('#posts').append(
    <div id="posts">
      <img src="{{$post->image}}">
      <h1>{{$post->title}}</h1>                    
     </div>);
 });

I have a FrontController index method that shows the homepage:

public function index(){
        return view('home')
            ->with('categories', Category::orderBy('created_at', 'desc')->get())
            ->with('posts', Post::orderBy('created_at','desc')->get());
    }

I also have a PostController that has a method postsFromCategory to get the posts from a selected category:

 public function WhereHasCategory(Request $request)
    {
        $posts = Post::whereHas('categories', function ($categories) use (&$request) {
            $categories->where('category_post.id',$request->id);
        })->get();
        return response()->json($posts);
    }

Then in the index.blade.php I have the ajax:

$.ajax({
    url: '{{ route('category.posts',null) }}/' + category_id,
    type: 'GET',
    success:function(result){
        $('#posts').empty();
        $.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });


        console.log(result);
    },
    error: function(error) {
        console.log(error.status)
    }
});

Upvotes: 0

Views: 1118

Answers (2)

Scaramouche
Scaramouche

Reputation: 3267

I have never coded in laravel so the syntax is going to be off, but I hope the gist sticks:

First, you should not use duplicate IDs like "posts". Try assigning "post" + $key to every div inside the foreach:

<div id="posts">
    @foreach($posts as $key => $post)
    <div id="post" + $key>
         <img src="{{$post->image}}">
        <h1>{{$post->title}}</h1>
        <!-- ... -->
    </div>
    @endforeach
</div>

Now, if you are retrieving the post per category with this code:

$.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });

you could try:

var newPosts = "";
$.each(result, function(index, post) {
         newPosts += '<img src="' + post.image + '">' +
         + '<h1>' + post.title + '</h1>';
        });
$('#posts').html(newPosts);

let me know

Upvotes: 1

afsal c
afsal c

Reputation: 620

Change id to class 

<div class="posts">
@foreach($posts as $post)
<div id="posts">
     <img src="{{$post->image}}">
    <h1>{{$post->title}}</h1>
    <!-- ... -->
</div>
@endforeach
</div>

The code $('#posts').append() is not needed since we can add it in success callback of ajax.

Chenge the ajax function to this

$.ajax({
url: '{{ route('category.posts') }}',
type: 'GET',
data : { id:category_id },
success:function(result){
    $('#posts').empty();
    var newPosts='';
    $.each(result, function(index, post) {
     newPosts += '<img src="' + post.image + '">' +
     + '<h1>' + post.title + '</h1>';
    });
    $('#posts').html(newPosts);

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

Upvotes: 1

Related Questions