I was wondering. It's not possible to put Javascript inside blade @if right? Is blade @if some form of php but using php code will be discouraged in view right? What should I do? Here's the logic of what I'm trying to achieve. Basically, what alternative ways are there to achieve what I'm trying to do? I'm trying to show button when the three conditions are met.

@if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
    <button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
@endif

I was wondering. It's not possible to put Javascript inside blade @if right? Is blade @if some form of php but using php code will be discouraged in view right? What should I do? Here's the logic of what I'm trying to achieve. Basically, what alternative ways are there to achieve what I'm trying to do? I'm trying to show button when the three conditions are met.

@if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
    <button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
@endif

• javascript
• php
• laravel
• if-statement
• laravel-blade

Share Improve this question Follow edited Aug 21, 2024 at 12:48 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Jun 28, 2018 at 8:14 Ben KaoBen Kao 66133 gold badges99 silver badges1818 bronze badges 3

• 1 Sorry, It's not quite clear that what you want to achieve. May be you can add what error that you get with your code above. Before going through, things we need to understand is what code will executed by server (which is @blade, php), and what code will executed by the browser (javascript). – Dharma Saputra Commented Jun 28, 2018 at 8:25
• What's, exactly, the problem? Your code seems to be OK?! In other words, if the @if condition is evaluated true, in your page HTML source you will see, <button ... onClick="cancelBooking('someIDvalue')">...</button> – SaidbakR Commented Jun 28, 2018 at 8:31
• I'm trying to show button when the three conditions are met. – Ben Kao Commented Jun 28, 2018 at 8:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Blade is a form of php, so all work is done on the server. So you cannot call javascript functions inside @if expression. Instead you can run the functions in the controller and return a value to say if you should include the button or not or you can have a javascript to show or hide the button if you don't care if the users can find and show the button if they want.

Something like in your controller return view('your view')->with(['showButton' => $shouldShow) and in your view @if($shouldShow) and the rest of your code

Your js must be in public or a child, and would be something like this:

@if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
    @include('script.js')
    <button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
@endif

Another option could be <script src="{{ asset('js/scripts.js') }}"></script> instead of @include directive

This will work:

@if(condition)

  <script>
     js code to show button
  </script>

@endif

The @if function does not work inside <script> tags, but it will work when wrapped around the <script></script> tags.

i guess:

@if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
    @include('script.js')
    <button type="button" class="btn btn-primary btn-sm" data-id="{{ $one_parking_info->booking_data->m_bkl_gov_id }}">取消</button>
@endif

<script>
  $('body').on('click','.btn-sm',function(){
        var id = $(this).attr('data-id');
        //
          logic of cancelBooking
        //
   })
</script>