add delete function for ajax search results

Question

I am trying to make a dynamic table with ajax/jquery.

After the search results are displayed, I want each row to have actions like edit and delete that will be responsible for each entry. This my controller method

     public function search(Request $request){
    if($request->ajax()){
        $output="";
        // $users=DB::table('users')->where('user_id','LIKE','%'.$request->search."%")->get();   
        $grammar_cards = FlashCard::where('lang','=','gr')
                                ->where(function($query) use ($request){
                                    $query->where('word','LIKE', '%'.$request->search.'%')
                                    ->orWhere('option1','LIKE', '%'.$request->search.'%')
                                    ->orWhere('option2','LIKE', '%'.$request->search.'%')
                                    ->orWhere('option3','LIKE', '%'.$request->search.'%')
                                    ->orWhere('option_correct','LIKE', '%'.$request->search.'%')
                                    ->orderBy('class')
                                    ->orderby('unit_id');
                                })->paginate(20);
        // $flashcards->setPath('custom/url');

                if($grammar_cards){
                    foreach ($grammar_cards as $key => $grammar_card) {
                        $grammarcard_question = $grammar_card->word;
                        $grammarcard_ch1 = $grammar_card->option1;
                        $grammarcard_ch2 = $grammar_card->option2;
                        $grammarcard_ch3 = $grammar_card->option3;
                        $grammarcard_correctchoice = $grammar_card->option_correct;
                        $grammarcard_unit = $grammar_card->unit_id;
                        $grammarcard_class = $grammar_card->class;

                        $output.='<tr>'.
                        '<td>'.$grammarcard_question.'</td>'.
                        '<td>'.$grammarcard_ch1.'</td>'.
                        '<td>'.$grammarcard_ch2.'</td>'.
                        '<td>'.$grammarcard_ch3.'</td>'.
                        '<td>'.$grammarcard_correctchoice.'</td>'.
                        '<td>'.$grammarcard_unit.'</td>'.
                        '<td>'.$grammarcard_class.'</td>'.
                        '<td style="display:flex;">
                            <a href="/admin/grammar/'.$grammar_card->id.'/edit" style="margin-right:10px;"><button class="btn btn-info">რედაქტირება</button></a>
                            <form action="{{ route(\'grammar.destroy\', '.$grammar_card->id.')}}" method="post">
                                @csrf
                                @method(\'DELETE\')
                                <button class="btn btn-danger" type="submit">delete</button>
                            </form></td>'.
                        '</tr>';
                    }
                    return Response($output);
                    // return view('admin.grammar.index', ['output' => $output])->render(); 
                }
            }
    }

this is my route

        Route::resource('/admin/grammar', 'GrammarController');

this is my destroy method

    public function destroy($id)
{
    $grammar_card = FlashCard::find($id);
    $grammar_card->delete();
    return redirect('admin/grammar')->with('success', 'successfully deleted');
}

This is my output

It prints out @csrf @method('DELETE') as text well as delete button

When I click the delete button it goes to url localhost:8000/admin/%7B%7B%20route('grammar.destroy',%2040271)%7D%7D and outputs 419 error

Can you please tell me how to resolve this issue?

Please add errors/output etc as text here, not images. – Don't Panic Oct 20 '19 at 11:43 — Don't Panic, Oct 20 '19 at 11:43

score 0 · Answer 1 · answered Oct 24 '19 at 07:06

Instead of generating HTML in controller, You should create a new blade view for the table you are generating with "$grammar_cards" data.

So let's say you create "grammar_cards.blade.php" file in your resources/view folder. & add below code in blade.php file

@if($grammar_cards)
    @foreach($grammar_cards as $key => $grammar_card)
        <tr>
            <td>{!! $grammar_card->word !!}</td>
            <td>{!! $grammar_card->option1 !!}</td>
            <td>{!! $grammar_card->option2 !!}</td>
            <td>{!! $grammar_card->option3 !!}</td>
            <td>{!! $grammar_card->option_correct !!}</td>
            <td>{!! $grammar_card->unit_id !!}</td>
            <td>{!! $grammar_card->class !!}</td>
            <td style="display:flex;">
                <a href="/admin/grammar/'.$grammar_card->id.'/edit" style="margin-right:10px;">
                    <button class="btn btn-info">რედაქტირება</button>
                </a>
                <form action="{{ route(\'grammar.destroy\', '.$grammar_card->id.')}}" method="post">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger" type="submit">delete</button>
                </form>
            </td>
        </tr>
    @endforeach
@endif

pass the "$grammar_cards" variable in the view Something like this.

$table_html = view('grammar_cards')->with(compact('grammar_cards'))->render();

Pass with $table_html in response to where you want to display them.

The problem was you were using blade specific function like "@csrf" & "@method" which you can't use somewhere else but only .blade.php file.

Hope this help!!

add delete function for ajax search results

1 Answers1