рендеринг HTML с лезвием @foreach внутри тега скрипта

Question

У меня есть выпадающий список.Для конкретной выбранной опции я хочу визуализировать HTML с другими данными в представлении, поступающими из контроллера.

Для этого я пишу скрипт-тег в представлении, затем использую blade-foreach внутри jQuery, если условие и затем итерирует HTML внутри blade-php,но это дает мне ошибку

userprofile:966 Uncaught SyntaxError: Unexpected token <

Я новичок в Laravel и все еще исследую, поэтому задаюсь вопросом, возможно ли это вообще.Если это невозможно, то как мне этого добиться?

Вот мой код

<script>
                        $(document).ready(function () {

                            if ($("#user_right").val() == 1)
                            {
                                @foreach ($user_alias_detail["a"] as $user)

                                        <div class="field">
                                            <input type="text" value="{{ $user->name }}">
                                        </div>
                                @endforeach
                            }
                            elseif ($("#user_right").val() == 2)
                            {
                                @foreach ($user_alias_detail["b"] as $user)

                            <div class="field">
                                <input type="text" value="{{ $user->name }}">
                            </div>
                                @endforeach
                            }
                        });
                    </script>

Answer 1

, чтобы дать вам полный ответ, мне нужно знать, где в вашем коде должны отображаться все эти элементы.

Я бы использовал что-то вроде этого. Вы конвертируете массив php в массив json и используйте цикл (for .. in) для перебора массива json. С помощью jquery append вы вставляете html в родительский элемент DOM.

<script>
var user_a = @json($user_alias_detail["a"]);
var user_b = @json($user_alias_detail["b"]);


       $(document).ready(function () {

                        if ($("#user_right").val() == 1)

                                for(var user in user_a) {
                                // container div is the wrapper element
                                $(".container-div").append('<div class="field">
                                    <input type="text" value="'+user.name+'">
                                </div>');
                            }
                    }
                    elseif ($("#user_right").val() == 2)
                    {

                            for(var user in user_b) {
                                // container div is the wrapper element
                                $(".container-div").append('<div class="field">
                                    <input type="text" value="'+user.name+'">
                                </div>');
                            }
                    }
                });
</script>

Answer 2

попробуйте этот кусок кода.Я нашел время, чтобы написать это для вас.Вы можете изменить его в соответствии с вашими потребностями.Спасибо.

//form blade

<div class="form-group">
   <label class="control-label">Select Value <span style="color:red">*</span></label>

   <select class="form-control" id="user_right" name="user_right" required>  
      <option value="">--Select--</option>             
      <option value="1"{{(old('user_right')=='1')? "selected"  : ""}}>One</option>
      <option value="2"{{(old('user_right')=='2')? "selected"  : ""}}>Two</option>
      <option value="3"{{(old('user_right')=='3')? "selected"  : ""}}>Three</option>

   </select>

</div>

<div class="form-group">
  @if($htmldata=='')
     <!--display nothing on page-->
  @else

   {{ $htmldata->recorddetails }}

  @elseif                                


</div>


//javascript code to fetch the item id
<script type="text/javascript">
            // When the document is ready
     $(document).ready(function(){

    $("#user_right").change(function(e){

       var value= e.target.value;

       if ("https:" == document.location.protocol) 
        {

        location.href="https://example.com/renderpage/"+value;
        } 
      else 
        {
        location.href="http://example.com/renderpage/"+value;
       }

    });

</script>


//route
Route::get('/loadpage','Controller@displayPage');
Route::get('/renderpage/{id}','Controller@displaydataonPage');


//controller to load page
public function displayPage()
   {  

      $data['htmldata']='';    
      return view('htmlpage', $htmldata);

   }

//controller to display data on page
public function displaydataonPage($id)
   {  
 $data['htmldata']=DB::table('table')->where('datavalue',$id)->orderby('rank','asc')->first();             
      return view('htmlpage', $htmldata);    
   }

Answer 3

Использовать литералы шаблона ``

                 <script>
                    $(document).ready(function () {

                        if ($("#user_right").val() == 1)
                        {
                           `
                            @foreach ($user_alias_detail["a"] as $user)

                                    <div class="field">
                                        <input type="text" value="{{ $user->name }}">
                                    </div>
                            @endforeach
                           `
                        }
                        elseif ($("#user_right").val() == 2)
                        {
                          `
                            @foreach ($user_alias_detail["b"] as $user)

                        <div class="field">
                            <input type="text" value="{{ $user->name }}">
                        </div>
                            @endforeach
                          `
                        }
                    });
                </script>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals