How to use JQuery with a blade in laravel ?

Here's the part in the blade:

Seat type: @foreach($value as $seat)

{{$seat->seat_type}} @endforeach

When click on a 'seat-type' its respective 'price' from the same table should get displayed.

How to make it possible ?

Here's my function in Model:

public static function getSeatType() { $data=DB::table('seat_types')->get(); return $data;//returns data to a view say 'booking.blade' }

automica

5 years ago

Level 54

@nikhillvl if you are just looking to show / hide prices, output the price field in a div and hide it with css.

then you can do the following:

<html>
<head>

    <style>
        ul#seats .price {
            display: none;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    
    <script type="application/javascript">
    
    $(function () {
      $('#seats li button').on('click', function () {
        $(this).parent('li').find('div.price').toggle();
        $(this).text($(this).text() === 'show price' ? 'hide price' : 'show price');
      })
    });
    </script>
</head>
<body>
<ul id="seats">
    <li> seat 1
        <button>show price</button>
        <div class="price"> £10</div>
    </li>
    <li> seat 2
        <button>show price</button>
        <div class="price"> £30</div>
    </li>
    <li> seat 3
        <button>show price</button>
        <div class="price"> £40</div>
    </li>
</ul>
</body>
</html>

your blade would look like this:

<ul id='seats'>
@foreach($value as $seat)

<li> {{$seat->seat_type}}  <button>show price</button>
        <div class="price">{{$seat->seat_price}} </div>
</li>
@endforeach
</ul>

css:

    <style>
        ul#seats .price {
            display: none;
        }
    </style>

and jquery

    $(function () {
      $('#seats li button').on('click', function () {
        $(this).parent('li').find('div.price').toggle();
        $(this).text($(this).text() === 'show price' ? 'hide price' : 'show price');
      })
    });