Блог

Я хочу, чтобы пользователь комментировал без перезагрузки своей страницы. Для этого я применил ajax через jquery. Когда приходит ответ, я добавляю HTML-код в блейд.

  success: function(res)
            {
                
                var first_name = res.first_name;
                var last_name = res.last_name;
                var profilepic = res.profilepic;
                var created_at = res.created_at;
                $('.profile_comment').prepend(
                        '<div class="others_comment d-flex mb-15">' 
                            '<div class="users-img">' 
                                '<img @if(!empty(' profilepic ')) src="{{URL::asset("uploads/memberprofile/" . ' profilepic ')}}" @else src="{{URL::asset("member/assets/images/user.png")}}" @endif alt="user" class="img-fluid">' 
                            '</div>' 
                            '<div class="user_side">' 
                                '<div class="d-flex">' 
                                    '<h6 class="name">{{ucfirst(' first_name ')}} {{ucfirst(' last_name ')}}</h6>' 
                                    '@php $date= date("F d,Y", strtotime(' created_at '));  @endphp' 
                                    '<p class="ml-auto font-xs">{{$date}}</p>' 
                                '</div>' 
                                '<p class="comment">{{ucfirst(' comment ')}}</p>' 
                                '<div  class="footer_comment d-flex">' 
                                    '<button class="btn-none ml-auto"> <img src="{{URL::asset("member/assets/images/option.svg")}}" alt="option" class="img-fluid"> </button>' 
                                '</div>' 
                            '</div>' 
                        '</div>'
                );
  

Это код, который я пробовал до сих пор. Но это не показывает значение внутри переменной.

Это классическая проблема при работе с Blade и JavaScript. Способ работы Blade заключается в том, что он просматривает ваш шаблон, а затем компилирует его в соответствующий .php файл, который браузер может интерпретировать.

Что здесь происходит, так это то, что перед выполнением любого скрипта blade выполнит все его директивы. Например, строка ниже:

 '<img @if(!empty(' profilepic ')) src="{{URL::asset("uploads/memberprofile/" . ' profilepic ')}}" @else src="{{URL::asset("member/assets/images/user.png")}}" @endif alt="user" class="img-fluid">'
  

Преобразуется во что-то похожее на

 '<img src="localhost/storage/uploads/memberprofile/ profilepic " alt="user" class="img-fluid">'
  

перед выполнением любых сценариев (то есть перед вызовом ajax). Я сталкивался с этой проблемой раньше, и в зависимости от того, насколько сложным был вариант использования, я решил его 2 способами, вам решать, какой из них выбрать:

1. Используйте JS для всего в вашем обратном вызове ajax и используйте переменные, которые вы получаете из ответа: first_name , last_name и т.д. Это может стать довольно утомительным, если у вас сложная логика или вы используете много PHP во внешнем интерфейсе.
2. Сгенерируйте HTML-элементы на стороне сервера и отправьте обратно весь html в виде строки.

 // server side
return response()->json(['element' => $elementString]);

// client side
$('.profile_comment').prepend(res.element);