CookieMonster's avatar

Deleting item not outputting the correct id

So I have a list of wishlist items where each item has it's own unique product id. I output it in my view like below:

wishlist.blade.php:

 <table class="table">
            <!-- Starting Item Template -->
        @if(count($favourite))
         @foreach ($favourite as $item)   
            <tr>
                <td class="align-top" style="max-width: 400px; border-top:white;">
                    <div class="row mb-5">
                        <div class="col-2 my-auto">
                            <a
                                href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}">
                                <img class="responsive-img p-1"
                                    style="height:200px;width:200px; max-width:300px;"
                                    src="{{ asset('storage/' . $item->product->parentProduct->images[0]->path . $item->product->parentProduct->images[0]->filename)}}"
                                    alt="Product Image">
                            </a>
                            
                        </div>
                        <div class="col-6 my-auto padding-left-md">

                        
                            <a style="color:black; font-weight:bold;"
                                href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}">
                                <h4>{{ $item->product->parentProduct->name}}</h4>
                            </a>

                            <p class="text-capitalize">Sold by: {{$item->product->panel->company_name}}
                               </p>
                            <p class="text-capitalize">Unit Price:
                                <?php echo 'RM ' . number_format(($item->product->price / 100), 2); ?>
                            </p>
                        
                            <p style="margin-top: 100px;">Added on: {{$item->created_at}}</p>
                        </div>

                        <div class="offset-2 mt-4">
                            {{-- Quantity: xx --}}
                        </div>

                        <div class="col-2 col-md-2 padding-button">
                            <button class="btn btn-md bjsh-btn-product-page font-weight-bold w-100 bjsh-button-mobile"><a
                                style="color:black; text-decoration:none;"
                                href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}">
                                Buy Now</a>
                            </button>
                            
                           
                            <form id="add-to-cart-form" style="display: inline;" method="POST" action="{{ route('shop.cart.add-item') }}">
                                @method('POST')
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $item->product_id }}">
                                <input type="hidden" id="product_attribute_color" name="product_attribute_color" value="">
                                <input type="hidden" id="product_attribute_size" name="product_attribute_size" value="">
                                <input type="hidden" id="product_attribute_temperature" name="product_attribute_temperature" value="">
                                <input type="hidden" name="productQuantity" value="1">
                            <button type="submit" class="btn btn-md bjsh-btn-product-page font-weight-bold w-100 bjsh-button-mobile mt-4" style="color:black; text-decoration:none;">
                             Add to Cart
                            </button>
                            </form>
                           
                           <div class="row">
                               <div class="offset-2 col-5">         
                                    <a href="{{route('shop.perfect-list.destroy',[$item->product->parentProduct->id])}}" onclick="event.preventDefault(); document.getElementById('submit-form').submit();"> <i class="fa fa-trash-o fa-2x text-muted mt-4 padding-left-icon"></i></a>
                                    <form id="submit-form" action="{{ route('shop.perfect-list.destroy',[$item->product->parentProduct->name_slug]) }}" method="POST" class="hidden">
                                      @csrf

                                      @method('PUT')
                                    </form>
                               </div>
                           </div>
                        </div>
                    </div>
                    <hr>
                </td>
            </tr>
           
            @endforeach
            
            <!-- Ending Item Template -->
            @else
            <div class="row">
                <div class="col-12">
                    <strong class="mr-2 " style="font-size:15pt;"> Your Perfect List is empty.</strong>
                    <a class="btn bjsh-btn-gradient" href="/shop">Continue Shopping</a>
                </div>       
            </div>
            @endif    
        </table>

It display the items correctly but I wanted to add a delete button to remove the item from wish list so I added a destroy method and I tried to output dd to see if I could get the product id before deleting it. Somehow, everywhere delete icon keep returning the same id.

My controller:

 //Remove the specified item from storage.
    public function destroy($product_id){
        $userID = Auth::user()->id;
        $perfectList = new Favorite;
       // $perfectList = $perfectList->where('user_id',$userID)->where('product_id',$product_id)->take(1);
        dd($product_id);
    }

Basically the problem comes from

 <a href="{{route('shop.perfect-list.destroy',[$item->product->parentProduct->id])}}"

Though, my relationship is correct between models.

Favourite model:

  /**
     * Get product.
     */
    public function product()
    {
        return $this->belongsTo('App\Models\Products\Product', 'product_id');
    }

Product model:

  public function parentProduct()
    {
        return $this->belongsTo('App\Models\Globals\Products\Product', 'global_product_id');
    }

Clicking the delete icon of each item just keeps returning the id for the first item (first row). I attached an image for visual:

https://ibb.co/wSf5gXn

What did I do wrong?

0 likes
25 replies
MichalOravec's avatar

@nickywan123 Here should be same route, I mean in the form.

<a href="{{route('shop.perfect-list.destroy',[$item->product->parentProduct->id])}}" onclick="event.preventDefault(); document.getElementById('submit-form').submit();"> <i class="fa fa-trash-o fa-2x text-muted mt-4 padding-left-icon"></i></a>

<form id="submit-form" action="{{ route('shop.perfect-list.destroy',[$item->product->parentProduct->id]) }}" method="POST" class="hidden">
  @csrf

  @method('PUT')
</form>

And maybe your products have a same parent product. Check your data in database.

CookieMonster's avatar

It doesn't matter because it keeps returning the first element product id.

My database is correct, I use name_slug to check the name of the product, i.e curtain, light,etc.

You can see the image I screenshot in my post.

MichalOravec's avatar
MichalOravec
6 years ago
Best Answer
Level 75

@nickywan123 Problem is with id of form, it should be unique so

<a href="{{route('shop.perfect-list.destroy',[$item->product->parentProduct->id])}}" onclick="event.preventDefault(); document.getElementById('submit-form-{{ $loop->index }}').submit();"> <i class="fa fa-trash-o fa-2x text-muted mt-4 padding-left-icon"></i></a>

<form id="submit-form-{{ $loop->index }}" action="{{ route('shop.perfect-list.destroy',[$item->product->parentProduct->id]) }}" method="POST" class="hidden">
  @csrf

  @method('PUT')
</form>

I used a $loop variable

Documentation: https://laravel.com/docs/7.x/blade#the-loop-variable

In HTML id attribute should be unique on one page.

CookieMonster's avatar

I even tried using "Buy Now"

 $item->product->parentProduct->name_slug

While buy now outputs value correctly but the delete outputs the same regardless of the item I clicked. So i was confused.

CookieMonster's avatar

Why does my other stuff like Buy Now able to retrieve the right elements but not my delete?

CookieMonster's avatar

Also my Add to Cart form is not unique but it still works fine.

CookieMonster's avatar

Yes now it outputs correctly for delete, though I just needed clarification why the behavior is different for this compared to my other elements?

MichalOravec's avatar

Your add to cart is a normal form with method post.

But your delete is a link, but it should be a form, so with onclick="event.preventDefault(); document.getElementById('submit-form-{{ $loop->index }}').submit();" you simulate to send a form by clicking on the link. I hope you get it.

CookieMonster's avatar

Marked your answer.

So if I use a normal form with method post for delete, I do not need to use loop index to make it uniquely?

MichalOravec's avatar

Yes of course, that id of form is just for javascript document.getElementById.

CookieMonster's avatar

So I was right, your solution had something to do with it.

MichalOravec's avatar

Yes because I don't know that you have it inside of foreach.

CookieMonster's avatar

Will it make a difference had it been outside the foreach?

CookieMonster's avatar

Though, I thought to submit a form, you usually need a submit button to come with the request but I didn't know you can use anchor tag (href) to do the submit as well. A cool method indeed.

MichalOravec's avatar

If you have just one form like that, your <form id="some-unique-key"> will be only one on a page and it will be work.

CookieMonster's avatar

Since you use href to called the form (by masking), why not just use a form with submit button directly lol?

MichalOravec's avatar

Of course you can do it, but your question before was

How do I send put method on an anchor tag?

CookieMonster's avatar

Right, but is this way really wrong to it or it's still fine?

CookieMonster's avatar

Oh and why do you use event.preventDefault() since my form method will return back() ? It essentially does the same thing.

MichalOravec's avatar

This prevents normal behaviour of links, which is send get request.

event.preventDefault()

Please or to participate in this conversation.